/* Studio Blurry — a workshop table seen from above, paper cards thrown onto it and flown across it.
   Layout: the table is one fixed canvas; cards sit on a stage above it, the top bar and the landing above the cards.
   Every motion is drawn on a 12fps clock (slow ambient life on 8fps), the way the films are. */
:root{
  /* palette: paper, ink, three muted inks; the table's own colours live in the canvas */
  --board:#D9BE96;
  --paper:#F4EEE4;
  --card:#EFE8DC;
  --ink:#2B2621;
  --ink-2:#3A332C;
  --soft:#6F6253;
  --hair:rgba(43,38,33,.2);
  --ochre:#C9963F;
  --terra:#B4603F;
  --slate:#5F7486;
  /* what sits directly on the table changes colour with the table */
  --land-ink:#2B2621;
  --land-soft:#5C4F40;
  --bar-ink:#2E2823;
  --chip:#4F4335;
  --btn-fill:rgba(244,238,228,.62);
  --hollow:#F4EEE4;
  /* type */
  --f-mark:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-kr:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  --f-logo:Georgia,"Gelasio","Times New Roman",serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* the common rules (shown on the 디자인 규칙 card) ------------------------------------------------
     text inks: ink for titles, ink-2 for reading, soft for notes; faint only for things that are switched off.
     the four accents are for small marks (dots, diamonds, underlines, stamps); words that carry a state use the
     darker -t version so they keep 4.5:1 on paper */
  --faint:#857868;
  --hair-2:rgba(43,38,33,.12);
  --sage:#7F9C77;
  --terra-t:#9C4F31;--slate-t:#4E6274;--sage-t:#4F6A49;
  /* what has to be filled in before selling (10-27 23:33 "꼭 채워야 하는 정보는 빨간색 채워서 표시해둬"): a warm red,
     paper-coloured words on it 5.2:1 */
  --req:#B23A2B;
  /* spacing: steps of 8 (4 and 12 for tight spots) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --sec:clamp(48px,8vh,84px);
  --gut:clamp(20px,2.6vw,40px);
  /* corners */
  --r-card:18px;--r-box:14px;--r-field:12px;--r-pill:999px;
  /* motion: one frame at 12fps; hover, press and open take three */
  --f3:.25s;
  /* geometry, rewritten by the script */
  --top:86px;
  --win-w:min(1200px,calc(100vw - 260px));
  --win-h:calc(100vh - 130px);
  color-scheme:light;
}
/* the surface under everything is drawn by boards.js; the script sets these to suit it (dark or light ink) */

html,body{height:100%}
html{overflow:hidden;-webkit-text-size-adjust:100%}
body{margin:0;overflow:hidden;background:var(--board);color:var(--ink);font-family:var(--f-kr);font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px dashed currentColor;outline-offset:4px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the table ---------- */
.board{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;display:block;pointer-events:none}
.board.fade{opacity:0}
/* the light in the room (sun through a window, a lamp) falls on the table and on everything lying on it */
.lightcv{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:7;pointer-events:none;display:none}
html:not(.sb) .lightcv{display:none!important}
/* a little grain over the whole scene, as on a print */
.grain{position:fixed;inset:0;z-index:9;pointer-events:none;background-repeat:repeat;background-size:192px 192px;mix-blend-mode:soft-light;opacity:.75}
html:not(.sb) .grain{display:none}

/* ---------- cards ---------- */
.stage{position:fixed;inset:0;z-index:1;pointer-events:none}
.card{position:absolute;left:0;top:0;width:var(--win-w);height:var(--win-h);will-change:transform}
.card .mbo,.card .mbi{position:absolute;inset:0;transform-origin:50% 50%}
html.sb .card .shd,html.sb .card .ppr{will-change:transform}
.card .shd{position:absolute;left:-28px;top:-28px;right:-28px;bottom:-28px;transform-origin:50% 50%;
  background:var(--shadow-img,none) no-repeat 0 0/100% 100%}
.card .ppr{position:absolute;inset:0;transform-origin:50% 50%;pointer-events:auto;outline:none}
.card .ppr::before{content:"";position:absolute;left:-28px;top:-28px;right:-28px;bottom:-28px;pointer-events:none;
  background:var(--paper-img,none) no-repeat 0 0/100% 100%}
.card.blank .ppr{pointer-events:none}
.card.c{z-index:3}.card.side{z-index:1}.card.fly{z-index:4}
/* moving to another page, the card coming to the middle passes over the one leaving it (sb.js fly; not .lead, the lead
   paragraph's class) */
.card.fly.cin{z-index:5}
/* what is written stays inside the drawn edge (its roughened line wanders about 2px): the scroll is clipped 4px in */
.card .scroll{position:absolute;inset:0;z-index:1;overflow:auto;overscroll-behavior:contain;border-radius:18px;
  clip-path:inset(4px round 15px);-webkit-overflow-scrolling:touch}
/* scrollbars take no room anywhere; a thin thumb (sb.js) shows only while something scrolls */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
.sbthumb{position:fixed;z-index:9;left:0;top:0;width:4px;border-radius:2px;background:rgba(43,38,33,.4);pointer-events:none;opacity:0;
  transition:opacity .25s steps(3,end)}
.sbthumb.on{opacity:1}
.sbthumb.cut{transition:none}
.card .ppr:focus-visible .scroll{outline:2px dashed var(--ink);outline-offset:-8px}
.card .ppr.wait .rv{opacity:0}
/* a page put on a card still in the air (sb.js fly): laid out and made ready, not seen until the card is down */
.card .ppr.flying .scroll{visibility:hidden}

/* no script: one card in the middle, no landing */
html:not(.sb) .landing,html:not(.sb) .looks{display:none}
html:not(.sb) .card{left:50%;top:var(--top);transform:translateX(-50%)}
html:not(.sb) .card .ppr{background:var(--paper);border-radius:18px;box-shadow:0 0 0 1.4px rgba(43,38,33,.8)}
@media (max-width:640px){html:not(.sb) .card{width:calc(100vw - 20px);height:calc(100vh - 80px);top:62px}}
/* the script is coming: keep the scene out of sight until it has laid everything out */
html.js:not(.sb) .stage,html.js:not(.sb) .landing,html.js:not(.sb) .bar,html.js:not(.sb) .fl,html.js:not(.sb) .looks,html.js:not(.sb) .speed,html.js:not(.sb) .ffoot{visibility:hidden}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:12px 28px;
  padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:10px;
  padding-left:max(24px,calc(env(safe-area-inset-left,0px) + 16px));padding-right:max(24px,calc(env(safe-area-inset-right,0px) + 16px));
  pointer-events:none;color:var(--bar-ink)}
.bar>*{pointer-events:auto}
.mark{font-family:var(--f-logo);font-weight:700;font-size:31px;line-height:1;letter-spacing:-.01em;color:var(--bar-ink);text-decoration:none;display:inline-block;padding:4px 2px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px 24px;position:relative}
.nav a{position:relative;display:inline-block;padding:8px 2px;font-size:15px;line-height:1.2;color:var(--bar-ink);text-decoration:none;white-space:nowrap;opacity:.82}
.nav a:hover,.nav a[aria-current]{opacity:1}
.uline{position:absolute;left:0;top:0;height:12px;width:100px;pointer-events:none;transform-origin:0 50%;color:var(--bar-ink)}
.uline svg{display:block;width:100%;height:100%;overflow:visible}
.snd{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--bar-ink)}
.snd:hover{background:rgba(43,38,33,.08)}
.snd svg{width:22px;height:22px;overflow:visible}
.snd[aria-pressed="false"] .w{display:none}
.snd[aria-pressed="true"] .x{display:none}
.bar .off{visibility:hidden}

/* ---------- things lying on the floor of the screen: the real address and the design picker (review only) ---------- */
.fl{position:fixed;z-index:8;left:max(10px,calc(env(safe-area-inset-left,0px) + 6px));bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
  display:flex;align-items:center;gap:10px;color:var(--chip)}
.addr{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12.5px;color:var(--chip);pointer-events:none;white-space:nowrap}
.addr span{opacity:.75}
.addr b{font-family:var(--f-mono);font-style:normal;font-weight:500;font-size:12.5px;letter-spacing:.01em}
.looks{position:fixed;z-index:8;right:max(12px,calc(env(safe-area-inset-right,0px) + 8px));bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
  display:flex;align-items:center;gap:2px;color:var(--chip)}
.looks>button{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 6px;font-size:13px;line-height:1.2;color:var(--chip);opacity:.82;border-radius:8px}
.looks>button:hover{opacity:1}
.looks .lk-prev,.looks .lk-next{width:28px;padding:0}
.looks svg{width:12px;height:12px}
.looks .lk-n{font-family:var(--f-mono);font-size:12px;opacity:.75;margin-right:6px}
.looks .lk-name[aria-expanded="true"]{opacity:1}
.speed{position:fixed;z-index:8;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
  display:flex;align-items:center;gap:2px;color:var(--chip)}
