/* 찍어 낸 파일 — 고치려면 기반/템플릿/책.js 를 고친다 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
:root{--desk:#231B16;--desk-ink:#F1E8DA;--paper:#F7F1E7;--paper-2:#EEE5D6;--ink:#2A211B;--ink-soft:#6B5D50;--accent:#A84129;--line:rgba(42,33,27,.16);
--cover:#6E2A1C;--cover-ink:#F4E8D4;--thread:#E8D6B3;--stamp:#B2452B;
--font-display:'Nanum Myeongjo', serif;--font-body:'Noto Serif KR', serif;--font-ui:'Noto Serif KR', serif;--font-num:'Cormorant Garamond', 'Noto Serif KR', serif;
--ease:cubic-bezier(.22,1,.36,1);--bar-h:60px;--ui-h:72px}
body{margin:0;min-height:100%;background:var(--desk);color:var(--desk-ink);font-family:var(--font-body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow:hidden;
  background-image:radial-gradient(90% 80% at 28% 18%,rgb(255 255 255 / .09) 0%,rgb(255 255 255 / 0) 62%),radial-gradient(130% 100% at 50% 50%,rgb(0 0 0 / 0) 55%,rgb(0 0 0 / .32) 100%)}
/* 책상 결(빛은 왼쪽 위에서) — 글자 바탕 검수에 안 걸리게 고정 덧칠로 */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>")}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ol,dl,dd{margin:0;padding:0;list-style:none}
figure{margin:0}
[hidden]{display:none!important}
.num{font-family:var(--font-num);font-variant-numeric:lining-nums tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.bar :focus-visible,.turn:focus-visible{outline-color:var(--desk-ink)}

/* 책상 위 띠(머리) */
.bar{position:fixed;inset:0 0 auto;z-index:20;height:var(--bar-h);display:flex;align-items:center;gap:8px;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left));font-family:var(--font-ui)}
.bar-brand{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 6px 0 0;margin-right:auto;text-decoration:none;font-family:var(--font-display);font-size:1.25rem;font-weight:800}
.bar-brand span{font-family:var(--font-num);font-size:.75rem;letter-spacing:.24em;font-weight:400;opacity:.7}
.bar-btn,.bar-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:.875rem;text-decoration:none}
.bar-btn{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--desk-ink) 30%,transparent)}
.bar-cta{background:var(--desk-ink);color:var(--desk);font-weight:600}
.bar-page{min-width:4.5em;text-align:center;font-size:.9375rem;opacity:.85}
/* 표지일 땐 머리 로고를 숨긴다(표지에 이름이 이미 있다) */
.bar-brand{transition:opacity .5s var(--ease)}
.at-cover .bar-brand{opacity:0;pointer-events:none}

/* 책 */
body{--pw:min(calc((100vw - 200px) / 2),calc((100svh - var(--bar-h) - var(--ui-h) - 24px) * .75));--ph:calc(var(--pw) * 4 / 3)}
.desk{position:fixed;inset:var(--bar-h) 0 0;display:grid;place-items:center;perspective:3600px}
.book{touch-action:pan-y;position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;transition:transform .9s var(--ease)}
.book.closed-front{transform:translateX(calc(var(--pw) * -.5))}
.book.closed-back{transform:translateX(calc(var(--pw) * .5))}
.page{container:page / size;position:absolute;top:0;width:var(--pw);height:var(--ph);background:var(--paper);color:var(--ink);overflow:hidden;visibility:hidden;
  box-shadow:18px 34px 60px -26px rgb(0 0 0 / .75),0 2px 0 rgb(0 0 0 / .04);backface-visibility:hidden}
