/* ════════════════════════════════════════════════
   D10 · 디일공 — 미니멀 부티크
   홈은 로고 카드, 상세는 안에서.
   ════════════════════════════════════════════════ */

:root {
  --paper: #FAFAF8;
  --paper-2: #F2F1ED;
  --card: #FFFFFF;
  --ink: #0B0B0C;
  --gray: #6B7280;
  --gray-2: #9A9A93;
  --line: #E7E7E4;
  --line-soft: #EFEEEA;
  --terra: #E65100;
  --terra-soft: #FBEDE4;
  --olive: #5B6236;
  --olive-soft: #EEF0E6;
  --d-bg: #0B0B0C;
  --d-fg: #F4F3EF;
  --d-dim: #9C9C97;
  --d-line: #26262A;
  --r: 18px;
  --r-sm: 12px;
  --r-lg: 26px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* D10 사이트 고유 디스플레이 — Seeder(Fraunces)와 겹치지 않게 */
  --display: "Space Grotesk", Pretendard, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

.serif { font-family: "Fraunces", Pretendard, serif; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.eyebrow { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gray-2); }

/* ════════ 네비 ════════ */
.nav { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
.nav-in { max-width: 1080px; margin: 0 auto; padding: 0 30px; height: 64px; display: flex; align-items: center; }
/* D10 스택 락업 — Geist Mono 마크 + Pixelify 픽셀 서브라벨 */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.brand .mk { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.brand .sub-label { font-family: "Pixelify Sans", monospace; font-weight: 700; font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray-2); white-space: nowrap; min-height: 9px; }
.brand .caret { display: inline-block; width: .5em; height: .92em; background: currentColor; color: var(--gray);
  vertical-align: -0.06em; margin-left: 1px; }
.brand .caret.blink { animation: hardblink .5s steps(1) infinite; }
@keyframes hardblink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-right a { font-family: var(--display); padding: 8px 14px; border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--gray); transition: color .15s, background .15s; }
.nav-right a:hover { color: var(--ink); background: var(--paper-2); }
.nav-right a.active { color: var(--ink); }

/* ════════ 버튼 ════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 13px 24px; border-radius: 99px; border: 1px solid transparent;
  transition: transform .16s var(--ease), background .16s, border-color .16s, color .16s, box-shadow .16s; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(11,11,12,.55); }
.btn-terra { background: var(--terra); color: #fff; }
.btn-terra:hover { background: #cc4800; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(230,81,0,.5); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.lg { padding: 16px 30px; font-size: 16px; }
.btn-arrow { transition: transform .2s var(--ease); }
.btn:hover .btn-arrow, a:hover > .btn-arrow { transform: translateX(3px); }

/* ════════ 홈 — 로고 카드 진열 ════════ */
.shop { max-width: 1080px; margin: 0 auto; padding: clamp(48px, 9vw, 104px) 30px clamp(60px, 9vw, 110px); }
/* 카테고리 선반 — 제품 종류(독립형/구독형/주문 제작…)별 구획 */
.cat-sec + .cat-sec { margin-top: clamp(44px, 7vw, 72px); padding-top: clamp(40px, 6vw, 56px); border-top: 1px solid var(--line); }
.cat-head { margin-bottom: clamp(18px, 3vw, 26px); }
.cat-head .eyebrow { display: block; color: var(--gray); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

/* 로고 카드 — 조용히, 로고가 주인공 */
.logocard { position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 340px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.logocard:hover { transform: translateY(-5px); box-shadow: 0 44px 84px -48px rgba(11,11,12,.28); border-color: #dbdbd5; }
.logocard .stage { flex: 1; display: grid; place-items: center; padding: clamp(44px, 6vw, 64px) 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF9F5 100%); }
.logocard .lock { text-align: center; }
.logocard .lock .word { font-family: "Fraunces"; font-style: italic; font-weight: 500;
  font-size: clamp(50px, 8vw, 70px); line-height: 1; letter-spacing: -.01em; }
.logocard .lock .word.bespoke { font-family: "Prata", serif; font-style: normal; font-weight: 400;
  font-size: clamp(40px, 6.4vw, 56px); letter-spacing: .01em; }
.logocard .lock .tagline { margin-top: 18px; font-size: 14px; color: var(--gray); letter-spacing: -.01em; }
.logocard .meta { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line-soft); }
.logocard .meta .cat { font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-2); }
.logocard .meta .go { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--gray); }
.logocard .meta .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s var(--ease); }
.logocard:hover .meta .go { color: var(--ink); }
.logocard:hover .meta .go svg { transform: translateX(3px); }