.speed .l{font-size:12.5px;opacity:.75;margin-right:6px}
.speed button{position:relative;min-height:30px;padding:4px 7px;border-radius:8px;font-family:var(--f-mono);font-size:12px;color:var(--chip);opacity:.7}
.speed button:hover{opacity:1}
.speed button[aria-pressed="true"]{opacity:1;font-weight:600}
.speed button[aria-pressed="true"]::after{content:"";position:absolute;left:7px;right:7px;bottom:3px;height:1.5px;border-radius:2px;background:currentColor;opacity:.7}
html:not(.sb) .speed{display:none}
.lk-list{position:absolute;right:0;bottom:calc(100% + 8px);width:min(560px,calc(100vw - 24px));padding:10px;border-radius:14px;
  background:rgba(250,246,239,.97);color:#2B2621;box-shadow:0 1px 2px rgba(30,20,10,.18),0 14px 40px -12px rgba(30,20,10,.42);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.lk-list[hidden]{display:none}
.lk-list button{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;line-height:1.25;text-align:left;color:#2B2621}
.lk-list button:hover,.lk-list button:focus-visible{background:rgba(43,38,33,.07)}
.lk-list button[aria-checked="true"]{background:rgba(43,38,33,.1);font-weight:600}
.lk-list .sw{flex:none;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(43,38,33,.25)}
.lk-list .n{font-family:var(--f-mono);font-size:11px;opacity:.6}
/* the example pages, a short list that opens upwards from the bottom left (review only) */
.exm{position:relative}
.ex-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 8px;border-radius:8px;font-size:13px;line-height:1.2;color:var(--chip);opacity:.82}
.ex-btn:hover,.ex-btn[aria-expanded="true"]{opacity:1}
.ex-btn svg{width:12px;height:12px;transition:transform var(--f3) steps(3,end)}
.ex-btn .ts{display:none}
.ex-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ex-list{position:absolute;left:0;bottom:calc(100% + 8px);width:232px;padding:8px;border-radius:14px;
  background:rgba(250,246,239,.97);color:#2B2621;box-shadow:0 1px 2px rgba(30,20,10,.18),0 14px 40px -12px rgba(30,20,10,.42);
  display:flex;flex-direction:column;gap:2px}
.ex-list[hidden]{display:none}
.ex-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;line-height:1.3;color:#2B2621;text-decoration:none}
.ex-list a:hover,.ex-list a:focus-visible{background:rgba(43,38,33,.07)}
.ex-list a[aria-current="page"]{background:rgba(43,38,33,.1);font-weight:600}
.ex-list .n{font-family:var(--f-mono);font-size:11px;opacity:.6;min-width:16px}
.ex-list .k{margin-left:auto;font-size:11.5px;opacity:.6}

/* ---------- landing ---------- */
.landing{position:fixed;inset:0;z-index:5;overflow:hidden;color:var(--land-ink)}
.landing .stage2{position:absolute;inset:0}
.wm{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);white-space:nowrap;margin:0;
  font-family:var(--f-mark);font-weight:600;font-size:clamp(58px,11.2vw,206px);line-height:1;letter-spacing:-.012em;color:var(--land-ink);
  user-select:none;-webkit-user-select:none;cursor:default}
.wm .ch,.motto .w,.motto .mc{display:inline-block;position:relative}
.wm .ci{display:inline-block;filter:url(#inkT);will-change:transform}
.landing.moving .ch,.landing.moving .w,.landing.moving .deco{will-change:transform,opacity}
.wm .sp{display:inline-block;width:.24em}
.motto{position:absolute;left:50%;top:calc(41% + clamp(48px,7.6vw,140px));transform:translateX(-50%);width:min(92vw,980px);margin:0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.motto .en{margin:0;font-family:var(--f-mark);font-style:italic;font-weight:500;font-size:clamp(19px,1.95vw,31px);line-height:1.25;color:var(--land-ink);letter-spacing:.005em}
/* REDESIGN leans with the rest of the line, heavier and spaced (10-28 02:10 "REDESIGN도 기울임 넣지 왜") */
.motto .en .caps{font-style:italic;font-weight:600;letter-spacing:.05em;font-size:.92em}
.motto .ko{display:block;margin:0;font-weight:500;font-size:clamp(15px,1.3vw,20px);line-height:1.6;color:var(--land-ink);opacity:.86;letter-spacing:.02em}
/* on the pegboard the small lines sit in a little clearing so the holes do not run through them */
.deco{position:absolute;pointer-events:none;color:var(--land-ink)}
.deco .dp,.deco .di{width:100%;height:100%}
.deco svg{display:block;width:100%;height:100%;overflow:visible}
.enter{position:absolute;left:50%;top:70%;width:188px;height:62px;margin:-31px 0 0 -94px;border-radius:40px;color:var(--land-ink)}
.enter .bi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-kr);font-weight:600;font-size:17px;letter-spacing:.02em;transition:transform .25s steps(3,end)}
.enter .bi svg.ring{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible}
.enter .bi>span,.enter .bi>.arw{position:relative}
.enter .arw{width:22px;height:12px;overflow:visible;transition:transform .25s steps(3,end)}
.enter:hover .bi{transform:translateY(-2px)}
.enter:hover .arw{transform:translateX(4px)}
.enter:active .bi{transform:scale(.97)}
.enter:focus-visible{outline-offset:8px;border-radius:40px}
.burst{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;pointer-events:none;overflow:visible;color:var(--land-ink)}

/* ================================================================== inside a card: the common rules
   1 one card, one job (one main button at most) · 2 space first · 3 the hand shows in the lines only ·
   4 every movement has a reason. The 디자인 규칙 card (rules.html) shows each rule with these very classes. */
.pg{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;
  padding-block:clamp(40px,6.2vh,76px) 40px;padding-inline:clamp(22px,5.4vw,88px)}
.pg>*{min-width:0}

/* ---------- type: two weights (500, 600); Korean never slants, only the English kicker and Instant do ---------- */
.kick{margin:0 0 14px;font-family:var(--f-mark);font-style:italic;font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.3;color:var(--soft)}
.kick .caps{font-style:normal;font-weight:600;letter-spacing:.05em;font-size:.9em}
.pn{margin:0;font-family:var(--f-mark);font-weight:600;font-size:clamp(46px,5.6vw,80px);line-height:1.02;letter-spacing:-.012em;color:var(--ink)}
.pn i,.nm i,.pnm i{font-style:italic}
/* a product name set large is a logo: its ™ shrinks to 40% and sits on the lowercase line (Instant 표기 규칙) */
.tm{font-size:.4em;vertical-align:.62em;margin-left:-.02em;font-style:normal;line-height:0}
.t1{margin:0;font-weight:600;font-size:clamp(30px,3.6vw,52px);line-height:1.3;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.t2{margin:0;font-weight:600;font-size:clamp(23px,2.2vw,31px);line-height:1.42;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.lead{margin:22px 0 0;max-width:34em;font-size:clamp(16px,1.25vw,18.5px);line-height:1.86;color:var(--ink-2);text-wrap:pretty}
.p{margin:0;font-size:16.5px;line-height:1.9;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.h3{margin:0;font-weight:600;font-size:18.5px;line-height:1.45;color:var(--ink)}
.small{margin:0;font-size:14.5px;line-height:1.75;color:var(--soft)}
.label{margin:0;font-weight:500;font-size:13.5px;line-height:1.45;letter-spacing:.04em;color:var(--soft)}
/* the heading over a title on a Korean page (10-27 23:48): the t9 label, 14 above the title like the English .kick */
.label.kick-ko{margin:0 0 14px;font-family:var(--f-kr)}
.num{font-family:var(--f-mark);font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.mono{font-family:var(--f-mono);font-size:14px;letter-spacing:.03em;color:var(--ink)}
/* a product name inside Korean text: Cormorant, a little larger so it sits level with the hangul */
.pnm{font-family:var(--f-mark);font-weight:600;font-size:1.2em;line-height:1;color:var(--ink);white-space:nowrap}
.pg :where(a:not([class])){color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(43,38,33,.45)}
.pg :where(a:not([class])):hover{text-decoration-color:var(--ink)}
.bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* list lines are t8 작은 글 (14.5 / 1.75), 8 apart */
.bul li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.bul li::before{content:"";position:absolute;left:4px;top:.66em;width:6px;height:6px;background:rgba(43,38,33,.55);transform:rotate(45deg);border-radius:1px}

/* ---------- sections: each opens with a small label and a hairline; a story section adds one big line ---------- */
.sec{margin-top:var(--sec)}
/* a section's label is t9 라벨 (13.5, 4%); 16 to its line, 32 below it */
.sec-h{display:flex;align-items:center;gap:16px;margin:0 0 32px;font-weight:500;font-size:13.5px;line-height:1.45;letter-spacing:.04em;color:var(--soft)}
.sec-h::after{content:"";flex:1;height:1px;background:var(--hair)}
.sec>.t2+.p,.sec>.t2+.lead{margin-top:12px}
.sec>.t2+.p+*,.sec>.t2+*:not(.p){margin-top:var(--s6)}
.sec>.p+*{margin-top:var(--s6)}

/* ---------- five page templates ----------
   소개형 .hero 7:5 · 목록형 .tiles · 작업형 .work 8:4 · 문서형 .doc 3:9 · 도움말형 .faq + .note */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:center}
.hero .art{justify-self:end;width:min(100%,400px)}
.hero-m{grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr)}
.hero-m .t1{font-size:clamp(27px,3vw,44px);line-height:1.36}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--gut)}
.work{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s7) var(--gut);align-items:start;margin-top:clamp(36px,6vh,56px)}
.work-main{display:flex;flex-direction:column;gap:var(--s7);min-width:0}
.work-main .sec-h{margin-bottom:20px}
.work-side{position:sticky;top:24px;min-width:0}
.doc{display:grid;grid-template-columns:minmax(170px,3fr) minmax(0,9fr);gap:var(--s7) var(--gut);align-items:start;margin-top:clamp(36px,6vh,56px)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--gut)}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols.c5{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px clamp(14px,1.8vw,26px)}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.col .ic{width:54px;height:40px}
.ic svg{display:block;width:100%;height:100%;overflow:visible}
.col .rn{margin:0 0 2px;font-size:24px;line-height:1;color:var(--soft)}