/* 남은 장의 두께 = 바깥 가장자리 층(넘긴 만큼 왼쪽, 남은 만큼 오른쪽 · main.js 가 --edge-l/--edge-r 을 씀) */
.page.at-left{box-shadow:var(--edge-l,0 0 transparent),18px 34px 60px -26px rgb(0 0 0 / .75)}
.page.at-right{box-shadow:var(--edge-r,0 0 transparent),18px 34px 60px -26px rgb(0 0 0 / .75)}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.page.at-left{left:0;visibility:visible;border-radius:6px 2px 2px 6px}
.page.at-right{left:var(--pw);visibility:visible;border-radius:2px 6px 6px 2px}
/* 등 쪽 그늘(두 쪽이 만나는 곳) */
.page.at-left::before,.page.at-right::before{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}
.page.at-left::before{right:0;background:linear-gradient(270deg,rgb(0 0 0 / .14),transparent)}
.page.at-right::before{left:0;background:linear-gradient(90deg,rgb(0 0 0 / .16),transparent)}
.book.dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
/* 가운데 골 = 리넨 실 땀(묶음 열 개 → 땀 열 개) */
.spine{position:absolute;left:var(--pw);top:calc(var(--ph) * .05);bottom:calc(var(--ph) * .05);width:3px;transform:translateX(-1.5px);z-index:3;pointer-events:none;border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--thread) 0 calc(var(--ph) * .045),transparent calc(var(--ph) * .045) calc(var(--ph) * .09));
  filter:drop-shadow(0 1px 0 rgb(0 0 0 / .25))}
.book.closed-front .spine,.book.closed-back .spine{opacity:0}
/* 접힌 귀 = «끌어서 넘긴다»는 단서 · 처음엔 한 번 저절로 들렸다 내려옴(main.js) */
.ear{position:absolute;right:0;bottom:0;z-index:4;width:44px;height:44px;pointer-events:none;
  background:linear-gradient(315deg,var(--desk) 0 50%,color-mix(in srgb,var(--paper-2) 78%,#000) 50%,var(--paper-2) 78%);
  border-top-left-radius:3px;filter:drop-shadow(-2px -2px 3px rgb(0 0 0 / .22));transform-origin:100% 100%;transition:transform .45s var(--ease),opacity .3s}
.book:hover .ear{transform:scale(1.35)}
.book.closed-back .ear,.book.dragging .ear,.book.turning .ear{opacity:0}
/* 넘어가는 장 */
.leaf{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:5;pointer-events:none}
.leaf>.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:var(--paper);color:var(--ink)}
.leaf>.face.back{transform:rotateY(180deg)}
.leaf>.face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(0 0 0 / var(--sh,0)),rgb(0 0 0 / calc(var(--sh,0) * .35)) 70%,rgb(255 255 255 / calc(var(--sh,0) * .5)))}
.leaf>.face.back::after{background:linear-gradient(270deg,rgb(0 0 0 / var(--sh,0)),rgb(0 0 0 / calc(var(--sh,0) * .35)) 70%,rgb(255 255 255 / calc(var(--sh,0) * .5)))}
/* 넘어가는 장이 아래 쪽에 떨어뜨리는 그림자 */
.cast{position:absolute;top:0;width:var(--pw);height:var(--ph);z-index:4;pointer-events:none}
.leaf>.face .page{position:static;visibility:visible;width:100%;height:100%;box-shadow:none;border-radius:0}

/* 넘기는 단추 · 모서리 */
.turn{position:fixed;top:50%;z-index:10;width:56px;height:56px;margin-top:-28px;border-radius:50%;color:var(--desk-ink);font-size:1.25rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--desk-ink) 28%,transparent);transition:background-color .3s,color .3s,opacity .3s,transform .3s var(--ease)}
.turn:hover:not([disabled]){background:var(--desk-ink);color:var(--desk)}
.turn:active:not([disabled]){transform:scale(.96)}
.turn[disabled]{opacity:.25;cursor:default}
.turn-prev{left:max(24px,calc(50% - var(--pw) - 88px))}
.turn-next{right:max(24px,calc(50% - var(--pw) - 88px))}
/* 아래 리본 = 지금 몇 번째 장인지 */
.ribbon{position:fixed;left:50%;bottom:18px;width:min(420px,60vw);height:2px;transform:translateX(-50%);background:color-mix(in srgb,var(--desk-ink) 18%,transparent);border-radius:2px;overflow:hidden}
.ribbon span{position:absolute;inset:0;background:var(--desk-ink);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}