/* 준비중 카드 (자리만) */
.logocard.soon { border-style: dashed; background: transparent; }
.logocard.soon .stage { background: transparent; }
.logocard.soon .word { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: 22px; color: var(--gray-2); }
.logocard.soon .meta .cat { color: var(--gray-2); }

/* ════════ 상세 페이지 ════════ */
.pd { max-width: 920px; margin: 0 auto; padding: clamp(40px, 7vw, 84px) 30px clamp(60px, 8vw, 100px); }
.pd-hero { text-align: center; padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--line); }
.pd-hero .cat { font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); }
.pd-hero .word { font-family: "Fraunces"; font-style: italic; font-weight: 500;
  font-size: clamp(62px, 13vw, 122px); line-height: .98; letter-spacing: -.02em; margin: 18px 0 0; }
.pd-hero .by { margin-top: 14px; font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--gray-2); letter-spacing: .03em; }
.pd-hero .by b { color: var(--ink); font-weight: 700; }
.pd-hero .tag { margin: 26px auto 0; max-width: 30ch; font-size: clamp(17px, 2.6vw, 21px); color: var(--ink); letter-spacing: -.015em; }
.pd-hero .lead { margin: 14px auto 0; max-width: 44ch; color: var(--gray); font-size: 16px; line-height: 1.65; }
.pd-hero .buy { margin-top: 34px; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }
.pd-hero .price { font-size: 15px; color: var(--gray); }
.pd-hero .price .now { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pd-hero .price .list { text-decoration: line-through; color: var(--gray-2); margin-left: 8px; font-size: 14px; }
.pd-hero .price .now small { font-size: 13px; font-weight: 600; color: var(--gray); margin-left: 5px; }

/* 무엇을 하나 — 파이프라인 */
.pd-sec { padding: clamp(46px, 7vw, 72px) 0; border-bottom: 1px solid var(--line); }
.pd-sec > h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.pd-sec > .sub { color: var(--gray); margin: 0 0 30px; font-size: 16px; }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pipe .step { background: var(--card); padding: 26px 22px; }
.pipe .step .n { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--terra); font-weight: 700; }
.pipe .step h3 { margin: 12px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.pipe .step p { margin: 7px 0 0; font-size: 14px; color: var(--gray); line-height: 1.55; }

/* 사양 / 포함 */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; }
.spec .row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.spec .row svg { width: 19px; height: 19px; flex: none; stroke: var(--olive); fill: none; stroke-width: 2; margin-top: 1px; }
.spec .row .t { font-size: 15px; }
.spec .row .t b { font-weight: 600; }
.spec .row .t span { color: var(--gray); display: block; font-size: 13.5px; margin-top: 1px; }