/* ---------- lines and surfaces: drawn edges, straight hairlines, no shadows inside a card ---------- */
.edge{position:absolute;inset:0;border:1.3px solid rgba(43,38,33,.7);border-radius:inherit;filter:url(#inkW);pointer-events:none}
.box{position:relative;padding:24px 26px;border-radius:var(--r-box);background:var(--card)}
.note{position:relative;margin-top:24px;max-width:760px;padding:24px;border-radius:var(--r-box);display:flex;flex-direction:column;gap:8px}
.note .edge{border-style:dashed;border-color:rgba(43,38,33,.5)}
.note .h3{display:flex;align-items:center;gap:8px}
/* no dot before the heading (10-28 01:03 "점 사용하는 디자인 ai스러우니까 … 모두 제외"); a caution says so in its words, in the
   darker terra kept for words that carry a state */
.note.warn .h3{color:var(--terra-t)}
.note.ok .h3::before{background:var(--sage)}
.stamp{position:absolute;right:20px;top:18px;width:86px;height:86px;transform:rotate(-12deg);pointer-events:none}
.stamp svg{width:100%;height:100%;overflow:visible}
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.plat{position:relative;padding:26px 26px 24px;border-radius:16px;background:var(--card);display:flex;flex-direction:column;gap:6px;min-width:0}
.plat .os{font-family:var(--f-mark);font-weight:600;font-size:30px;line-height:1.1;color:var(--ink);margin:0}

/* ---------- buttons: one main (ink) per card, drawn-edge secondary, text link with an arrow ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:var(--r-pill);
  font-weight:600;font-size:16px;line-height:1.2;color:var(--ink);text-decoration:none;background:transparent;white-space:nowrap;
  transition:transform var(--f3) steps(3,end)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn.m{min-height:44px;padding:0 20px;font-size:15px}
.btn.s{min-height:36px;padding:0 15px;font-size:14px;font-weight:500}
.btn.s::after{content:"";position:absolute;inset:-4px -2px}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid .edge{border-color:var(--ink)}
.btn.wide{width:100%}
.btn.dim{color:var(--faint);cursor:default}
.btn.dim:hover,.btn.dim:active{transform:none}
.btn.dim .edge{border-style:dashed;border-color:rgba(43,38,33,.42)}
.btn .arw{width:22px;height:12px;overflow:visible;transition:transform var(--f3) steps(3,end)}
.btn:hover .arw{transform:translateX(4px)}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.go{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none;padding:6px 0;position:relative}
.go .arw{width:22px;height:12px;overflow:visible;transition:transform var(--f3) steps(3,end)}
.go:hover .arw{transform:translateX(4px)}
.go.s{font-size:14.5px;font-weight:500;gap:8px}
.go.s .arw{width:18px;height:10px}
.go-row{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:28px}

/* ---------- tags, placeholders, price, keys ---------- */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tag{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;line-height:1.2;color:var(--ink-2);white-space:nowrap}
.tag .edge{border-color:rgba(43,38,33,.5)}
/* something not decided yet: a dashed pill, never made up */
.ph{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;margin:0 2px;border:1.2px dashed rgba(43,38,33,.42);border-radius:var(--r-pill);
  font-size:12px;line-height:1.2;letter-spacing:0;color:var(--soft);white-space:nowrap;vertical-align:.1em;font-weight:500}
/* must be filled in: the same pill, filled red (the dashed one may stay open for now) */
.ph.req{border:1.2px solid var(--req);background:var(--req);color:var(--paper);font-weight:600}
.price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;color:var(--ink)}
.price .now{font-weight:600;font-size:16px;white-space:nowrap}
.price .now .num{font-size:1.72em;margin-right:2px}
.price .was{font-size:14px;color:var(--soft);white-space:nowrap;text-decoration:none}
.price .was .num{font-size:1.22em;font-weight:600}
/* the line through a regular price crosses the middle of its figures (10-28 10:22 "취소선이 텍스트 라인보다 좀 위에 뜨는
   듯?"): the figures and the unit draw it themselves, each with its own face's line, not the price around them, whose face
   (Newsreader on the English page) set it near the figures' tops. Cormorant's line sits at the middle of its lining
   figures, and Noto Serif KR's, for 원 at 1/1.22 of their size, at the same height, so it runs straight across */
.price .was .num,.price .was .u{text-decoration:line-through;text-decoration-thickness:1px}
/* the line under a price is t8 작은 글 */
.price .vat{flex-basis:100%;font-size:14.5px;line-height:1.75;color:var(--soft)}
.price.l .now{font-size:19px}
.price.l .now .num{font-size:2.2em}
.key{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px}

/* ---------- fields: name above, a drawn box, help below; a mistake shows as a terra dot and words ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:420px}
.field>.label{color:var(--ink-2)}
.inp{position:relative;display:flex;align-items:center;min-height:48px;border-radius:var(--r-field);background:var(--card)}
.inp input,.inp select{flex:1;min-width:0;height:48px;padding:0 16px;border:0;border-radius:inherit;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.inp input::placeholder{color:var(--soft);opacity:1}
.inp .edge{border-color:rgba(43,38,33,.55)}
.inp:focus-within .edge{border-width:2px;border-color:var(--ink)}
.field .help{margin:0;font-size:13.5px;line-height:1.6;color:var(--soft)}
.field.err .edge{border-color:var(--terra)}
.field.err .help{color:var(--terra-t)}
.field.err .help:not(.cs-err){color:var(--soft)}
.chks{display:flex;flex-direction:column}
.chk{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;font-size:15px;line-height:1.65;color:var(--ink-2)}
.chk input{position:absolute;left:0;top:10px;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.chk .bx{flex:none;width:22px;height:22px;margin-top:1px;overflow:visible}
.chk .bx rect{fill:var(--card);stroke:var(--ink);stroke-opacity:.7;stroke-width:1.5}
.chk .bx path{fill:none;stroke:var(--ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.chk input:checked+.bx path{opacity:1}
.chk input:focus-visible+.bx{outline:2px dashed var(--ink);outline-offset:3px;border-radius:6px}
.chk .req{margin-right:8px;font-size:13px;color:var(--terra-t)}
.chk.all{font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:4px}
.label .opt{font-weight:500;color:var(--soft)}
.inp.ta{align-items:stretch}
.inp textarea{flex:1;min-width:0;min-height:128px;padding:12px 16px;border:0;border-radius:inherit;background:transparent;font:inherit;font-size:16px;
  line-height:1.65;color:var(--ink);resize:vertical;outline:none}
/* the consulting application (10-28 01:05): the site's own fields, two to a row, one on a phone */
.cs-lead{margin:0 0 var(--s5)}
.cs-form{max-width:760px}
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s5)}
.cs-form .field{max-width:none}
.cs-grid+.cs-grid,.cs-grid+.cs-want,.cs-want+.cs-grid,.cs-grid+.cs-msg{margin-top:var(--s5)}
.cs-want{margin:0;padding:0;border:0;min-width:0}
.cs-want legend{padding:0;margin:0 0 var(--s2)}
.cs-agree{margin-top:var(--s5)}
.cs-terms{margin:0 0 0 34px;color:var(--soft)}
.cs-send{margin:var(--s5) 0 0}
.cs-say{margin-top:var(--s3)}
@media (max-width:640px){.cs-grid{grid-template-columns:1fr}.cs-terms{margin-left:0}}
/* a choice from a list in the site's field (문의's 관련 제품, 10-28 06:14): the browser's arrow off, a drawn one in its
   place; the box and the type are the text field's */