/* 쪽 안쪽 */
.folio{position:absolute;bottom:4.5%;font-size:.9375rem;color:var(--ink-soft)}
.at-left .folio{left:9%}
.at-right .folio{left:auto;right:calc(9% + 36px)}
.pg-text{position:relative;height:100%;padding:calc(var(--ph) * .08) 9% calc(var(--ph) * .09);display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin}
.kicker{font-family:var(--font-ui);font-size:.75rem;letter-spacing:.2em;color:var(--accent);font-weight:600}
.pg-title{margin-top:14px;font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,calc(var(--pw) * .068),2.75rem);line-height:1.3;letter-spacing:-.01em}
.pg-body{margin-top:clamp(16px,calc(var(--pw) * .05),32px);font-size:clamp(.9375rem,calc(var(--pw) * .028),1.0625rem);color:var(--ink);display:grid;gap:.9em}
.pg-body.small{font-size:.9375rem;color:var(--ink-soft)}
.pg-body p:first-child::first-letter{font-family:var(--font-display);font-weight:800;font-size:2.6em;float:left;line-height:1;margin:.04em .1em 0 0;color:var(--accent)}
.pg-body.small p:first-child::first-letter{all:unset}
.pg-inset{flex:1 1 0;min-height:72px;margin-top:18px;display:flex;flex-direction:column}
.pg-inset img{width:100%;flex:1 1 0;min-height:0;object-fit:cover;border-radius:3px}
.pg-inset figcaption,.pg-image figcaption{margin-top:8px;font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.pg-quote{margin:auto 0 0;padding:18px 0 0;font-size:clamp(1.125rem,calc(var(--pw) * .05),1.375rem);border-top:1px solid var(--line);font-family:var(--font-display);line-height:1.6;color:var(--accent)}
.pg-image{position:relative;height:100%}
.pg-image img{width:100%;height:100%;object-fit:cover}
.pg-image figcaption{position:absolute;left:9%;right:9%;bottom:4.5%;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--ink);width:max-content;max-width:82%}
.pg-image .folio{display:none}
.pg-note{margin-top:auto;padding-top:14px;font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.pg-order .pg-note{margin-top:6px;padding-top:0}
.pg-order .pg-title{margin-top:6px;font-size:clamp(1.375rem,calc(var(--pw) * .06),2.25rem)}
.specs{margin-top:clamp(12px,calc(var(--ph) * .03),24px);display:grid;gap:0}
.specs div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:clamp(6px,calc(var(--ph) * .016),12px) 0;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft);padding-top:2px}
.specs dd{font-size:.9375rem}
/* 차례 */
.toc{margin-top:clamp(10px,calc(var(--ph) * .03),22px);display:grid}
.pg-toc .toc a{min-height:44px;padding:clamp(4px,calc(var(--ph) * .012),10px) 0}
.toc a{display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 0;text-decoration:none;border-bottom:1px solid var(--line);transition:padding .4s var(--ease),color .3s}
.toc a:hover{color:var(--accent)}
.toc-dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
/* 표지 = 천 표지(천 결 · 왼쪽 실 땀 · 눌러 찍은 제목) */
.page-cover{background:var(--cover)}
.pg-cover{position:relative;height:100%;color:var(--cover-ink);background-color:var(--cover);
  background-image:repeating-linear-gradient(0deg,rgb(255 255 255 / .022) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgb(0 0 0 / .03) 0 1px,transparent 1px 2px),
  radial-gradient(120% 90% at 20% 10%,rgb(255 255 255 / .1),rgb(255 255 255 / 0) 60%),linear-gradient(90deg,rgb(0 0 0 / .22),rgb(0 0 0 / 0) 9%)}
.cover-stitch{position:absolute;left:5.5%;top:6%;bottom:6%;width:3px;border-radius:2px;filter:drop-shadow(0 1px 0 rgb(0 0 0 / .35));
  background:repeating-linear-gradient(180deg,var(--thread) 0 calc(var(--ph) * .022),transparent calc(var(--ph) * .022) calc(var(--ph) * .09))}
.cover-text{position:absolute;inset:11% 9% 8% 15%;display:flex;flex-direction:column}
/* 표지에 붙인 사진 한 장(메뉴판 표지에 꽂아 둔 사진처럼) */
.cover-plate{position:relative;flex:1 1 0;min-height:0;max-height:52%;margin:clamp(14px,calc(var(--ph) * .04),32px) 0 0;align-self:flex-start;aspect-ratio:4/5;max-width:100%;padding:6px;background:var(--paper);box-shadow:0 14px 30px -14px rgb(0 0 0 / .7);transform:rotate(-2.5deg)}
.cover-plate img{width:100%;height:100%;object-fit:cover}
.cover-plate+.cover-title{margin-top:auto;padding-top:16px}
.cover-brand{font-family:var(--font-display);font-weight:800;font-size:1rem;display:flex;align-items:baseline;gap:10px;text-shadow:0 -1px 0 rgb(0 0 0 / .35),0 1px 0 rgb(255 255 255 / .12)}
.cover-brand span{font-family:var(--font-num);font-size:.75rem;letter-spacing:.3em;font-weight:500}
.cover-title{margin-top:auto;font-family:var(--font-display);font-weight:800;font-size:calc(var(--pw) * .1);line-height:1.22;letter-spacing:-.02em;
  text-shadow:0 -1px 0 rgb(0 0 0 / .4),0 1px 0 rgb(255 255 255 / .14)}
