/* 페이지 배치 — 토큰만 사용 */

/* 페이지 머리 (시안 "Interior" 제목) */
.page-head { padding: var(--sp-16) 0 var(--sp-8); }
.page-head .t-display { margin-top: var(--sp-2); }
.page-head .t-body { margin-top: var(--sp-4); max-width: var(--reading-max); }
.crumb { display: flex; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--color-text-muted); font-weight: var(--fw-semibold); letter-spacing: var(--ls-meta); text-transform: uppercase; }
.crumb a:hover { color: var(--color-text); }
.crumb span + span::before, .crumb a + span::before { content: "/"; margin-right: var(--sp-2); color: var(--color-line-strong); }

/* 홈 */
.hero { position: relative; }
.hero .media { aspect-ratio: var(--ratio-hero); overflow: hidden; background: var(--color-surface); }
.hero .media img { width: 100%; height: 100%; object-fit: cover; animation: hero-in var(--dur-shimmer) var(--ease-out-expo) both; }
@keyframes hero-in { from { transform: scale(var(--scale-zoom)); opacity: 0; } to { transform: none; opacity: 1; } }
.hero .copy { padding: var(--sp-8) 0 0; }
.hero .copy > * + * { margin-top: var(--sp-4); }
.hero .cta { margin-top: var(--sp-8); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (min-width: 768px) {
  .hero .media { aspect-ratio: var(--ratio-wide); }
}
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-16); align-items: end; }
  .hero .media { order: 2; aspect-ratio: var(--ratio-card); }
  .hero .copy { padding: 0 0 var(--sp-10); }
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.section-head .t-h2 { margin-top: var(--sp-2); }

.two-col { display: grid; gap: var(--sp-10); }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; } }

/* 소개 개요 (시안 7번 글 화면) */
.article .lead { font-size: var(--fs-h3); line-height: var(--lh-relaxed); color: var(--color-text); }
.article p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-text-muted); }
.article p + p { margin-top: var(--sp-5); }
.article .figure { margin: var(--sp-10) 0; }
.article .figure img { width: 100%; aspect-ratio: var(--ratio-wide); object-fit: cover; }
.article .caption { margin-top: var(--sp-3); font-size: var(--fs-meta); color: var(--color-text-muted); }
.overview > p.pre:first-child { font-size: var(--fs-h3); line-height: var(--lh-relaxed); color: var(--color-text); }
.overview .facts { margin-top: var(--sp-12); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--color-line); }
.facts > div { display: grid; grid-template-columns: calc(var(--thumb-list)) 1fr; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-line); font-size: var(--fs-small); }
.facts dt { color: var(--color-text); font-weight: var(--fw-semibold); }
.facts dd { color: var(--color-text-muted); }

/* 기록(일지) 상세 */
.entry-head { padding: var(--sp-12) 0 var(--sp-8); }
.entry-head > * + * { margin-top: var(--sp-3); }
.entry-cover { aspect-ratio: var(--ratio-wide); overflow: hidden; background: var(--color-surface); }
.entry-cover img { width: 100%; height: 100%; object-fit: cover; }
.entry-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-top: var(--sp-10); }
.entry-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-8); }
.entry-nav a { display: grid; gap: var(--sp-1); padding: var(--sp-4) 0; }
.entry-nav a:last-child { text-align: right; }

/* 상품 상세 */
.product { display: grid; gap: var(--sp-8); padding-top: var(--sp-8); }
.product .panel > * + * { margin-top: var(--sp-4); }
.product .actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.product .qty-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
@media (min-width: 1024px) {
  .product { grid-template-columns: 7fr 5fr; gap: var(--sp-16); align-items: start; }
  .product .panel { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
}

/* 회원 (로그인·가입) */
.auth { max-width: calc(var(--reading-max) * 0.7); margin: 0 auto; padding: var(--sp-16) 0; }
.auth .t-display { margin-bottom: var(--sp-8); }
.auth form > * + * { margin-top: var(--sp-6); }
.auth .actions { margin-top: var(--sp-10); display: grid; gap: var(--sp-3); }
.consents { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.consents .all { border-bottom: 1px solid var(--color-line); }
.consents .all .txt { font-weight: var(--fw-semibold); }
.consent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.consent-row .check { flex: 1; }
.consent-row .more { flex: none; font-size: var(--fs-meta); color: var(--color-text-muted); min-height: var(--tap-min); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: var(--sp-1); }
.consent-detail { margin: 0 0 var(--sp-3) calc(var(--check) + var(--sp-3)); }
.consent-detail .tbl { font-size: var(--fs-meta); }
.consent-detail .key { font-weight: var(--fw-semibold); color: var(--color-text); text-decoration: underline; text-underline-offset: var(--sp-1); } /* 시행령 제17조③ 중요 내용 강조 */
.sub-consent { margin-left: calc(var(--check) + var(--sp-3)); }
.done-box { display: grid; justify-items: start; gap: var(--sp-4); }

/* 마이페이지 */
.my-grid { display: grid; gap: var(--sp-10); }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--color-line); }
.pref-row .t-small { margin-top: var(--sp-1); }
.kv { display: grid; grid-template-columns: calc(var(--thumb-list)) 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-line); font-size: var(--fs-small); }
.kv dt { color: var(--color-text-muted); }
.kv dd { color: var(--color-text); font-weight: var(--fw-medium); }

/* 약관·처리방침 */
.doc { padding-bottom: var(--sp-16); }
.doc .toc { padding: var(--sp-6) 0; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-line); margin-bottom: var(--sp-10); }
.doc .toc ol { display: grid; gap: var(--sp-1); counter-reset: toc; }
.doc .toc a { font-size: var(--fs-small); color: var(--color-text-muted); display: inline-flex; min-height: var(--sp-8); align-items: center; }
.doc .toc a:hover { color: var(--color-text); }
.doc h2 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-text); margin: var(--sp-12) 0 var(--sp-4); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.doc h3 { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); margin: var(--sp-6) 0 var(--sp-2); }
.doc p, .doc li { font-size: var(--fs-small); line-height: var(--lh-relaxed); color: var(--color-text-body); }
.doc p + p { margin-top: var(--sp-3); }
.doc ul.bul { margin: var(--sp-2) 0; }
.doc ul.bul li { position: relative; padding-left: var(--sp-4); }
.doc ul.bul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: var(--sp-1); height: 1px; background: var(--color-text-muted); }
.doc .table-wrap { margin: var(--sp-3) 0 var(--sp-4); }
.labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); margin-bottom: var(--sp-10); }
.labels > div { background: var(--color-bg); padding: var(--sp-4); display: grid; gap: var(--sp-1); }
.labels .k { font-size: var(--fs-meta); font-weight: var(--fw-semibold); letter-spacing: var(--ls-meta); color: var(--color-text-muted); }
.labels .v { font-size: var(--fs-small); color: var(--color-text); }
@media (min-width: 768px) { .labels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc .meta-line { font-size: var(--fs-meta); color: var(--color-text-muted); }

/* 오시는 길 */
.loc-info { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.loc-addr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--color-line); }
.loc-addr .t-h3 { line-height: var(--lh-normal); }
@media (min-width: 1024px) { .loc-info { grid-template-columns: 1fr 1fr; gap: var(--sp-16); } }

/* 404 */
.nf { padding: var(--sp-24) 0; }