.inp.sel select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;text-overflow:ellipsis}
.inp.sel .sel-chev{position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:15px;color:var(--ink-2)}
.seg span::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1.3px solid rgba(43,38,33,.45);filter:url(#inkW);pointer-events:none}
.seg input:checked+span{background:var(--ink);color:var(--paper);font-weight:600}
.seg input:checked+span::before{border-color:var(--ink)}
.seg input:focus-visible+span{outline:2px dashed var(--ink);outline-offset:3px}

/* ---------- tables and lists of facts: hairlines only, no vertical lines, numbers on the right ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;color:var(--ink-2)}
.tbl th{padding:0 14px 10px 0;text-align:left;font-weight:500;font-size:13.5px;letter-spacing:.04em;color:var(--soft);border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:16px 14px 16px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .r{text-align:right}
/* information lists are t8 작은 글 (14.5 / 1.75) */
.dl{display:grid;grid-template-columns:minmax(110px,190px) minmax(0,1fr);margin:0;font-size:14.5px;line-height:1.75;border-top:1px solid var(--hair)}
.dl dt,.dl dd{margin:0;padding:12px 0;border-bottom:1px solid var(--hair)}
.dl dt{padding-right:16px;color:var(--soft)}
.dl dd{color:var(--ink-2)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.rows>li{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 0;border-bottom:1px solid var(--hair)}
.rows>li>div{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ---------- people and accounts ---------- */
.acct{display:flex;align-items:center;gap:14px;min-width:0}
.av{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--card);font-weight:600;font-size:17px;color:var(--ink)}
.acct .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.acct .who b{font-weight:600;font-size:16.5px;line-height:1.4;color:var(--ink)}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(28px,4.5vh,40px)}

/* ---------- product tiles: a little paper with the name set as a logo, then one line and the price ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gut)}
.tile{display:flex;flex-direction:column;gap:14px;min-width:0;color:inherit;text-decoration:none}
.tile .art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:0 8%;border-radius:var(--r-box);background:var(--card);
  text-align:center;transition:transform var(--f3) steps(3,end)}
a.tile:hover .art{transform:translateY(-3px)}
.tile .nm{font-family:var(--f-mark);font-weight:600;font-size:clamp(25px,2.4vw,35px);line-height:1.05;color:var(--ink);white-space:nowrap}
.tile .nm.two{white-space:normal;font-size:clamp(21px,2vw,29px);line-height:1.08}
.tile .nm.two .caps{letter-spacing:.02em}
.tile .meta{display:flex;flex-direction:column;gap:6px}
.tile .one{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.tile .foot-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-top:4px}
.tile .stamp{right:12px;top:10px;width:84px;height:84px}
.tile.soon .one{color:var(--soft)}
.filter{margin-top:clamp(28px,4.5vh,40px)}
.tiles-wrap{margin-top:var(--s6)}
.tiles-wrap:has(#f-sale:checked) .tile.soon,.tiles-wrap:has(#f-soon:checked) .tile:not(.soon){display:none}

/* ---------- figures: a drawing in a box, its caption always under it ---------- */
.fig{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.fig .fbox{position:relative;border-radius:var(--r-box);background:var(--card);padding:18px}
.fig .fbox svg{display:block;width:100%;height:auto;overflow:visible}
.fig figcaption{display:flex;flex-direction:column;gap:4px}
.feat .fbox{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:10px}
.feat .fbox svg{width:min(100%,108px)}
/* a small icon drawn larger keeps the 1.8 line of every other drawing */
.feat .fbox svg *{vector-effect:non-scaling-stroke}

/* ---------- steps, questions, documents ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(22px,3vw,44px);position:relative}
/* the line joining the steps is a straight hairline: no dotted line anywhere (10-28 01:03, rules 16) */
.steps::before{content:"";position:absolute;left:8px;right:8px;top:9px;border-top:1px solid var(--hair)}
.steps li{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:34px}
.steps .dia{position:absolute;left:0;top:1px;width:18px;height:18px}
.steps .n{font-family:var(--f-mark);font-style:italic;font-weight:600;font-size:20px;line-height:1;color:var(--soft);margin:0;font-variant-numeric:lining-nums}
/* the sign under 소개's letter: t13 편지 인사, a step over the letter, and the name under it in t4 제목 2 — larger still,
   under the page title (10-28 04:25) */
.sign-box{margin-top:32px}
.sign{margin:0;font-weight:600;font-size:clamp(19px,1.55vw,22px);line-height:1.6;color:var(--ink)}
.sign-n{margin:4px 0 0}
.faq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:760px}
.faq li{position:relative;border-radius:var(--r-box)}
.faq details{border-radius:var(--r-box);background:var(--card)}
/* a question or a fold to open is t5 제목 3 (600 · 18.5) */
.faq summary,.more summary{list-style:none;display:flex;align-items:center;gap:16px;padding:16px 24px;cursor:pointer;font-weight:600;font-size:18.5px;line-height:1.45;color:var(--ink)}
.faq summary::-webkit-details-marker,.more summary::-webkit-details-marker{display:none}
.faq summary .pm,.more summary .pm{flex:none;width:16px;height:16px;margin-left:auto;transition:transform var(--f3) steps(3,end)}
.faq details[open] summary .pm,.more[open] summary .pm{transform:rotate(45deg)}
.faq .a{margin:0;padding:0 22px 20px;font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.more{position:relative;border-radius:var(--r-box)}
.more summary{padding:16px 0;border-bottom:1px solid var(--hair)}
.more .dl{border-top:0}
.tabs{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:clamp(24px,4vh,34px)}
.tabs a,.tabs span{position:relative;padding:6px 0;font-size:15px;color:var(--soft);text-decoration:none}
.tabs [aria-current="page"]{color:var(--ink);font-weight:600}
.tabs [aria-current="page"]::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C20 3 42 6.4 60 4.6S88 3.8 98 5.4' fill='none' stroke='%232B2621' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.toc{position:sticky;top:24px;display:flex;flex-direction:column;gap:0;max-height:calc(var(--win-h) - 64px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.toc a{position:relative;display:block;padding:5px 0 5px 20px;font-size:13.5px;line-height:1.5;color:var(--soft);text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
.toc a[aria-current="true"]::before{content:"";position:absolute;left:3px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--ochre);transform:rotate(45deg);border-radius:1px}
.toc-m{display:none}
@counter-style circled{system:fixed;symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";suffix:" "}
.doc-body{max-width:38em;display:flex;flex-direction:column;gap:var(--s7);min-width:0}
.doc-body section{scroll-margin-top:24px}
.doc-body h2{margin:0 0 10px;font-weight:600;font-size:18px;line-height:1.5;color:var(--ink)}
.doc-body p,.doc-body li{font-size:15.5px;line-height:1.9;color:var(--ink-2)}
.doc-body p{margin:0 0 6px}
.doc-body ol{margin:0;padding-left:1.7em;display:flex;flex-direction:column;gap:4px;list-style:circled}
.doc-body ol ol{margin-top:4px;padding-left:1.4em;list-style:decimal}

/* ---------- the design rules card itself ---------- */
.spec{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:6px var(--gut);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair-2)}
.spec:first-of-type{border-top:1px solid var(--hair-2)}
.spec>*{margin:0;min-width:0}
.sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px var(--s5)}
.sw{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw .chip{position:relative;display:block;height:60px;border-radius:var(--r-box);margin-bottom:10px}
.sw .mono{font-size:12.5px;color:var(--soft)}
.space{display:flex;flex-direction:column;gap:9px}
.space .row{display:grid;grid-template-columns:44px 112px minmax(0,1fr);align-items:center;gap:16px}
.space .sbar{display:block;height:12px;border-radius:3px;background:var(--ink);opacity:.78}
.g12{display:flex;flex-direction:column;gap:12px}
.g12 .row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px}
.g12 .cells{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:40px}
.g12 .cells i{display:block;border-radius:5px;background:var(--hair-2)}
.g12 .cells b{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:500;font-size:12.5px;color:var(--ink-2);background:rgba(201,150,63,.24)}
.g12 .cells b+b{background:rgba(95,116,134,.2)}
.surf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.surf>div{position:relative;min-height:150px;padding:22px 24px;border-radius:var(--r-box);display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.surf .st .stamp{position:relative;right:auto;top:auto;display:block;width:76px;height:76px;margin:-6px 0 auto -4px}
.lines2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:var(--s6)}
.lines2 .ln{position:relative;height:28px}
.lines2 .ln svg{width:100%;height:100%;overflow:visible}
.frames{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.frames span{display:flex;align-items:flex-end;justify-content:center;height:38px;padding-bottom:4px;border-radius:6px;background:var(--hair-2);font-family:var(--f-mono);font-size:10.5px;color:var(--soft)}
.frames .on{background:rgba(201,150,63,.42);color:var(--ink)}
.frames .on2{background:rgba(95,116,134,.3);color:var(--ink)}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gut)}
.dodont>p{margin:0;padding:14px 0;border-bottom:1px solid var(--hair-2);font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.dodont>p.h{padding-top:0;font-size:13.5px;letter-spacing:.04em;color:var(--soft);border-bottom-color:var(--hair)}
.dodont>p.x{color:var(--soft);text-decoration:line-through;text-decoration-color:rgba(156,79,49,.6)}
.kinds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px var(--gut)}
.kinds>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.kinds .mini{position:relative;height:84px;border-radius:10px;background:var(--card);padding:10px;display:grid;gap:5px}
.kinds .mini i{display:block;border-radius:3px;background:rgba(43,38,33,.16)}
.kinds .mini i.a{background:rgba(201,150,63,.4)}
/* ---------- product detail and order summary ---------- */
.prod{align-items:start}
.prod .art{margin-top:clamp(20px,5vh,64px);width:min(100%,460px)}
.buy{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.prod .tags{margin-top:22px}
.sum .rows>li{align-items:flex-start;padding:14px 0}
.sum .rows>li>span{white-space:nowrap}
.sum .total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 20px}
.sum .total .price{justify-content:flex-end;text-align:right}
.sec-h+.note{margin-top:0}
.box.trial{padding-right:124px}
.demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.demo-row+.demo-row{margin-top:22px}
.say{min-height:1.75em}
.pv{font-weight:600;color:var(--ink)}

/* ---------- the floor: the footer lies on the table below the cards (user, 10-26 23:08) ----------
   With the pointer outside the middle card the wheel lifts the scene (cards, landing, bar, floor controls and this
   footer) up to the footer's height; sb.js sets their translate. The table and its light stay where they are.
   Phones and pages without the script show the same footer at the end of the card. */
.ffoot{position:fixed;left:0;right:0;top:100vh;z-index:6;color:var(--land-ink)}
html:not(.sb) .ffoot{display:none}
/* lined up with the card above it */
.ff-in{width:min(var(--win-w,1200px),calc(100vw - 40px));margin:0 auto;display:flex;flex-direction:column;gap:12px;
  padding:26px 0 calc(38px + env(safe-area-inset-bottom,0px))}
/* the logo is centred on the line of text beside it (not on its baseline); everything sits a little in from the rule */
.ff-top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:0 14px 16px;margin-bottom:4px}
.ff-top .ff-links{align-items:center}
.ff-in>.ff-row,.ff-in>.ff-copy{padding-left:14px}
.ff-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.22}
.ff-mark{display:inline-flex;align-items:center;height:26px;font-family:var(--f-logo);font-weight:700;font-size:24px;line-height:1;color:inherit;text-decoration:none;transform:translateY(-1px)}
.ff-motto{margin:0;font-size:14px;line-height:1.6;color:var(--land-soft)}
.ff-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 22px}
.ff-links a{font-size:14px;line-height:1.6;color:inherit;text-decoration:none;opacity:.85}
.ff-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ff-links .pv{font-weight:600;opacity:1}
.ck-open{font:inherit;font-size:14px;line-height:1.6;color:inherit;background:none;border:0;padding:0;cursor:pointer;opacity:.85}
.ck-open:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* ---------- cookie consent: a note laid on the floor, bottom right. It never covers the card's middle and does not block.
   Both answers carry the same weight. Comes and goes in 4 frames at 12fps. */
.ck{position:fixed;z-index:8;right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));bottom:calc(env(safe-area-inset-bottom,0px) + 42px);
  width:min(396px,calc(100vw - 32px));color:var(--ink);font-size:14px}