.cover-sub{margin-top:clamp(14px,calc(var(--ph) * .03),24px);max-width:17em;font-size:clamp(.875rem,calc(var(--pw) * .032),1rem);line-height:1.7;opacity:.92}
.cover-hint{position:absolute;right:calc(44px + 6%);bottom:calc(var(--ph) * .035);font-family:var(--font-ui);font-size:.8125rem;font-weight:600;color:var(--cover-ink)}
/* 표지 색 */
.color-photo{position:relative;flex:1 1 0;min-height:80px;margin-top:14px;border-radius:3px;overflow:hidden}
.color-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.swatches{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.sw{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 6px;border-radius:999px;font-family:var(--font-ui);font-size:.8125rem;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.sw-dot{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .15)}
.sw[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.pg-colors .pg-body{margin-top:10px;margin-bottom:22px}
/* 주문 */
.opt{margin-top:clamp(6px,calc(var(--ph) * .018),14px)}
.opt-label{font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.opt-row{margin-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.opt-row.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.opt-line .opt-row{margin-top:0}
.opt-b{display:grid;justify-items:start;align-content:center;min-height:44px;padding:6px 12px;line-height:1.35;border-radius:10px;text-align:left;font-family:var(--font-ui);font-size:.9375rem;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background-color .3s}
.opt-b small{font-size:.6875rem;color:var(--ink-soft);white-space:nowrap}
.opt-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;width:100%}
.opt-top small{color:var(--ink)}
.opt-b[aria-checked="true"]{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.opt-b[aria-checked="true"] small{color:color-mix(in srgb,var(--paper) 80%,var(--ink))}
.opt-b[aria-checked="true"] .opt-top small{color:var(--paper)}
.color-photo img{transition:object-position .8s var(--ease)}
.opt-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.order-color{font-family:var(--font-ui);font-size:.9375rem;color:var(--ink);display:flex;align-items:center;gap:6px}
.order-color strong{font-weight:600}
.change{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--accent);font-size:.8125rem}
.qty{display:flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.qty button{width:44px;height:44px;font-size:1.125rem;border-radius:50%}
.qty output{min-width:2ch;text-align:center;font-size:1.0625rem}
/* 공방 주문서 = 점선 영수증 + 도장 자리 */
.receipt{position:relative;margin-top:auto;padding:8px 0 2px;border-top:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.sum{display:grid;gap:2px;font-family:var(--font-ui);font-size:.875rem}
.sum div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum dt{color:var(--ink-soft)}
.order-foot{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.total{display:grid;font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft);line-height:1.3}
.price{font-size:clamp(1.375rem,calc(var(--pw) * .058),2rem);color:var(--ink);font-weight:500}
.stamp{position:absolute;right:44%;top:62%;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--stamp),inset 0 0 0 5px transparent,inset 0 0 0 6px var(--stamp);color:var(--stamp);font-family:var(--font-display);font-weight:800;font-size:.875rem;
  transform:translateY(-50%) rotate(-12deg) scale(1.6);opacity:0;transition:transform .35s cubic-bezier(.5,1.8,.6,1),opacity .2s;pointer-events:none;mix-blend-mode:multiply}
.stamp.on{transform:translateY(-50%) rotate(-12deg) scale(1);opacity:.85}
.buy{min-height:52px;padding:0 24px;flex:0 0 auto;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-weight:600;transition:transform .3s var(--ease)}
.buy:active{transform:scale(.98)}
.toast{position:absolute;left:9%;right:9%;bottom:calc(var(--ph) * .035);font-family:var(--font-ui);font-size:.8125rem;font-weight:600;color:var(--accent);background:var(--paper)}
.toast:empty{display:none}
/* 뒤표지 */
.pg-back{position:relative;height:100%;padding:12% 10%;display:flex;flex-direction:column;background:var(--paper-2);color:var(--ink)}
.back-brand{font-family:var(--font-display);font-weight:800;font-size:1.75rem;display:flex;align-items:baseline;gap:10px}
.back-brand span{font-family:var(--font-num);font-size:.8125rem;letter-spacing:.3em;font-weight:400;color:var(--ink-soft)}
.pg-back .pg-body{margin-top:18px}
.back-photo{position:relative;flex:1 1 0;min-height:0;margin-top:18px;border-radius:3px;overflow:hidden}
.back-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.back-co{padding-top:16px}
.back-co{margin-top:auto;display:grid;gap:4px;font-family:var(--font-ui);font-size:.75rem;line-height:1.6;color:var(--ink-soft)}
.back-co a,.legal-b{display:inline-block;padding:13px 2px;margin:-13px 0;text-decoration:underline;text-underline-offset:3px}

/* 창(차례·자세히·로그인) */
.sheet{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
.sheet[hidden]{display:none}
.sheet-back{position:absolute;inset:0;background:rgb(10 8 6 / .62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-in{position:relative;width:min(460px,100%);max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain;padding:36px 32px 28px;border-radius:10px;background:var(--paper);color:var(--ink);font-family:var(--font-body);box-shadow:0 30px 80px -30px rgb(0 0 0 / .8)}
.sheet-in .toc{margin-top:14px}
.sheet-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;z-index:2}
.sheet-x span,.sheet-x span::after{position:absolute;left:13px;right:13px;top:21px;height:1.5px;background:var(--ink);transform:rotate(45deg)}
.sheet-x span::after{content:"";left:0;right:0;top:0;transform:rotate(90deg)}
.sheet-login{margin-top:20px}
.doc{width:min(560px,100%)}
.doc-photo{margin:-36px -32px 18px;aspect-ratio:4/3;overflow:hidden;border-radius:10px 10px 0 0}
.doc-photo img{width:100%;height:100%;object-fit:cover}
.doc-photo+.kicker{margin-top:0}
.doc .sheet-x{background:var(--paper)}
.doc-h{margin-top:8px;font-family:var(--font-display);font-weight:800;font-size:1.625rem;line-height:1.3}
.doc-h3{margin:22px 0 0;font-family:var(--font-ui);font-size:1rem;font-weight:600}
.doc-p{margin-top:10px;font-size:.9688rem;color:var(--ink)}
.doc-note{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--paper-2);font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.doc .specs{margin-top:16px}
/* 아래 알림 한 줄 */
.flash{position:fixed;left:50%;bottom:calc(var(--ui-h) + 14px);z-index:60;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border-radius:999px;background:var(--desk-ink);color:var(--desk);font-family:var(--font-ui);font-size:.875rem;font-weight:600;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.flash.on{opacity:1;transform:translate(-50%,0)}
/* 머리 길잡이(넓은 화면) */
.bar-nav{display:flex;gap:2px;margin:0 auto;font-family:var(--font-ui);font-size:.875rem}
.bar-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;opacity:.82;transition:opacity .3s,background-color .3s}
.bar-nav a:hover,.bar-nav a[aria-current="true"]{opacity:1;background:color-mix(in srgb,var(--desk-ink) 12%,transparent)}
.bar-nav~#toc-open{display:none}
@media (min-width:900px) and (max-width:1180px){.bar-nav~.bar-page{display:none}.bar-nav a{padding:0 9px}}
.bar-login{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 메뉴판 */
.menu-note{margin-top:6px;font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.menu{margin:clamp(10px,calc(var(--ph) * .025),20px) 0 0;padding:0;list-style:none;display:grid}
.dish{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:44px;padding:clamp(6px,calc(var(--ph) * .022),18px) 0;text-align:left;border-bottom:1px solid var(--line);transition:background-color .3s}
.dish:hover{background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
.dish-img{width:clamp(56px,calc(var(--ph) * .15),112px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px}
.dish-txt{display:grid;gap:1px;min-width:0}
.dish-name{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;line-height:1.35}
.dish-tag{font-style:normal;font-family:var(--font-ui);font-size:.6875rem;font-weight:600;color:var(--accent);vertical-align:2px}
.dish-it{font-family:var(--font-num);font-style:italic;font-size:.875rem;color:var(--ink-soft);line-height:1.3}
.dish-desc{font-size:.8125rem;line-height:1.5;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish-price{align-self:center;font-size:1rem;color:var(--ink)}
/* 코스 */
.courses{margin-top:clamp(12px,calc(var(--ph) * .03),24px);display:grid;gap:clamp(10px,calc(var(--ph) * .03),22px)}
.crs-head{display:flex;align-items:baseline;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.125rem}
.crs-head .num{font-family:var(--font-num);font-weight:600;font-size:1.0625rem}
.crs-when{margin-top:2px;font-family:var(--font-ui);font-size:.75rem;color:var(--accent);font-weight:600}
.crs-lines{margin-top:4px;font-size:.875rem;color:var(--ink-soft);line-height:1.6}
/* 소식 */
.notices{margin:clamp(10px,calc(var(--ph) * .025),20px) 0 0;padding:0;list-style:none}
.ntc{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;min-height:44px;padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}
.ntc-date{font-size:.875rem;color:var(--ink-soft)}
.ntc-title{font-size:.9375rem;line-height:1.5}
.ntc-title em{font-style:normal;font-family:var(--font-ui);font-size:.6875rem;font-weight:600;color:var(--accent)}
.ntc-go{color:var(--ink-soft);transition:transform .3s var(--ease)}
.ntc:hover .ntc-go{transform:translateX(4px)}
.map-b{margin-top:6px;align-self:flex-start}
.pg-visit .specs{margin-top:12px}
.pg-visit .specs div{padding:6px 0}
/* 입력 칸(16px = iOS 확대 방지) */
.fld{display:grid;gap:4px;margin-top:clamp(8px,calc(var(--ph) * .02),14px);min-width:0;align-content:start}
.fld label,.lbl{font-family:var(--font-ui);font-size:.8125rem;color:var(--ink-soft)}
.fld label small{font-size:.75rem}
.fld input{width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 16px/1.4 var(--font-ui)}
.fld input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.fld input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--stamp)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2 .qty{justify-self:start}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-width:58px;min-height:44px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;transition:background-color .3s,color .3s}
.chip[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.chips.bad{border-radius:10px;box-shadow:0 0 0 2px var(--stamp)}
.form-err{min-height:1.4em;margin-top:6px;font-family:var(--font-ui);font-size:.8125rem;font-weight:600;color:var(--stamp)}
.buy.wide{width:100%}
.hint{margin-top:4px;font-family:var(--font-ui);font-size:.75rem;color:var(--ink-soft)}
.pg-reserve .stamp{right:12%;top:auto;bottom:22%}
/* 로그인·회원가입 */
.auth{width:min(440px,100%)}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin:-6px 40px 6px 0;border-bottom:1px solid var(--line)}
.tabs button{min-height:48px;font-family:var(--font-display);font-weight:800;font-size:1.0625rem;color:var(--ink-soft);box-shadow:inset 0 -2px 0 transparent;transition:color .3s,box-shadow .3s}
.tabs button[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.pane .buy{margin-top:8px}
.aux{margin-top:4px;text-align:center}
.or{display:flex;align-items:center;gap:10px;margin:10px 0;font-family:var(--font-ui);font-size:.75rem;color:var(--ink-soft)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.snss{display:grid;gap:8px}
.sns{min-height:48px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-family:var(--font-ui);font-size:.9375rem;transition:background-color .3s}
.sns:hover{background:var(--paper-2)}
.agrees{margin-top:14px;padding:4px 12px;border-radius:8px;background:var(--paper-2);display:grid;grid-template-columns:1fr auto;align-items:center}
.chk{grid-column:1;display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-ui);font-size:.875rem;cursor:pointer}
.chk.all{grid-column:1 / -1;border-bottom:1px solid var(--line);font-weight:600}
.chk input{width:20px;height:20px;accent-color:var(--ink)}
.see{grid-column:2;justify-self:end}
.done{position:relative;text-align:center;padding-top:24px}
.done .stamp{position:relative;inset:auto;margin:0 auto 10px;transform:rotate(-12deg);opacity:.9}
.done .doc-p{color:var(--ink-soft)}

.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* 폰·좁은 화면: 한 쪽씩 · 옆으로 밀어 넘김 · 아래에 넘기기 단추 */
@media (max-width:899px){
  :root{--bar-h:56px;--ui-h:76px}
  .bar-brand span{display:none}
  .bar-nav,.bar-login{display:none}
  .bar-nav~#toc-open{display:inline-flex}
  .bar-page{min-width:3.5em;font-size:.875rem}
  .desk{inset:var(--bar-h) 0 var(--ui-h);perspective:1800px}
  body{--pw:min(calc(100vw - 24px),560px);--ph:min(calc(var(--pw) * 1.75),calc(100svh - var(--bar-h) - var(--ui-h) - 12px))}
  .book{width:var(--pw)}
  .book.closed-front,.book.closed-back{transform:none}
  .page.at-left,.page.at-right{left:0;border-radius:2px 6px 6px 2px}
  .spine{display:none}
  /* 폰도 «책»: 왼쪽 가장자리가 실 땀 있는 등 · 장은 이 축으로 넘어간다 */
  .page.at-right::before{left:7px;top:5%;bottom:5%;width:3px;border-radius:2px;filter:drop-shadow(0 1px 0 rgb(0 0 0 / .25));
    background:repeating-linear-gradient(180deg,var(--thread) 0 calc(var(--ph) * .035),transparent calc(var(--ph) * .035) calc(var(--ph) * .07))}
  .page-cover.at-right::before{display:none}
  .page.at-right .pg-text,.page.at-right .pg-back{padding-left:calc(8% + 10px)}
  .turn{top:auto;bottom:calc((var(--ui-h) - 52px) / 2);margin:0;width:52px;height:52px}
  .turn-prev{left:16px}
  .turn-next{right:16px}
  .ribbon{bottom:calc(var(--ui-h) / 2 - 1px);width:calc(100vw - 172px)}
  .pg-text{padding:8% 8% 13%}
  .dish{grid-template-columns:auto 1fr;gap:12px}
  .dish-price{grid-column:2;justify-self:start;margin-top:-4px;font-size:.9375rem}
  .dish-img{grid-row:span 2}
  .folio{bottom:3.5%}
  .page .folio{left:auto;right:calc(8% + 36px)}
}

/* 낮은 쪽(쪽 높이 600 미만 = 키 작은 폰 · 낮은 노트북): 제목·사진·설명을 줄여 한 쪽에 담는다 · 그래도 넘치면 쪽 안만 위아래로 */
@container page (max-height:600px){
  .pg-text{padding-top:6%;padding-bottom:12%}
  .pg-title{font-size:1.375rem;margin-top:6px}
  .kicker{font-size:.6875rem}
  .menu-note{display:none}
  .dish{padding:6px 0;gap:10px}
  .dish-img{width:58px}
  .dish-name{font-size:1rem}
  .dish-desc{-webkit-line-clamp:1}
  .dish-it{font-size:.8125rem}
  .pg-body{font-size:.9063rem;gap:.6em}
  .pg-quote{font-size:1.0625rem;padding-top:10px}
  .crs-lines{font-size:.8125rem}
  .courses{gap:10px}
  .fld{margin-top:6px}
  .chip{min-width:52px}
  .pg-inset{max-height:28%}
  .pg-visit .specs div{padding:3px 0}
  .pg-toc .toc a{padding:0}
  .pg-toc .toc{margin-top:6px}
  .pg-note{font-size:.75rem;padding-top:6px}
  .pg-reserve .row2+.fld{margin-top:4px}
  .pg-reserve .pg-note{display:none}
  .pg-visit .pg-inset,.pg-notice .pg-inset{display:none}
  .pg-text,.pg-back{overflow-y:auto;overscroll-behavior:contain}
}

/* 가로로 눕힌 폰(높이 520 미만): 쪽이 낮아 다 못 담는다 → 넘기기 단추는 양옆, 쪽 안은 위아래로 읽는다 */
@media (max-width:899px) and (max-height:520px){
  :root{--bar-h:48px;--ui-h:0px}
  body{--pw:min(calc(100vw - 150px),600px);--ph:calc(100svh - var(--bar-h) - 12px)}
  .desk{inset:var(--bar-h) 0 0}
  .turn{top:50%;bottom:auto;margin-top:-26px}
  .ribbon{display:none}
  .pg-text,.pg-back{overflow-y:auto;overscroll-behavior:contain}
  .pg-inset,.color-photo,.back-photo{flex:0 0 auto;height:min(46vh,220px)}
  .receipt{margin-top:16px}
}