/* 미니 프리뷰 */
.preview { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-top: 6px; }
.pv-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pv-m { background: var(--card); padding: 18px; }
.pv-m .v { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.pv-m .v.acc { color: var(--olive); }
.pv-m .k { font-size: 12.5px; color: var(--gray); margin-top: 6px; }
.pv-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.pv-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--gray); }
.pv-row .nm { width: 92px; color: var(--ink); font-weight: 600; flex: none; }
.pv-row .bar { flex: 1; height: 7px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.pv-row .bar i { display: block; height: 100%; background: var(--olive); border-radius: 99px; }
.pv-row .rate { width: 40px; text-align: right; flex: none; font-weight: 600; color: var(--ink); }

/* 하단 구매 밴드 */
.pd-buy { margin-top: clamp(46px, 7vw, 72px); text-align: center; background: var(--ink); color: var(--d-fg);
  border-radius: var(--r-lg); padding: clamp(38px, 6vw, 60px) 30px; }
.pd-buy h2 { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: clamp(26px, 4.6vw, 40px); margin: 0; letter-spacing: -.02em; }
.pd-buy .price { margin: 18px 0 26px; color: var(--d-dim); font-size: 15px; }
.pd-buy .price .now { color: var(--d-fg); font-size: 24px; font-weight: 800; }
.pd-buy .price .list { text-decoration: line-through; margin-left: 8px; }
.pd-buy .btn-terra { box-shadow: none; }

/* ════════ About ════════ */
.about { max-width: 660px; margin: 0 auto; padding: clamp(58px, 11vw, 132px) 30px clamp(70px, 10vw, 120px); word-break: keep-all; overflow-wrap: break-word; }
.about .eyebrow { display: block; margin-bottom: clamp(22px, 4vw, 30px); color: var(--gray-2); }
.about .lead { margin: 0; font-size: clamp(19px, 2.9vw, 26px); line-height: 1.55; color: var(--ink); letter-spacing: -.02em; text-wrap: balance; }
.about .lead b { color: var(--ink); font-weight: 700; }
.about .body { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.about .body p { margin: 0; color: #464B54; font-size: clamp(16px, 2.1vw, 17.5px); line-height: 1.9; letter-spacing: -.01em; text-wrap: pretty; }
.about .body b { color: var(--ink); font-weight: 700; }
.about .body .u { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(91,98,54,.6); }
.about .em-o { color: var(--olive); font-weight: 700; }
.about .em-t { color: var(--terra); font-weight: 700; }
.about .signoff .em-o { color: var(--olive); font-weight: 700; }
.about .signoff { margin: clamp(34px, 5vw, 46px) 0 0; padding-top: clamp(28px, 4vw, 36px); border-top: 1px solid var(--line);
  font-size: clamp(17px, 2.3vw, 20px); font-weight: 500; line-height: 1.6; color: var(--ink); letter-spacing: -.015em; }
.about .back { margin-top: clamp(40px, 6vw, 56px); display: flex; gap: 12px; flex-wrap: wrap; }

/* ════════ 법적 문서 (이용약관 · 환불정책) ════════ */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(52px, 9vw, 100px) 30px clamp(70px, 10vw, 120px); word-break: keep-all; overflow-wrap: break-word; }
.legal .eyebrow { display: block; margin-bottom: 18px; }
.legal h1 { font-size: clamp(26px, 4.6vw, 38px); font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--ink); }
.legal .updated { margin-top: 10px; font-size: 13px; color: var(--gray-2); }
.legal .lead { margin-top: 24px; font-size: 15.5px; color: var(--gray); line-height: 1.8; }
.legal section { margin-top: clamp(36px, 5vw, 48px); }
.legal h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.legal p { margin: 10px 0; font-size: 15px; line-height: 1.85; color: #464B54; }
.legal ol.num, .legal ul.plain { margin: 10px 0; padding-left: 20px; }
.legal ol.num li, .legal ul.plain li { font-size: 15px; line-height: 1.85; color: #464B54; margin-bottom: 6px; }
.legal .callout { margin: 16px 0; padding: 16px 18px; background: var(--terra-soft); border: 1px solid #E8C9B8; border-radius: var(--r-sm); font-size: 14.5px; line-height: 1.75; color: #8A3213; }
.legal .callout b { font-weight: 700; }
.legal .bizbox { margin-top: clamp(40px, 6vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--gray-2); line-height: 2; }
.legal .bizbox b { color: var(--gray); font-weight: 600; }
.legal .back { margin-top: clamp(36px, 5vw, 48px); }

/* About 하단 — 우리가 만드는 것 (카탈로그형, 내러티브와 구분) */
.offer { margin-top: clamp(58px, 9vw, 92px); padding-top: clamp(40px, 6vw, 58px); border-top: 1px solid var(--line); }
.offer .eyebrow { display: block; margin-bottom: clamp(30px, 5vw, 44px); }
.offer-item { display: flex; flex-direction: column; gap: 16px; }
.offer .oi-head { display: flex; align-items: baseline; gap: 12px; }
.offer .oi-no { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1; letter-spacing: -.02em; color: var(--gray-2); }
.offer .oi-name { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: clamp(28px, 4.6vw, 38px); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.offer .oi-name.bespoke { font-family: "Prata", serif; font-style: normal; font-weight: 400; font-size: clamp(24px, 4vw, 32px); letter-spacing: .01em; }
.offer .oi-sub { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--olive); letter-spacing: -.01em; }
.offer .oi-desc { margin: 0; color: #464B54; font-size: clamp(15.5px, 2vw, 16.5px); line-height: 1.85; letter-spacing: -.01em; text-wrap: pretty; }
.offer .oi-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.offer .oi-link:hover { color: var(--olive); }
.offer .oi-rule { margin: clamp(34px, 5vw, 46px) 0; border: none; border-top: 1px solid var(--line-soft); }

/* ════════ 푸터 ════════ */
.foot { border-top: 1px solid var(--line); }
.foot-in { max-width: 1080px; margin: 0 auto; padding: 26px 30px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--gray-2); }
.foot-in a:hover { color: var(--ink); }
/* 전자상거래법 필수 표시사항 */
.foot-biz { max-width: 1080px; margin: 0 auto; padding: 14px 30px 26px; font-size: 11.5px; color: var(--gray-2); line-height: 1.9; word-break: keep-all; }
.foot-biz a { color: var(--gray-2); text-decoration: underline; }
.foot-biz a:hover { color: var(--gray); }

/* 폼 필드 (체크아웃 공용) */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--gray); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; outline: none;
  transition: border-color .15s, box-shadow .15s; width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(11,11,12,.06); }
.field .hint2 { font-size: 12px; color: var(--gray-2); }

/* ════════ 계정 카드 (로그인·가입·비번찾기·마이페이지 공용) ════════ */
.acc-wrap { max-width: 460px; margin: 0 auto; padding: clamp(56px, 10vw, 100px) 24px clamp(60px, 9vw, 100px); }
.acc-wrap.wide { max-width: 720px; }
.acc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 40px); }
.acc-card h1 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.acc-card .sub { color: var(--gray); font-size: 14px; margin: 0 0 26px; line-height: 1.6; }
.acc-card form { display: flex; flex-direction: column; gap: 16px; }
.acc-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--gray); line-height: 1.6; cursor: pointer; }
.acc-consent input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--ink); flex: none; }
.acc-consent a { color: var(--ink); text-decoration: underline; }
.acc-msg { font-size: 13.5px; font-weight: 500; min-height: 18px; }
.acc-msg.ok { color: var(--olive); }
.acc-msg.err { color: var(--terra); }
.acc-links { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gray); flex-wrap: wrap; }
.acc-links a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.acc-divider { margin: 24px 0; border: none; border-top: 1px solid var(--line); }

/* 마이페이지 주문 목록 */
.acc-order { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.acc-order:last-child { border-bottom: none; }
.acc-order .info .name { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-size: 19px; }
.acc-order .info .meta { margin-top: 4px; font-size: 12.5px; color: var(--gray-2); }
.acc-order .sp { flex: 1; }

/* 부드러운 등장 */
.rise { opacity: 0; transform: translateY(16px); animation: rise .7s var(--ease) forwards; }
.rise.d1 { animation-delay: .08s; }
.rise.d2 { animation-delay: .16s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }

@media (max-width: 720px) { .pipe { grid-template-columns: repeat(2, 1fr); } .spec { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .about .fact { grid-template-columns: 1fr; gap: 4px; } .pv-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Seeder 워드마크 인라인 (버튼 등) */
.fr-word { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; }