.ck[hidden]{display:none}
.ck-in{position:relative;padding:20px 22px 16px;border-radius:14px;background:var(--paper,#F4EEE4);box-shadow:7px 9px 22px rgba(62,41,20,.2)}
.ck-h{margin:0 0 6px;font-weight:600;font-size:15.5px;line-height:1.5}
.ck-p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2)}
.ck-p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ck-opts{margin-top:10px;border-top:1px solid var(--hair)}
.ck-opts[hidden]{display:none}
.ck .chk.ck-c{padding:10px 0 8px;font-size:13.5px;line-height:1.6}
.ck .chk.ck-c b{display:block;font-weight:600;color:var(--ink);font-size:14px}
.ck .chk input:disabled+.bx{opacity:.5}
.ck .chk input:disabled{cursor:default}
.ck-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:14px}
.ck-btns .btn[hidden]{display:none}
.ck-more{margin-left:auto;font:inherit;font-size:13.5px;color:var(--soft);background:none;border:0;padding:8px 2px;min-height:36px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ck-more:hover{color:var(--ink)}
.ck.in{animation:ckIn .334s steps(4,end) both}
.ck.out{animation:ckOut .25s steps(3,end) both}
@keyframes ckIn{from{opacity:0;transform:translate(0,14px)}to{opacity:1;transform:none}}
@keyframes ckOut{from{opacity:1;transform:none}to{opacity:0;transform:translate(0,10px)}}
@media (prefers-reduced-motion:reduce){.ck.in,.ck.out{animation:none}}
.ff-row{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 24px;font-size:13px;line-height:1.95;color:var(--land-soft)}
.ff-row .k{margin-right:7px}
/* the pill sits on the line like the words beside it (baseline). Noto Serif KR's letters ride a little low in their line
   (its ascent is far larger than its descent), so the outline goes one pixel deeper below: measured on the owner's Chrome at
   1x, 1.5x and 2x, the letters are then centred in the pill within half a screen pixel, and the pill on the words beside it as
   before (10-28 01:08 "픽셀 단위로 확인해"; tools/pixshot.mjs tools/pix/footpill.mjs) */
.ff-chk{display:inline-flex;align-items:center;padding:0 10px 1px;border:1px solid currentColor;border-radius:999px;font-size:12px;line-height:20px;color:inherit;text-decoration:none}
.ff-chk:hover{background:rgba(127,110,90,.12)}
.ff-copy{margin:2px 0 0;font-size:12.5px;color:var(--land-soft)}
/* the owner's own details still to be written in: bold, bracketed, a highlighter stroke */
.fill{font-weight:700;color:var(--paper);background:var(--req);padding:1px .32em;border-radius:3px;white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* on the bookcloth floor the red needs a paper ring to stand off it */
.ffoot .fill,.ffoot .ph.req{box-shadow:0 0 0 1.5px rgba(244,238,228,.85)}
/* the same footer at the end of a card: phones, and pages opened without the script */
.foot{margin-top:clamp(56px,10vh,96px);padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.foot .ff-top{padding-bottom:12px}
.foot .ff-top::after{display:none}
.foot .ff-motto,.foot .ff-row,.foot .ff-copy{color:var(--soft)}
.foot .ff-links{margin-left:0}
html.sb .foot{display:none}
.card .dwp+.foot{margin:clamp(40px,7vh,72px) clamp(22px,5.4vw,88px) 40px}

/* ---------- product pages: the aescripts product page as it is (lmp.css, scoped .dwp), laid on the card ----------
   The sheet keeps its own paper and perforation; only its Korean meaning, a purchase strip and the legal part are added. */
.card .dwp{margin:12px;width:auto;border-radius:12px;overflow:hidden;font-family:Newsreader,var(--f-kr)}
.card .dwp .dw-g::after{display:none}
.dwp .ko{font-family:var(--f-kr);font-style:normal}
.dwp h2.ko{font-size:clamp(26px,3.1cqi,42px);line-height:1.32;letter-spacing:-.022em;font-weight:600}
.dwp .dw-lead.ko{font-size:clamp(16px,1.3cqi,18.5px);line-height:1.86;font-weight:500}
.dwp .dw-cap.ko{font-size:14.5px;line-height:1.75}
.dwp .dw-cap.ko b{font-family:var(--f-kr);font-size:18px;font-weight:600;line-height:1.45;margin-bottom:4px}
.dwp .dw-shelf-h.ko{font-size:16px;font-weight:500}
.dwp .dw-card p.ko{font-size:14.5px;line-height:1.7}
.dwp .dw-here.ko,.dwp .dw-go.ko{font-size:14.5px;font-weight:600}
.dwp .dw-soon span.ko{font-family:var(--f-kr);font-style:normal;font-size:13px;font-weight:600;letter-spacing:.02em}
.dwp .dw-card p.dw-price{font-family:Cormorant,var(--f-kr)}
.dwp .won{font-family:var(--f-kr);font-size:.7em;font-weight:500;margin-left:1px}
.dwp .pp-site{font-family:var(--f-kr)}
.dwp .pp-site .kick,.dwp .kick{margin-bottom:14px}
.dwp .lead{margin-top:22px}
/* the rate line under the shelf is t8 작은 글 like its twin under a product page (10-28 10:12 "t8로 변경"): the Let me
   order page's own face (Newsreader for its figures) and its "p inherits the ink" would otherwise win */
.dwp .pp-rate{font-family:var(--f-kr);color:var(--soft)}
.dwp .sec-h{margin-bottom:20px}
.dwp .pp-buy{padding-top:clamp(26px,3.2cqi,42px);padding-bottom:clamp(8px,1.4cqi,18px)}
.pp-buy-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px}
.pp-buy .price{margin-top:6px}
.pp-buy .say{margin-top:12px}
.pp-legal .note{margin-top:24px;max-width:none}
.pp-legal .more summary{border-bottom-color:rgba(43,38,33,.22)}
.card .dwp.pp-list{margin:0;border-radius:0;background:transparent}
.dwp.pp-list .dw-sec{padding-top:clamp(40px,6.2vh,76px)}
.pp-shelves{margin-top:clamp(28px,4vh,44px)}
.pp-shelves .dw-shelf+.dw-shelf{margin-top:clamp(36px,4.4cqi,56px)}

.login{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.login .t1{font-size:clamp(28px,3vw,42px)}
.login .lead{margin-left:auto;margin-right:auto}

/* ---------- widths: 860 and below one column, 640 and below a phone ---------- */
@media (max-width:860px){
  .hero,.split,.work,.doc{grid-template-columns:1fr}
  /* the row splits: the drawing beside the heading goes away (10-28 "가로가 좁은 화면에서는 (행이 나뉘면) 보이지 않게") */
  .hero .art{display:none}
  .cols,.steps{grid-template-columns:1fr}
  .cols.c4,.cols.c5,.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before{left:8px;right:auto;top:10px;bottom:10px;border-top:0;border-left:1px solid var(--hair)}
  .steps li{padding-top:0;padding-left:34px}
  .plats,.surf{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-side{position:static}
  .toc{display:none}
  .toc-m{display:block}
  .toc-m summary{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;font-weight:600;font-size:15px;color:var(--ink);list-style:none;border-bottom:1px solid var(--hair)}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary .pm{width:14px;height:14px;margin-left:auto}
  .toc-m nav{display:flex;flex-wrap:wrap;gap:2px 16px;padding:10px 0}
  .toc-m a{padding:5px 0;font-size:13.5px;color:var(--soft);text-decoration:none}
  .sws{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spec{grid-template-columns:1fr}
  .dodont{grid-template-columns:1fr}
  .dodont>p.h:nth-child(2){display:none}
}
@media (max-width:640px){
  .ck{left:10px;right:10px;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 38px)}
  .ck-in{padding:16px 16px 12px}
  .ck-btns .btn{flex:1 1 0}
  .ck-more{margin-left:0;flex-basis:100%;text-align:center}
  .card .dwp{margin:8px}
  .ff-links{margin-left:0}
  .nav{gap:2px 12px}
  .nav a{font-size:13px;padding:8px 0}
  .mark{font-size:26px}
  .bar{gap:8px 10px;padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  .snd{width:30px;height:30px}
  .addr{display:none}
  .lk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .looks .lk-t{display:none}
  .speed .l{display:none}
  .speed button{padding:4px 5px;font-size:11.5px}
  .ex-btn .t{display:none}
  .ex-btn .ts{display:inline}
  .tiles,.cols.c4,.kinds{grid-template-columns:1fr}
  .cols.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sws{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lines2{grid-template-columns:1fr}
  .space .row{grid-template-columns:36px minmax(0,1fr)}
  .space .row .small{grid-column:1/-1}
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr;padding:14px 0;border-bottom:1px solid var(--hair)}
  .tbl td{border:0;padding:4px 0}
  .tbl td::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:12.5px;letter-spacing:.04em;color:var(--soft)}
  .tbl .r{text-align:left}
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:0;border-bottom:0}
  .dl dd{padding-top:2px}
  .wm{top:38%}
  .motto{top:calc(38% + 50px)}
  .enter{top:66%}
  .d-ease{left:5%!important;top:8%!important;width:98px!important}
  .d-plane{right:5%!important;top:11%!important;width:92px!important}
  .d-spark{left:calc(50% + 24vw)!important;top:calc(38% - 92px)!important;width:46px!important}
  .d-lens{left:7%!important;top:auto!important;bottom:15%!important;width:78px!important}
  .d-camera{right:7%!important;top:auto!important;bottom:14%!important;width:86px!important}
  .d-keys,.d-undo,.d-wave,.d-cursor,.d-leaf,.d-dabs{display:none}
}
@media (prefers-reduced-motion:reduce){
  .enter .bi,.enter .arw,.go .arw,.btn,.btn .arw,.faq summary .pm,.more summary .pm,.tile .art,.ex-btn svg{transition:none}
}

/* ---------- product detail (10-27): buying in one of five places (drafts A-E), smaller buttons, then the product page
   untouched, then what to know before buying (spec, notices, the legal disclosure) below it */
.pp-name{margin:0;font-family:var(--f-mark);font-weight:600;font-size:clamp(34px,3.2vw,44px);line-height:1.04;letter-spacing:-.01em;color:var(--ink)}
.pp-name.s{font-size:22px;line-height:1.1}
/* the one-liner under the name is t7 본문 (.p) */
.pp-one{margin:8px 0 0;max-width:30em}
.pp-price{margin:0}
.pp-price .now .num{font-size:1.6em}
.pp-price.s .now .num{font-size:1.32em}
.pp-btns{display:flex;flex-wrap:wrap;gap:8px}
.pp-btns.col{flex-direction:column}
.pp-btns.col .btn{width:100%}
/* notes and messages are t8 작은 글 (.small) */
.pp-note{margin:0}
.pp-jump{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(43,38,33,.45)}
.pp-jump:hover{text-decoration-color:var(--ink)}
.pp-jump{white-space:nowrap}
.pp-say{margin:0}
.pp-say:empty{display:none}
/* A: one row above the page — the name on the left, price and buttons on the right, both ending on the same line */
.pp-a{padding-bottom:32px}
/* the name and the price share one baseline, so the row starts together at the top (10-27 17:51: the line over the name
   is gone, and bottom-aligned the name sat lower than the price) */
/* the name and its line sit centred top-to-bottom against the price and buttons (artifact comment 10-27 19:06) */
.ppa-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.ppa-buy{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ppa-buy .price{justify-content:flex-end;text-align:right}
.ppa-foot{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:16px;text-align:right}
/* main page, top: a compact strip (artifact comments 10-27 19:08~19:42). Two lines that pair across: the name over its line
   on the left, the price over the buttons on the right; the note small under the buttons. The price is the largest thing
   (19:10 "가격이 제일 중요하잖아"), the name a step below it (19:42 "제목 있긴 해야 할듯"), outside t2 by that decision */
.ppa-c{padding-block:clamp(24px,3.4vh,32px) 24px}
.ppa-c .ppa-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 48px;align-items:center}
.ppa-c .ppa-id,.ppa-c .ppa-buy{grid-row:span 2;display:grid;grid-template-rows:subgrid;gap:8px;align-items:center}
.ppa-c .ppa-buy{justify-items:end}
.ppa-c .pp-name{font-size:clamp(30px,2.9vw,38px);line-height:1.1}
.ppa-c .pp-one{margin:0}
.ppa-c .price{flex-wrap:nowrap;gap:0 12px}
.ppa-c .price .now{font-size:18px}
.ppa-c .price .now .num{font-size:2.35em}
.ppa-c .price .vat{flex-basis:auto;order:-1}
.ppa-c .price .was{font-size:16px}
.ppa-c .ppa-foot{margin-top:12px;gap:4px}
/* B: the page on the left; a small box on the right stays in view while reading */
.ppb{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:0 14px;align-items:start;padding-right:12px}
.card .ppb .dwp{margin:12px 0 12px 12px}
.ppb-rail{position:sticky;top:12px;padding-top:12px}
.ppb-box{padding:22px 22px 20px}
.ppb-box .pp-name{font-size:30px}
.ppb-box .pp-one{font-size:14.5px}
.ppb-box .pp-price{margin-top:18px}
.ppb-box .pp-btns{margin-top:14px}
.ppb-box .pp-say{margin-top:10px}
.ppb-box .pp-note{margin-top:12px}
/* The page, C then D (10-28 02:00): C's slim bar from the start, hanging from a dock with no height after the notes
   at the end of the page, so it takes no room in the page and stays at the bottom of the card until D's buying section
   is all in. The bar's paper is its own layer, so it can thin away while its words move up into the section (sb.js,
   --bp 1 → 0); once they are all there the bar is put away. The name is a box, so it can be moved and grown. No line
   over the bar (10-28 02:00 "구분선은 없애고"); the product page's own lines stay — the perforated edge under the cover,
   the lines after the shelf's heading and the notes' headings, the one under 상품 정보 제공 고시 (06:18~06:19 "절취선이
   사라졌는데?", "아래 영역 나누는 선도 사라지고") */
.ppx-dock{position:sticky;bottom:0;z-index:4;height:0;margin:0 12px}
.ppx-bar{position:absolute;left:0;right:0;bottom:0}
.ppx-bar::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:var(--bp,1)}
.ppx-bar .ppc-in{position:relative;background:none;border-top:0}
.ppx-bar .pnm,.ppx-bar .price .now .num,.ppx-bar .price .now .u{display:inline-block}
/* the section's own words are moved too on the last part of the way (sb.js dockX), and a plain inline cannot be */
.ppd-buy .price .now .num,.ppd-buy .price .now .u{display:inline-block}
.ppx-bar.gone{visibility:hidden}
.ppx-bar.flying .btn{transition:none}
/* C: the page first; a slim bar stays at the bottom of the card until the page ends */
.ppc-bar{position:sticky;bottom:0;z-index:4;margin:0 12px}
/* no shadow inside a card (rule 5): the bar is the card's own paper with a straight hairline above it */
.ppc-in{display:flex;align-items:center;justify-content:space-between;gap:8px 32px;padding:12px 16px 12px 24px;background:var(--paper);
  border-top:1px solid var(--hair)}
/* the name in the bar is t12 (Cormorant 600, 1.2 times the reading size around it) */
.ppc-id{margin:0;min-width:0;font-size:16.5px;line-height:1.2}
.ppc-buy{display:flex;align-items:center;gap:12px 24px}
.ppc-buy .price{flex-wrap:nowrap;gap:2px 12px}
.ppc-buy .price .vat{flex-basis:auto}
/* the word over the bar: a pill of paper with a drawn edge, no shadow */
.ppc-bar .pp-say,.ppx-bar .pp-say{position:absolute;right:16px;bottom:calc(100% + 12px);padding:8px 16px;border-radius:999px;background:var(--paper)}
.ppc-bar .pp-say::before,.ppx-bar .pp-say::before{content:"";position:absolute;inset:0;border:1.3px solid rgba(43,38,33,.7);border-radius:inherit;filter:url(#inkW);pointer-events:none}
/* D: read first, buy at the end; a small price pill at the top right jumps there and leaves once it is in view */
.ppd-pin{position:sticky;top:0;z-index:5;height:0;display:flex;justify-content:flex-end;padding-right:28px}
.ppd-pill{position:relative;display:inline-flex;align-items:center;gap:2px;height:38px;margin-top:20px;padding:0 16px;border-radius:999px;
  background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;box-shadow:3px 4px 12px rgba(62,41,20,.22);
  transition:opacity .25s steps(3,end),translate .25s steps(3,end)}
.ppd-pill .num{font-family:var(--f-mark);font-size:1.32em;font-weight:600;margin-right:1px}
.ppd-pill.gone{opacity:0;translate:0 -6px;pointer-events:none}
.ppd-buy{align-items:center;text-align:center;padding-top:var(--sec);padding-bottom:8px}
.ppd-buy .pp-name{font-size:clamp(36px,3.4vw,48px)}
.ppd-buy .pp-price{justify-content:center;margin-top:24px}
/* main page, the end: name + line on the left, price + VAT on the right, one row, centred top-to-bottom (artifact comment
   10-27 19:05); the price is the largest thing in the section (19:10) */
.ppd-row{display:flex;align-items:center;justify-content:center;gap:16px 48px;margin-bottom:8px}
.ppd-id{text-align:left}
.ppd-pr .pp-price{justify-content:flex-end;text-align:right;margin-top:0}
.ppd-pr .price .now{font-size:20px}
.ppd-pr .price .now .num{font-size:2.7em}
.ppd-pr .price .was{font-size:18px}
.ppd-buy .ppd-id .pp-name{font-size:clamp(34px,3.1vw,44px)}
.ppd-buy .pp-btns{justify-content:center;margin-top:16px}
.ppd-buy .pp-say{margin-top:8px}
.ppd-buy .pp-note{margin-top:12px}
/* E: a slip of paper on the table beside the card (sb.js lays it there when there is room) */
.ptag{position:fixed;z-index:5;width:236px;rotate:-3deg;transform-origin:30% 0;color:var(--ink);font-family:var(--f-kr)}
.ptag-in{position:relative;padding:18px 18px 16px;border-radius:14px;background:var(--paper);box-shadow:7px 9px 22px rgba(42,20,10,.32)}
.ptag .pp-name{font-size:27px;margin-top:6px}
.ptag .pp-price{margin-top:12px}
.ptag .pp-price .now .num{font-size:1.45em}
.ptag .pp-btns{margin-top:14px}
.ptag .pp-say{margin-top:10px}
.ptag .pp-note{margin-top:10px;font-size:12px}
.tag-out .ppe-fallback{display:none}
/* below the page: what to know before buying */
/* the end of the card: 96 (rule 2) */
.pp-after{padding-top:var(--sec);padding-bottom:var(--s9)}
.pp-after .t2{margin:0 0 var(--s7)}
.pp-info{margin-top:0}
.pp-after .note{margin-top:var(--s5)}
.pp-after .more{margin-top:var(--s7)}
/* the line under the prices, on the right (10-28 04:41 "텍스트 오른쪽 정렬") */
.pp-vat{margin-top:var(--s4);text-align:right}
.pp-rate{margin-top:var(--s7)}
/* a short kind word on the floor at the bottom right, one per visit (10-27 16:12): t8 작은 글 in the floor's ink.
   It is the one thing on the floor strip that stays on the real site; the rest is for review */
.greet{position:fixed;z-index:8;right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));bottom:calc(env(safe-area-inset-bottom,0px) + 4px);
  margin:0;line-height:30px;color:var(--land-ink);white-space:nowrap;opacity:0}
.greet.in{opacity:1;animation:greet-in .42s steps(5,end) both}
@keyframes greet-in{from{opacity:0;transform:translate(8px,4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.greet.in{animation:none}}
html:not(.sb) .greet{display:none}
.greet a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* narrower desk windows (and the side panel beside a chat): the review tools give way so the kind word keeps its place */
@media (max-width:1100px){.addr>span,.speed .l{display:none}}
@media (min-width:641px) and (max-width:960px){
  .addr{display:none}
  .ex-btn .t{display:none}
  .ex-btn .ts{display:inline}
  .speed{left:max(184px,calc(env(safe-area-inset-left,0px) + 180px));transform:none}
}
/* the drafts of the product page, for comparison, at the end of the example list */
.ex-drafts{display:flex;align-items:center;gap:2px;margin-top:6px;padding:8px 6px 2px 10px;border-top:1px solid rgba(43,38,33,.12);font-size:13px;color:#2B2621}
.ex-drafts .n{font-family:var(--f-mono);font-size:11px;opacity:.6;min-width:16px;margin-right:10px}
.ex-drafts .t{margin-right:auto;opacity:.8;white-space:nowrap}
.ex-list .ex-drafts a{display:inline-flex;justify-content:center;min-width:24px;padding:6px 0;font-family:var(--f-mono);font-size:12.5px}
/* a spec list that needs no lines: rows kept apart by space */
.dl.plain{border-top:0;row-gap:0}
.dl.plain dt,.dl.plain dd{border-bottom:0;padding:8px 0}
/* product list, and the shelf at the foot of a product page the same way (10-27 18:29 "제품 상세에도 제품 목록처럼 조금 더 많은
   제품들이 한 화면에 표시될 수 있게 통일해"): more across, so more is seen at once */
.dwp.pp-list .dw-cards,.dwp.pp .dw-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px}
@container dw (max-width:1100px){.dwp.pp-list .dw-cards,.dwp.pp .dw-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container dw (max-width:820px){.dwp.pp-list .dw-cards,.dwp.pp .dw-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container dw (max-width:560px){.dwp.pp-list .dw-cards,.dwp.pp .dw-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}
@media (max-width:1240px){
  .ppb{grid-template-columns:1fr;padding-right:0}
  .ppb-rail{position:static;order:-1;padding:12px 12px 0}
  .card .ppb .dwp{margin:12px}
}
@media (max-width:860px){
  .ppa-row{grid-template-columns:1fr;align-items:start}
  .ppa-buy{align-items:flex-start}
  .ppa-buy .price{justify-content:flex-start;text-align:left}
  .ppa-foot{align-items:flex-start;text-align:left}
  .ppa-c .ppa-row{grid-template-columns:1fr;gap:16px}
  .ppa-c .price{flex-wrap:wrap;justify-content:flex-start}
  .ppa-c .ppa-buy{justify-items:start}
  .ppa-c .ppa-id{gap:8px}
}
@media (max-width:640px){
  .ppc-in{padding:8px 8px 8px 16px;gap:8px 12px}
  .ppc-buy .price .vat,.ppc-buy .price .was{display:none}
  .ppc-buy{gap:8px}
  .ppc-buy .pp-btns .btn{padding:0 12px}
  .speed{display:none}
}
/* the background is settled: bookcloth (10-27). The picker is gone from the floor */
.looks{display:none!important}

/* × on notes and lists over the page: 36px target, drawn 20px, top right */
.xbtn{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;opacity:.7}
.xbtn svg{width:20px;height:20px;overflow:visible}
.xbtn:hover{opacity:1;background:rgba(43,38,33,.07)}
.xbtn:focus-visible{outline:2px dashed var(--ink);outline-offset:1px}
.ck-h{padding-right:34px}
.ex-list{padding-top:40px}
.ex-list .xbtn{top:4px;right:4px;color:#2B2621}

/* ---------- the text formats by number (t1..t12, textstyles.py) and the debugging view (10-27 15:35, review only) ---------- */
.ts-intro{margin:0 0 16px}
.ts-l{display:flex;align-items:baseline}
.tid{flex:none;min-width:2.6em;margin-right:6px;font-family:var(--f-mono);font-weight:600;font-size:12.5px;letter-spacing:0;color:var(--ink)}
.sp-g{display:flex;align-items:center;gap:2px}
.speed .dbg-btn{margin-left:15px}
.speed .dbg-btn::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:1px;background:currentColor;opacity:.35}
@media (hover:none){.speed .dbg-btn{display:none}}
/* the way into the 관리 대시보드, beside 디버깅 (10-28 01:56), dressed like it */
.speed .dash-link{position:relative;display:inline-flex;align-items:center;min-height:30px;margin-left:15px;padding:4px 7px;border-radius:8px;
  font-family:var(--f-mono);font-size:12px;color:var(--chip);text-decoration:none;opacity:.7;white-space:nowrap}
.speed .dash-link:hover{opacity:1}
.speed .dash-link::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:1px;background:currentColor;opacity:.35}
@media (hover:none){.speed .dash-link{display:none}}
html:not(.dbg-on) .dbg-ui{display:none}
.dbg-box{position:fixed;z-index:60;left:0;top:0;pointer-events:none;border:1.5px dashed #C9963F;border-radius:4px;box-sizing:border-box}
.dbg-tip{position:fixed;z-index:61;left:0;top:0;max-width:320px;padding:8px 12px 9px;border-radius:10px;pointer-events:none;
  background:#2B2621;color:#F4EEE4;box-shadow:0 10px 26px -10px rgba(20,12,6,.6);font-family:var(--f-kr);font-weight:500;font-size:12.5px;line-height:1.5;letter-spacing:0}
.dbg-tip p{margin:0}
.dbg-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:14px;font-weight:600}
.dbg-id{font-family:var(--f-mono);font-size:14px;color:#E8BF6A}
.dbg-w{font-size:12px;font-weight:500;opacity:.62}
.dbg-v{margin-top:3px;font-family:var(--f-mono);font-size:11.5px;opacity:.86}
.dbg-x{margin-top:4px;font-size:12px;color:#F2AE90}
.dbg-tip.out .dbg-n{color:#F2AE90}

/* ---------- the cart (10-27 18:03 "장바구니 넣어서 한 번에 결제하게 한다매") ----------
   장바구니 in the menu carries how many things are in it: a small ochre mark (ochre = chosen, current, done), the number
   in the numbers' type. It pops in 3 frames when something goes in (sb.js). */
.nav .cnt,.nav-m .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:6px;padding:0 5px;border-radius:999px;
  background:var(--ochre);color:#2B2621;font-family:var(--f-mark);font-weight:700;font-size:14px;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;vertical-align:1px;transform-origin:50% 55%}
/* 구매하기 (ink) + 장바구니에 추가 → (words and an arrow, no edge: 10-28 04:39 "모든 버튼 디자인 수정. 테두리 다 빼고 그냥
   '장바구니에 추가 >'"), the trial as a text link after them. Once the product is in the cart it reads 장바구니 보기 → */
.pp-btns{align-items:center}
.pp-btns .pp-try,.pp-btns .pp-add{margin-left:16px}
.pp-btns.col{align-items:stretch}
.pp-btns.col .pp-try,.pp-btns.col .pp-add{align-self:center;margin:2px 0 0}
/* a text link that acts on the page is a button in the link's clothes */
button.go{appearance:none;background:none;border:0;margin:0;cursor:pointer;font-family:inherit;line-height:inherit;text-align:left}
/* the product list: each product on sale has a small 장바구니에 추가 → at the foot of its card, level along the row */
.dwp.pp-list .dw-card{display:flex;flex-direction:column}
.dwp.pp-list .dw-card>.dw-go{align-self:flex-start;margin-bottom:12px}
.dwp.pp-list .dw-card .dw-add{align-self:flex-start;margin-top:auto;font-family:var(--f-kr)}
/* the checkout card: one line per product (name, licence, price, 빼기), then the total and the one ink button */
.co-lines{margin-top:14px}
.co-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
.co-amt .num{font-size:1.35em}
.co-rm{position:relative;padding:3px 0;font-size:13.5px;line-height:1.4;color:var(--soft);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(43,38,33,.35)}
.co-rm:hover{color:var(--ink);text-decoration-color:var(--ink)}
.co-rm::after{content:"";position:absolute;inset:-10px -14px}
.co-mode{margin:14px 0 0}
.co-all{position:relative;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(43,38,33,.45);white-space:nowrap}
.co-all:hover{text-decoration-color:var(--ink)}
.co-all::after{content:"";position:absolute;inset:-12px -6px}
/* the discount code (10-28 06:25 "할인코드 발급"): a field and its button on one line under the order lines; once put in,
   a line of its own with the amount taken off and a way to take it out (the same quiet link as 빼기) */
.co-code{margin:18px 0 0}
.co-code .label{display:block;margin:0 0 8px;color:var(--ink-2)}
.co-code-row{display:flex;gap:8px;align-items:stretch}
.co-code-row .inp{flex:1;min-width:0;min-height:44px}
.co-code-row .inp input{height:44px;padding:0 14px;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.co-code-row .inp input::placeholder{text-transform:none;letter-spacing:0}
.co-code-say{margin:8px 0 0}
.co-code-say:empty{display:none}
.co-disc{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 0;font-size:15px;color:var(--ink-2)}
.co-disc .mono{margin-left:6px}
.co-code-x{position:relative;margin-left:12px;padding:3px 0;border:0;background:none;font:inherit;font-size:13.5px;line-height:1.4;color:var(--soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.co-code-x:hover{color:var(--ink)}
.co-code-x::after{content:"";position:absolute;inset:-10px -10px}
.sum .total .h3{font-size:16.5px}
.co-empty{margin-top:clamp(36px,6vh,56px)}
.co-empty .note{margin-top:0}
@media (max-width:640px){
  .nav .cnt{min-width:17px;height:17px;margin-left:5px;padding:0 4px;font-size:13px}
  /* the trial link takes its own line under the two buttons, flush with them (centred in the section at the end) */
  .pp-btns .pp-try{flex-basis:100%;margin:4px 0 0}
  .ppd-buy .pp-try{justify-content:center}
  .ppd-row{flex-direction:column;gap:16px}
  .ppd-id{text-align:center}
  .ppd-pr .pp-price{justify-content:center;text-align:center}
  /* the slim bar on a phone: price and both buttons; the name is the page's own */
  .ppc-id{display:none}
}

/* ---------- the menu on narrow screens (10-27 18:27: eight items) ----------
   720px and below: the bar keeps 장바구니 (with its number) and folds the rest into 메뉴, a list laid under the bar like the
   lists on the floor: 44px rows, the page being read marked with the ochre diamond, × to close */
.nav-btn{display:none;align-items:center;min-height:36px;padding:6px 4px;font-size:15px;line-height:1.2;color:var(--bar-ink);opacity:.82}
.nav-btn:hover,.nav-btn[aria-expanded="true"]{opacity:1}
.nav-m{position:absolute;top:calc(100% - 2px);right:max(12px,calc(env(safe-area-inset-right,0px) + 8px));width:min(236px,calc(100vw - 24px));
  padding:40px 8px 8px;border-radius:14px;background:rgba(250,246,239,.97);color:#2B2621;
  box-shadow:0 1px 2px rgba(30,20,10,.18),0 14px 40px -12px rgba(30,20,10,.42);display:flex;flex-direction:column;gap:2px}
.nav-m[hidden]{display:none}
.nav-m a{position:relative;display:flex;align-items:center;min-height:44px;padding:8px 12px 8px 30px;border-radius:8px;
  font-size:15px;line-height:1.3;color:#2B2621;text-decoration:none}
.nav-m a:hover,.nav-m a:focus-visible{background:rgba(43,38,33,.07)}
.nav-m a[aria-current]{font-weight:600}
.nav-m a[aria-current]::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--ochre);
  transform:rotate(45deg);border-radius:1px}
.nav-m .xbtn{top:4px;right:4px;color:#2B2621}
@media (max-width:720px){
  .nav{gap:0}
  .nav a:not([data-cart-link]){display:none}
  .uline{display:none}
  .nav-btn{display:inline-flex}
}
@media (max-width:640px){
  .nav a{font-size:14px}
  .nav-btn{font-size:14px}
}
html:not(.sb) .nav-btn{display:none}
@media (max-width:720px){html:not(.sb) .nav a:not([data-cart-link]){display:inline-block}html:not(.sb) .nav{flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}}

/* ---------- English (10-27 19:12: the landing, the product page and the kind word first) ----------
   English pages use the fonts of the aescripts pages (decided 10-25): Cormorant for names and headings, Newsreader for
   reading. Newsreader comes in 400 and 500 only, so an English button is 500. The formats keep their sizes. */
.lang-en{font-family:Newsreader,Georgia,var(--f-kr)}
.lang-en :is(.t1,.t2,.h3,summary){font-family:var(--f-mark)}
.lang-en .btn{font-weight:500}
/* the landing shows one language at a time; the other waits, hidden (sb.js swaps them) */
.motto[data-show="ko"] [data-l="en"],.motto[data-show="en"] [data-l="ko"],.enter[data-show="ko"] [data-l="en"],.enter[data-show="en"] [data-l="ko"]{display:none}
.motto .en{display:block}
/* EN / KR at the bottom left of the floor (10-27 19:12): a thing of the real site, so in the floor's own type like the
   kind word (t8, the floor's ink); the language shown is full ink, the other at 55%. The example picker moves along to
   its right, 32 away */
.fl{gap:12px}
.lsw{display:flex;align-items:center;gap:2px;margin-right:20px;color:var(--land-ink);font-size:14.5px;line-height:1.2}
.lsw button{display:inline-flex;align-items:center;min-height:30px;padding:0 4px;font-size:14.5px;letter-spacing:.04em;color:inherit;opacity:.55;border-radius:6px}
.lsw button:hover,.lsw button[aria-pressed="true"]{opacity:1}
.lsw button[aria-pressed="true"]{cursor:default}
.lsw .sl{opacity:.45}
html:not(.sb) .lsw{display:none}
/* narrow screens: EN / KR keeps its place; the example picker (review only) shrinks to its arrow on a phone and gives way
   on the narrowest, so the kind word always has its line */
@media (max-width:640px){
  .lsw{margin-right:0}
  .lsw button{padding:0 3px}
  .ex-btn .ts{display:none}
  .ex-btn{min-width:30px;justify-content:center;padding:4px 6px}
}
@media (max-width:680px){.speed{display:none}}
/* phones: the longest kind word (클라이언트가 한 번에 컨펌해주는 날이 되길., 10-28 01:37) keeps one line beside EN / KR —
   a size smaller there, and the review menu steps aside up to 400px */
@media (max-width:400px){.exm{display:none}}
@media (max-width:420px){.greet{font-size:13px}}

/* ---------- 기업 컨설팅 (10-27 23:58; filled in 10-28 03:00~03:28): the floating licences under the intro, what it does,
   the curriculum (each step's time, then what it covers), the prices in 만원 (5 company sizes × 6 brackets of people) ---------- */
.cs-more{margin-top:32px}   /* a little more room over it (04:16 "위에 마진 살짝"), the curriculum's line ending in it */
.cs-fixed{margin:0 0 24px}
.cs-price{table-layout:fixed}
.cs-price thead th:first-child{width:24%}
.cs-unit{margin:12px 0 0;text-align:right}
.cs-price td .num{font-size:20px;line-height:1;color:var(--ink)}
.cs-time{color:var(--ink-2)}
.cs-price th.r{text-align:right}
.cs-price th[scope="row"]{padding:16px 14px 16px 0;font-size:14.5px;letter-spacing:0}
.cs-price td .ph,.cs-price th .ph{margin:0}
.cs-steps .small .ph{margin:0 4px 4px 0}
/* the curriculum runs down the page, its line on the left as on a phone: each step's lines are long (10-28 03:58 "내용이 길어서
   세로 배치하는 게 나을듯"). No numbers (04:16 "넘버링도 빼버려"); the line and its diamonds a little in from the card's
   edge (04:16 "너무 벽에 딱 붙은 듯. 살짝 왼쪽 패딩"); each diamond's middle on the line to the pixel — the 1px line fills
   the column 24..25, the diamond (18 wide, its middle at 9) stands at 16 − .5 — and level with its title's first line; the
   line reaches past the last step's words (04:17 "이정표 아이콘 정확히 세로선에 안 맞아 있음. 픽셀단위로 정렬. 그리고
   세로선 텍스트 충분히 감싸게 좀 더 아래로 뻗어줘") */
.cs-steps{grid-template-columns:1fr;gap:32px;max-width:776px;padding-left:16px}
.cs-steps::before{left:24px;right:auto;top:14px;bottom:-14px;border-top:0;border-left:1px solid var(--hair)}
.cs-steps li{padding-top:0;padding-left:36px}
.cs-steps .dia{left:-.5px;top:4.4px}
/* 하는 일: each title under its icon in the middle, the three together in the middle, never spread wider than 680px however
   wide the screen (04:15 "각각 가운데 정렬, 그룹 가운데 정렬. … 최대 폭 지정") */
.cs-do{max-width:680px;margin-left:auto;margin-right:auto}
.cs-do .col{align-items:center;text-align:center}
/* the consent and the send button share a line, the button on the right (04:00); on a narrow screen it goes under */
.cs-end{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}
.cs-end .btn{flex:none}
.cs-agree .cs-terms{margin-top:8px}
.cs-price .cs-ask{color:var(--ink-2)}
.cs-lic{margin-top:32px}
@media (max-width:640px){
  .cs-price th[scope="row"]{display:block;border:0;padding:0 0 4px}
}


/* ---------- the licence type on a product page (10-28 00:01): 개인 사용자 | 플로팅 서버 ----------
   plain words above the buttons in t8 작은 글, the chosen one heavier and in ink (10-28 01:12 "꾸밈 없이 텍스트만 … 선택된 건
   굵게. 텍스트 타입 t8"). Each word keeps room for its heavier self, so choosing does not move the line; the label reaches
   10px above and below the words for a finger, without taking room */
.pp-lic{display:flex;align-items:center;gap:12px;margin:0;font-size:14.5px;line-height:1.75;color:var(--soft)}
.pp-lic label{position:relative;display:block;padding:10px 0;margin:-10px 0;cursor:pointer}
.pp-lic input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pp-lic span[data-t]{display:inline-grid;white-space:nowrap}
.pp-lic span[data-t]::after{content:attr(data-t);font-weight:600;height:0;overflow:hidden;visibility:hidden}
.pp-lic input:checked+span{color:var(--ink);font-weight:600}
.pp-lic input:focus-visible+span{outline:2px dashed var(--ink);outline-offset:3px}
.pp-lic .sep{color:var(--soft)}
.ppd-buy .pp-lic{justify-content:center;margin-top:16px}
.ppd-buy .pp-lic+.pp-btns{margin-top:12px}

.lic-f{display:none}
[data-lic="floating"] .lic-f{display:flex}
[data-lic="floating"] .lic-s{display:none}
.lic-f .now .ph{margin:0}
/* switched off (rules 6번: dashed, faint ink) — a floating server licence cannot be bought until it has a price */
.btn:disabled{background:transparent;color:var(--faint);cursor:default}
.btn:disabled:hover,.btn:disabled:active{transform:none}
.btn:disabled .edge{border-style:dashed;border-color:rgba(43,38,33,.42)}

/* ---------- 소개 (10-28 02:24~02:53, comments) ---------- */
/* the letter: the owner's paragraphs, 16 apart, as wide as the card's other sections — the same margin right as left
   (10-28 04:22 "영역 좌우 마진이 다르네. 왼쪽 기준에 맞춰서 오른쪽도 확장하고 더 넓게 써") */
.letter .lt-p{margin-top:16px}
/* the letter's first paragraph is body text (t7) like the rest, keeping the lead's gap under the greeting (10-28) */
.letter .hello+.lt-p{margin-top:22px}
.letter :is(.lead,.p){max-width:none}
/* the title: the role is a row of letter cells that turn like a split-flap board (sb.js flipOn). A cell keeps the line's
   height and sits on its top, so the page under it never moves. While the word turns each cell is a letter wide, the
   role's width runs smoothly from the old word's to the new one's, and in a turning cell four layers carry the halves:
   the new letter's top (uncovered as the flap falls), the old one's bottom (covered as the next flap comes down) and the
   two flaps, folding over the middle in 3D */
.hello{line-height:1.3}
.hello .hf{white-space:nowrap}
.hf-c{position:relative;display:inline-block;height:1.3em;vertical-align:top;white-space:nowrap}
.hf-k{position:relative;display:inline-block;height:1.3em;vertical-align:top}
.hf-l{position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;transform-origin:50% 50%;backface-visibility:hidden}
.hf-m{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap}
.hf-ft{clip-path:inset(0 0 50% 0)}
.hf-fb{clip-path:inset(50% 0 0 0)}
/* other scripts (a product's languages): each in a serif of its own, cut to the letters used */
.langs [lang=ja]{font-family:"Noto Serif JP",var(--f-kr)}
.langs [lang|=zh]{font-family:"Noto Serif SC",var(--f-kr)}
.langs [lang=hi]{font-family:"Noto Serif Devanagari",var(--f-kr)}
.langs [lang=bn]{font-family:"Noto Serif Bengali",var(--f-kr)}
.langs [lang=ar]{font-family:"Noto Naskh Arabic",var(--f-kr)}

/* ---------- 홈: what time cut from the work is worth (10-28 02:32) ----------
   three sums in t10 숫자 over a t8 line each, the line saying what it assumes (the line of assumptions under them went
   with its room, 04:14) */
.tv-n{margin:0;font-weight:600;font-size:18.5px;line-height:1.2;color:var(--ink)}
.tv-n .num{font-size:2.6em;line-height:1;margin-right:6px;letter-spacing:-.01em}

/* ---------- 질문과 답변 (10-28 04:47~04:50) ----------
   the last box is one line: 그래도 해결되지 않으면, and on its right the way to the inquiry page; its line under it went
   (04:48 "아랫줄 설명 제거, 오른쪽에 '문의 페이지 열기 →'") */
.sp-more{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
.sp-more .h3{margin:0}
.sp-say{margin-top:8px}

/* ---------- the live site (sb.js 'the live site', 10-28 06:15): a word that acts (로그아웃), the Google button's place,
   who orders while nobody is signed in, what the pay button says ---------- */
.lk{position:relative;padding:3px 0;border:0;background:none;font:inherit;line-height:1.4;color:var(--soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lk:hover{color:var(--ink)}
.lk::after{content:"";position:absolute;inset:-10px -8px}
.go-row .lk{margin-left:8px}
.acct.out{display:block}
.gbtn{min-height:44px}
.co-pay-say{margin:10px 0 0}
.co-pay-say:empty{display:none}
/* the public site before the Toss contract: the payment window opens in test mode (sb-site lib/sales.js) */
.co-test{margin:12px 0 0}