8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
1161 lines
22 KiB
CSS
1161 lines
22 KiB
CSS
@import "./tokens.css?v=20261006";
|
|
|
|
/* ==========================================================================
|
|
캐스크 아카이브 — 메인 스타일시트
|
|
구조: 왼쪽 측면 색인(sticky) + 오른쪽 본문. 첫 화면은 캐스크 번호 목록이다.
|
|
모션은 hover·focus 상태 전환만 둔다. 등장 모션·재질 필터는 없다.
|
|
========================================================================== */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-synthesis-style: none;
|
|
font-synthesis-weight: none;
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
line-height: var(--leading-normal);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 한글 조판 정본(typography §6-5) */
|
|
:lang(ko) {
|
|
word-break: keep-all;
|
|
overflow-wrap: anywhere;
|
|
line-break: strict;
|
|
}
|
|
|
|
:lang(ko) :is(p, li, dd, figcaption) {
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
:lang(ko) :is(h1, h2, h3) {
|
|
line-height: var(--leading-tight);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
:lang(ko) :is(em, i, cite, dfn, address) {
|
|
font-style: normal;
|
|
}
|
|
|
|
:lang(ko) em {
|
|
font-weight: var(--weight-strong);
|
|
}
|
|
|
|
:lang(ko) a {
|
|
text-underline-position: under;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-display);
|
|
color: var(--ink);
|
|
}
|
|
|
|
strong {
|
|
font-weight: var(--weight-strong);
|
|
}
|
|
|
|
.num {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.mt-5 {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.mt-6 {
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
:where(a, button, input, select, textarea, summary):focus-visible {
|
|
outline: 3px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── 스킵 링크 ── */
|
|
.skip-link {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
z-index: 1000;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
border-radius: var(--radius);
|
|
font-weight: var(--weight-strong);
|
|
transform: translateY(-200%);
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── 셸: 측면 색인 + 본문 ── */
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: var(--index-width) minmax(0, 1fr);
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.index {
|
|
grid-column: 1;
|
|
position: sticky;
|
|
top: 0;
|
|
align-self: start;
|
|
max-height: 100dvh;
|
|
overflow-y: auto;
|
|
padding: var(--space-5) var(--space-4) var(--space-5) var(--pad-inline);
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.wordmark {
|
|
display: block;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-1);
|
|
font-weight: var(--weight-display);
|
|
color: var(--ink);
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wordmark-sub {
|
|
display: block;
|
|
white-space: normal;
|
|
margin-top: var(--space-1);
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.toc {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.toc summary {
|
|
display: none;
|
|
}
|
|
|
|
/* 닫힌 차례의 링크는 content-visibility 로만 숨기지 않고 상자도 없앤다 — Chromium 에서 닫힌 details 안
|
|
링크가 상자를 가진 채 UA 기본 색으로 계산되는 경우가 있었다(실렌더 감사 320 대비 1.93 오탐) */
|
|
.toc:not([open]) nav {
|
|
display: none;
|
|
}
|
|
|
|
.toc ol {
|
|
list-style: none;
|
|
counter-reset: toc;
|
|
}
|
|
|
|
.toc li {
|
|
counter-increment: toc;
|
|
}
|
|
|
|
.toc a {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: baseline;
|
|
min-height: var(--control-block);
|
|
padding: var(--space-2) 0 var(--space-2) var(--space-3);
|
|
border-left: 2px solid transparent;
|
|
color: var(--ink-muted);
|
|
font-size: var(--step--1);
|
|
line-height: 1.4;
|
|
transition: color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.toc a::before {
|
|
content: counter(toc, decimal-leading-zero);
|
|
font-family: var(--font-display);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--ink-faint);
|
|
transition: color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.toc a:hover,
|
|
.toc a[aria-current] {
|
|
color: var(--ink);
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.toc a:hover::before,
|
|
.toc a[aria-current]::before {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.index-foot {
|
|
margin-top: var(--space-5);
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--line);
|
|
display: grid;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.index-foot p {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
/* ── 본문 ── */
|
|
.content {
|
|
grid-column: 2;
|
|
min-width: 0;
|
|
padding-inline: var(--pad-inline);
|
|
}
|
|
|
|
.section {
|
|
max-width: var(--content-max);
|
|
padding-block: var(--space-6);
|
|
border-top: 1px solid var(--line);
|
|
scroll-margin-top: var(--space-4);
|
|
}
|
|
|
|
.section:first-child {
|
|
border-top: 0;
|
|
padding-top: var(--space-5);
|
|
}
|
|
|
|
.section-head {
|
|
margin-bottom: var(--space-5);
|
|
max-width: var(--measure);
|
|
}
|
|
|
|
.section-head h2 {
|
|
font-size: var(--step-2);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.section-head p {
|
|
color: var(--ink-muted);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* ── 첫 화면: 캐스크 목록 ── */
|
|
.ledger-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--space-2) var(--space-5);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.ledger-head h1 {
|
|
font-size: var(--step-1);
|
|
font-weight: var(--weight-display);
|
|
max-width: var(--measure);
|
|
}
|
|
|
|
.ledger-head p {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.ledger-filter-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.filter-btn-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
min-height: var(--control-block);
|
|
padding-inline: var(--control-pad-inline);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: transparent;
|
|
color: var(--ink-muted);
|
|
font-size: var(--step--1);
|
|
transition: border-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft), background-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
border-color: var(--line-strong);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.filter-btn.is-active {
|
|
border-color: var(--accent);
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.search-input {
|
|
min-height: var(--control-block);
|
|
min-width: 16rem;
|
|
padding-inline: var(--control-pad-inline);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface-sunken);
|
|
color: var(--ink);
|
|
font-size: var(--step--1);
|
|
transition: border-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.search-input:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.ledger-table-wrap {
|
|
/* 표 안의 sr-only(absolute) 가 스크롤 상자 밖으로 새어 문서 폭을 늘리지 않게 상자를 기준점으로 둔다(200% 확대 실측) */
|
|
position: relative;
|
|
overflow-x: auto;
|
|
border-top: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.ledger-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: var(--step--1);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ledger-table th {
|
|
padding: var(--space-2) var(--space-2);
|
|
color: var(--ink-muted);
|
|
font-weight: var(--weight-regular);
|
|
font-size: var(--step--1);
|
|
border-bottom: 1px solid var(--line);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-table td {
|
|
padding: var(--space-4) var(--space-2);
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.ledger-table tbody tr {
|
|
scroll-margin-top: var(--space-4);
|
|
transition: background-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.ledger-table tbody tr:hover {
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.ledger-table .cask-no {
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-3);
|
|
font-weight: var(--weight-display);
|
|
line-height: 1;
|
|
color: var(--accent);
|
|
white-space: nowrap;
|
|
width: 1%;
|
|
padding-top: calc(var(--space-4) + 0.07em); /* 숫자 윗선을 증류소 이름의 대문자 윗선에 맞춘다(2x 실측 8px 차) */
|
|
padding-right: var(--space-4);
|
|
}
|
|
|
|
.ledger-table .cask-name {
|
|
display: block;
|
|
font-size: var(--step-0);
|
|
font-weight: var(--weight-strong);
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-table .distillery {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.ledger-table .cask-sub {
|
|
display: block;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.ledger-table .abv {
|
|
color: var(--ink);
|
|
font-weight: var(--weight-strong);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-table .bottles {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-table .bottler {
|
|
min-width: 7rem;
|
|
}
|
|
|
|
.ledger-table .cask-type {
|
|
min-width: 9rem;
|
|
}
|
|
|
|
.ledger-table .notes {
|
|
min-width: 11rem;
|
|
color: var(--ink-muted);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.ledger-table .act {
|
|
text-align: right;
|
|
}
|
|
|
|
.ledger-table .act .btn-outline {
|
|
min-height: var(--control-block);
|
|
}
|
|
|
|
/* ── 버튼 ── */
|
|
.btn-fill,
|
|
.btn-outline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: var(--control-block);
|
|
padding-inline: var(--space-4);
|
|
border-radius: var(--radius);
|
|
font-size: var(--step--1);
|
|
font-weight: var(--weight-strong);
|
|
white-space: nowrap;
|
|
transition: background-color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.btn-fill {
|
|
background: var(--accent);
|
|
color: var(--accent-ink);
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
.btn-fill:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
color: var(--accent-ink);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── 그림: 원본 비율, 캡션은 옆 ── */
|
|
.figure-aside {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
|
|
gap: var(--space-4) var(--space-5);
|
|
align-items: start;
|
|
margin: 0;
|
|
}
|
|
|
|
.figure-aside img {
|
|
width: 100%;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.figure-aside figcaption {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
align-content: start;
|
|
}
|
|
|
|
.figure-aside figcaption strong {
|
|
display: block;
|
|
color: var(--ink);
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-1);
|
|
font-weight: var(--weight-display);
|
|
}
|
|
|
|
.figure-aside.is-portrait {
|
|
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
|
|
}
|
|
|
|
.figure-aside.is-reverse figcaption {
|
|
order: -1;
|
|
}
|
|
|
|
/* ── 정의 목록(사양·병입자) ── */
|
|
.spec-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
|
|
gap: var(--space-4) var(--space-5);
|
|
}
|
|
|
|
.spec-list dt {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.spec-list dd {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.bottler-list {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-4) var(--space-5);
|
|
}
|
|
|
|
.bottler-list li {
|
|
padding-top: var(--space-3);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.bottler-list strong {
|
|
display: block;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-1);
|
|
font-weight: var(--weight-display);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.bottler-list p {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: var(--space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
/* ── 도슨트 코스 ── */
|
|
.course-list {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.course-card {
|
|
padding: var(--space-4) 0;
|
|
border-top: 1px solid var(--line);
|
|
transition: border-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.course-card:hover {
|
|
border-top-color: var(--accent);
|
|
}
|
|
|
|
.course-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.course-title {
|
|
font-size: var(--step-1);
|
|
}
|
|
|
|
.course-price {
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-1);
|
|
font-weight: var(--weight-display);
|
|
color: var(--accent);
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.course-card p {
|
|
color: var(--ink-muted);
|
|
font-size: var(--step--1);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.course-meta {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-1) var(--space-4);
|
|
font-size: var(--step--1);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.course-card .lineup-table {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.course-foot {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.lineup-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--step--1);
|
|
}
|
|
|
|
.lineup-table th,
|
|
.lineup-table td {
|
|
padding: var(--space-2) var(--space-2) var(--space-2) 0;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.lineup-table th {
|
|
color: var(--ink-muted);
|
|
font-weight: var(--weight-regular);
|
|
}
|
|
|
|
.lineup-table td:first-child {
|
|
font-family: var(--font-display);
|
|
color: var(--accent);
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.lineup-table td:last-child {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── 폼 ── */
|
|
.form-panel {
|
|
padding: var(--space-5);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.form-panel h3 {
|
|
font-size: var(--step-1);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
min-height: var(--control-block);
|
|
padding-inline: var(--control-pad-inline);
|
|
background: var(--surface-sunken);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
color: var(--ink);
|
|
font-size: var(--step-0);
|
|
transition: border-color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.form-panel .btn-fill {
|
|
width: 100%;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.demo-notice {
|
|
max-width: var(--measure);
|
|
margin-top: var(--space-4);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-left: 3px solid var(--accent);
|
|
background: var(--accent-light);
|
|
color: var(--ink-muted);
|
|
font-size: var(--step--1);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ── 시음회 일정 ── */
|
|
.event-list {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.event-item {
|
|
display: grid;
|
|
grid-template-columns: 9rem minmax(0, 1fr);
|
|
gap: var(--space-4);
|
|
padding: var(--space-4) 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.event-item:last-child {
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.event-date {
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-2);
|
|
font-weight: var(--weight-display);
|
|
color: var(--accent);
|
|
line-height: 1.1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.event-date small {
|
|
display: block;
|
|
margin-top: var(--space-1);
|
|
font-family: var(--font-body);
|
|
font-size: var(--step--1);
|
|
font-weight: var(--weight-regular);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.event-item h3 {
|
|
font-size: var(--step-1);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.event-item p {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.newsletter {
|
|
max-width: var(--measure);
|
|
}
|
|
|
|
.newsletter h3 {
|
|
font-size: var(--step-1);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.newsletter p {
|
|
color: var(--ink-muted);
|
|
font-size: var(--step--1);
|
|
}
|
|
|
|
.newsletter-form {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.newsletter-form .form-input {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/* ── 병입 정보 모달 ── */
|
|
.cert-dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: min(90vw, 30rem);
|
|
max-height: calc(100dvh - var(--space-5) * 2);
|
|
padding: var(--space-5);
|
|
background: var(--surface-card);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius);
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.cert-dialog::backdrop {
|
|
background: rgba(20, 15, 13, 0.8);
|
|
}
|
|
|
|
.cert-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding-bottom: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.cert-head h3 {
|
|
font-size: var(--step-1);
|
|
}
|
|
|
|
.cert-close {
|
|
min-width: var(--control-block);
|
|
min-height: var(--control-block);
|
|
color: var(--ink-muted);
|
|
border-radius: var(--radius);
|
|
transition: color var(--dur-quick) var(--ease-soft);
|
|
}
|
|
|
|
.cert-close:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.cert-list {
|
|
display: grid;
|
|
grid-template-columns: 7rem minmax(0, 1fr);
|
|
gap: var(--space-2) var(--space-3);
|
|
font-size: var(--step--1);
|
|
}
|
|
|
|
.cert-list dt {
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.cert-list dd {
|
|
color: var(--ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.cert-foot {
|
|
margin-top: var(--space-4);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
html:has(dialog[open]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── 푸터: 다열 색인 ── */
|
|
.site-foot {
|
|
grid-column: 1 / -1;
|
|
border-top: 1px solid var(--line-strong);
|
|
padding: var(--space-6) var(--pad-inline);
|
|
background: var(--surface-sunken);
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.foot-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--space-5);
|
|
max-width: calc(var(--index-width) + var(--content-max));
|
|
}
|
|
|
|
.foot-grid h2 {
|
|
font-size: var(--step-0);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.foot-grid ul {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.foot-grid a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 2rem;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.foot-grid a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.foot-grid p + p {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.foot-note {
|
|
max-width: calc(var(--index-width) + var(--content-max));
|
|
margin-top: var(--space-5);
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1023px) {
|
|
.shell {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.index {
|
|
grid-column: 1;
|
|
position: static;
|
|
max-height: none;
|
|
overflow: visible;
|
|
padding: var(--space-3) var(--pad-inline);
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
column-gap: var(--space-4);
|
|
align-items: center;
|
|
}
|
|
|
|
.wordmark {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.toc {
|
|
grid-column: 1 / -1;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.toc summary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: var(--control-block);
|
|
padding-inline: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
font-size: var(--step--1);
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.toc summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.toc summary::before {
|
|
content: "차례";
|
|
}
|
|
|
|
.toc[open] summary::before {
|
|
content: "차례 닫기";
|
|
}
|
|
|
|
.toc ol {
|
|
padding-block: var(--space-2);
|
|
}
|
|
|
|
/* 좁은 화면에서는 차례가 접히므로 색인 아래 요약·버튼을 숨긴다. 같은 행동은 차례와 푸터에 있다 */
|
|
.index-foot {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.foot-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1399px) {
|
|
/* 본문 폭이 1074px을 밑돌면 8열 표가 가로 스크롤을 만든다(1280 실측 1051px > 960px, 1366 실측 1056px > 1042px).
|
|
행을 flex 줄바꿈 목록으로 바꾼다. 행은 그대로 tr 이므로 검색·분류 스크립트는 바뀌지 않는다 */
|
|
.ledger-table thead {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ledger-table,
|
|
.ledger-table tbody,
|
|
.ledger-table td {
|
|
display: block;
|
|
}
|
|
|
|
.ledger-table tr {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--space-2) var(--space-4);
|
|
padding-block: var(--space-4);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.ledger-table td,
|
|
.ledger-table .distillery,
|
|
.ledger-table .bottler,
|
|
.ledger-table .cask-type,
|
|
.ledger-table .notes {
|
|
padding: 0;
|
|
border: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.ledger-table .cask-name {
|
|
white-space: normal;
|
|
}
|
|
|
|
.ledger-table .cask-no {
|
|
flex: 0 0 11rem;
|
|
width: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.ledger-table .distillery {
|
|
flex: 1 1 11rem;
|
|
}
|
|
|
|
.ledger-table .bottler,
|
|
.ledger-table .cask-type {
|
|
flex: 1 1 9rem;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ledger-table .abv,
|
|
.ledger-table .bottles {
|
|
flex: 0 1 5rem;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ledger-table .notes {
|
|
flex: 1 1 20rem;
|
|
margin-left: calc(11rem + var(--space-4));
|
|
}
|
|
|
|
.ledger-table .act {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.ledger-table td[data-label]:not(.distillery)::before {
|
|
content: attr(data-label) " ";
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.two-col,
|
|
.figure-aside,
|
|
.figure-aside.is-portrait {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.figure-aside.is-reverse figcaption {
|
|
order: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.ledger-table .cask-no {
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.ledger-table .notes {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.search-input {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.bottler-list {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.spec-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.course-header,
|
|
.course-foot {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.event-item {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.newsletter-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.foot-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.cert-list {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: 1ms !important;
|
|
animation-duration: 1ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|