/* 소개 쪽(landing/index.html)과 쓰는 법 쪽(landing/guide/index.html)이 함께 쓰는 꾸밈.
   따로 열리는 쪽이라 앱의 style.css 와 나눠 둔다(10월 22일 쪽을 둘로 나누며 뺐다) */
/* 서비스 소개 쪽 — madewithgsap.com 의 결(주공께서 "이 사이트처럼" 하셨다, 10월 15일).
   어두운 바탕에 아주 큰 글자, 굴리면 붙박여 옆으로 흐르는 마당, 굴림 빠르기에 따라 기우는 띠 글, 손을 대면 반응하는 칸.
   으뜸 빛깔(금)은 아낀다 — 머리 밑줄 · 「하는 중」 · 진행 막대 · 도장 · 지금 벼슬에만. 나머지는 먹빛.
   바깥 글꼴·스크립트는 쓰지 않는다(저장소 법도). 움직임은 손수 짠 스크립트 하나(굴림 고리 하나에 모은다).
   기기가 밝으면 밝은 꼴로 바뀐다(소개 쪽도 시스템을 따른다). */
/* 짜임: 왼쪽에 붙인 큰 글 머리 → 띠 글 → 바로 해 보기 → 붙박여 옆으로 흐르는 여섯 비결 → 지워지는 견줌 → 문답 일기 → 재미 바둑판 → 지킴 → 물음 → 맺음 */
:root{
  --bg:#0b0a09; --bg-2:#12110f; --surface:#1a1815; --surface-2:#221f1b;
  --line:rgba(244,240,232,.11); --line-2:rgba(244,240,232,.22);
  --fg:#f4f1ea; --fg-2:#d4cfc5; --dim:#b0aa9f; --faint:#7d776e;   /* --fg-2: 풀이 글(읽히는 둘째 글) · --dim: 이름표만 */
  --gold:#d4a72c; --gold-fg:#e3be55; --gold-soft:rgba(212,167,44,.13); --on-gold:#1a1405;
  --btn:#f4f1ea; --on-btn:#0b0a09;
  --shot-bg:#0a0a0a; --shadow:rgba(0,0,0,.55);
  --sans:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic','맑은 고딕',system-ui,-apple-system,sans-serif;
  --seal:'AppleMyungjo','Batang','바탕','Nanum Myeongjo',serif;   /* 도장 글씨에만 */
  /* 판의 너비는 하나 — 모든 마당이 같은 가운데 판(--max)에 놓인다. 주공께서 "좌우가 너무 넓어 읽기 불편하다" 하셨다(10월 15일).
     예전엔 창 너비를 다 써 2000px 화면에서 글 한 줄과 좌우 칸 사이가 너무 멀었다. 띠 글만 창 끝까지 흐른다. */
  --max:1240px;
  /* 글자 사다리 — 판 너비(1240)에서 멈춘다. 본문 17~18, 제목은 본문의 세~네 곱절 안쪽 */
  --fs-mega:clamp(40px,5.6vw,80px);
  --fs-h2:clamp(30px,3.7vw,54px);
  --fs-h3:clamp(21px,1.8vw,27px);
  --fs-lead:clamp(18px,calc(.35vw + 13.4px),21px);
  --fs-body:clamp(17px,calc(.12vw + 15.4px),18px);
  --fs-small:clamp(15px,calc(.1vw + 14px),16px);
  --fs-tiny:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(16px,4vw,48px);
  --r-lg:22px; --r-md:14px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f5f3ee; --bg-2:#ebe8e1; --surface:#ffffff; --surface-2:#f1eee8;
    --line:rgba(22,19,15,.11); --line-2:rgba(22,19,15,.24);
    --fg:#16130f; --fg-2:#38342d; --dim:#57524a; --faint:#857f75;
    --gold:#c39220; --gold-fg:#8a5d06; --gold-soft:rgba(195,146,32,.14); --on-gold:#1a1405;
    --btn:#16130f; --on-btn:#f5f3ee;
    --shot-bg:#0a0a0a; --shadow:rgba(60,45,15,.2);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f5f3ee; --bg-2:#ebe8e1; --surface:#ffffff; --surface-2:#f1eee8;
  --line:rgba(22,19,15,.11); --line-2:rgba(22,19,15,.24);
  --fg:#16130f; --fg-2:#38342d; --dim:#57524a; --faint:#857f75;
  --gold:#c39220; --gold-fg:#8a5d06; --gold-soft:rgba(195,146,32,.14); --on-gold:#1a1405;
  --btn:#16130f; --on-btn:#f5f3ee;
  --shot-bg:#0a0a0a; --shadow:rgba(60,45,15,.2);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;letter-spacing:-.025em;line-height:1.22;font-weight:700}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:8px}
.wrap{margin-inline:auto;max-width:calc(var(--max) + 2 * var(--gut));padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 단추 — 꽉 찬 것 하나(먹빛), 테만 두른 것 하나. 금은 쓰지 않는다 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3.2em;padding:0 1.6em;border-radius:999px;border:0;
  background:var(--btn);color:var(--on-btn);font-weight:700;font-size:var(--fs-body);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),background .25s,box-shadow .25s;will-change:transform}
.btn:active{transform:scale(.97)}
.btn .arr{width:1.05em;height:1.05em;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn-sm{min-height:2.6em;padding:0 1.15em;font-size:var(--fs-small)}
.btn-lg{min-height:3.6em;padding:0 2em;font-size:var(--fs-body)}

/* 머리 줄 — 붙박이. 내려 굴리면 숨고 올려 굴리면 나온다 */
.top{position:fixed;inset:0 0 auto 0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:transform .45s var(--ease),border-color .3s}
.top.lined{border-bottom-color:var(--line)}
.top.away{transform:translateY(-100%)}
.top-in{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:calc(var(--fs-body) * 1.1);letter-spacing:-.02em}
.brand img{width:30px;height:30px}
.top-nav{display:flex;gap:4px;margin-left:auto}
.top-nav a{text-decoration:none;color:var(--dim);font-size:var(--fs-small);padding:.5em .85em;border-radius:999px;transition:color .2s,background .2s}
.top-nav a:hover{color:var(--fg);background:var(--line)}
@media (max-width:900px){ .top-nav{display:none} .top-in .btn{margin-left:auto} }

/* 머리 */
.hero{position:relative;padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,9vw,120px);overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-small);color:var(--dim);margin-bottom:28px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--fg)}
.mega{font-size:var(--fs-mega);letter-spacing:-.032em;line-height:1.16;font-weight:700}
.split .ln{display:block;overflow:hidden;padding-bottom:.06em}
.split .w{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block}
.mega .em{position:relative;display:inline-block}
.mega .em svg{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.3em;overflow:visible}
.mega .em path{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,32vw,420px));gap:clamp(32px,5vw,96px);align-items:end;margin-top:clamp(36px,5vw,64px)}
.lead{font-size:var(--fs-lead);color:var(--fg-2);line-height:1.75;max-width:32em}
.lead b{color:var(--fg);font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.greet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 24px;box-shadow:0 30px 60px -30px var(--shadow)}
.greet-top{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--dim)}
.greet-top img{width:26px;height:26px}
.greet-top b{color:var(--fg)}
.greet-top .when{margin-left:auto;font-variant-numeric:tabular-nums}
.greet p{margin-top:14px;font-size:calc(var(--fs-body) * 1.15);line-height:1.6;font-weight:600;min-height:3.2em}
.caret{display:inline-block;width:2px;height:1em;background:var(--fg);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.greet .picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pick{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:.5em 1em;font-size:var(--fs-small);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pick:hover{border-color:var(--fg)}
.pick.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cue{display:flex;align-items:center;gap:12px;margin-top:clamp(48px,6vw,80px);font-size:var(--fs-small);color:var(--faint)}
.cue i{position:relative;width:1px;height:44px;background:var(--line);overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(-100%);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{60%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:900px){ .hero-foot{grid-template-columns:minmax(0,1fr)} .hero{padding-top:calc(116px + env(safe-area-inset-top,0px))} }

/* 처음 뜰 때 글자가 밑에서 솟는다 — 스크립트가 돌 때만(html.go) */
.go .hero .split .ch{transform:translateY(108%);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--i) * 22ms + 120ms)}
@keyframes rise{to{transform:none}}
.go .mega .em path{stroke-dashoffset:420;animation:draw 1.1s var(--ease) 1.05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.go .hero-in > .eyebrow,.go .hero-foot{animation:fade 1s var(--ease) .55s both}
@keyframes fade{from{opacity:0;transform:translateY(24px)}}

/* 띠 글 — 굴림 빠르기만큼 빨라지고 기운다 */
.marq{padding-block:clamp(28px,4vw,56px);border-block:1px solid var(--line);overflow:hidden}
.marq-row{display:flex;white-space:nowrap;font-size:clamp(32px,4.6vw,76px);font-weight:700;letter-spacing:-.03em;line-height:1.25}
.marq-track{display:flex;flex:none;will-change:transform}
.marq-track span{display:inline-flex;align-items:center;gap:.4em;padding-right:.4em}
.marq-track span::after{content:"";width:.18em;height:.18em;border-radius:50%;background:currentColor;opacity:.5}
.marq-row.out{color:var(--faint)}   /* 둘째 줄은 흐린 채움 글 — 테두리 글(text-stroke)은 한글 획이 겹치는 자리마다 선이 비쳐 거슬렸다(10월 16일) */

/* 마당 공통 */
.sec{padding-block:clamp(88px,10vw,140px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,80px)}
.kicker{font-size:var(--fs-small);color:var(--fg-2);font-weight:600;display:flex;align-items:center;gap:.6em}
.kicker::before{content:"";width:22px;height:1px;background:var(--dim)}
.h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.2}
.sec-head .lead{max-width:38em}

/* 나타나기 — 스크립트가 돌 때만 숨겼다 보인다 */
/* 나타나기는 「스미듯 나타나기」(FadeContent, 안개 효과)가 맡는다 — 스크립트가 돌기 전엔 감춰 두고, 돌지 않으면 그대로 보인다 */
.go [data-reveal]{visibility:hidden}
.go [data-split] .w{overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.go [data-split] .ch{transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--i) * 16ms)}
.go [data-split].in .ch{transform:none}

/* 바로 해 보기 */
.try-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.steps{display:grid;gap:12px;counter-reset:s}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line);transition:opacity .4s}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;transition:background .35s,color .35s,border-color .35s}
.step b{display:block;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.35}
.step small{display:block;color:var(--fg-2);font-size:var(--fs-small);margin-top:4px}
.step.now .n{border-color:var(--fg)}
.step.done .n{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.step.done b{color:var(--dim)}
.try-note{margin-top:22px;font-size:var(--fs-small);color:var(--faint)}
.app{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,36px);overflow:hidden;
  box-shadow:0 40px 80px -40px var(--shadow)}
.app-top{display:flex;align-items:center;gap:12px}
.app-top img{width:32px;height:32px}
.app-top b{font-size:var(--fs-body)}
.app-top .cnt{margin-left:auto;font-size:var(--fs-small);color:var(--dim);border:1px solid var(--line-2);border-radius:999px;padding:.2em .8em;font-variant-numeric:tabular-nums}
.say{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface-2)}
.say::before{content:"신";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-small);font-weight:700;background:var(--fg);color:var(--bg)}
.say p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;font-weight:600;min-height:1.55em}
.gauge{height:6px;border-radius:9px;background:var(--line);margin-top:22px;overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:var(--gold);border-radius:9px;transition:width .7s var(--ease)}
.try-form{display:flex;gap:10px;margin-top:22px}
.try-form input{flex:1;min-width:0;height:3.2em;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);padding:0 1em;font:inherit;font-size:var(--fs-body)}
.try-form input:focus{outline:none;border-color:var(--fg)}
.try-form .btn{border-radius:12px;min-height:3.2em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.chips small{color:var(--faint);font-size:var(--fs-small);margin-right:4px}
.chip{border:1px dashed var(--line-2);background:transparent;border-radius:999px;padding:.4em .95em;font-size:var(--fs-small);color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s}
.chip:hover{color:var(--fg);border-color:var(--fg)}
.todo-list{margin-top:18px;display:grid}
.todo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 4px;border-top:1px solid var(--line);
  animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-10px)}}
.todo.doing{background:linear-gradient(90deg,var(--gold-soft),transparent 70%);box-shadow:inset 3px 0 0 var(--gold);padding-left:14px;border-radius:4px}
.box{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.box svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--ease)}
.box[aria-checked="true"]{background:var(--fg);border-color:var(--fg)}
.box[aria-checked="true"] svg{opacity:1;transform:none;color:var(--bg)}
.todo .t{font-size:var(--fs-body);font-weight:600;min-width:0}
.todo .t small{display:block;font-weight:400;font-size:var(--fs-small);color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
.todo.fin .t{color:var(--faint);text-decoration:line-through}
.now-btn{border:1px solid var(--line-2);background:transparent;border-radius:10px;min-height:2.6em;padding:0 1em;font-size:var(--fs-small);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.45em;transition:background .2s,border-color .2s,color .2s}
.now-btn:hover{border-color:var(--fg)}
.now-btn.on{border-color:var(--gold);color:var(--gold-fg);background:var(--gold-soft);font-weight:700}
.now-btn svg{width:.8em;height:.8em}
.todo.fin .now-btn{visibility:hidden}
.done-card{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:16px;padding:24px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .5s}
.done-card.on{opacity:1;pointer-events:auto}
.done-card h3{font-size:clamp(24px,2.4vw,34px)}
.done-card p{color:var(--fg-2);max-width:24em}
.done-card .acts{justify-content:center;margin-top:6px}
.seal{width:96px;height:96px;border:3px solid var(--gold);color:var(--gold-fg);border-radius:12px;display:grid;place-items:center;
  font-family:var(--seal);font-size:30px;font-weight:700;line-height:1.05;transform:rotate(-8deg)}
.on .seal{animation:stamp .6s var(--ease) both}
@keyframes stamp{from{transform:rotate(-8deg) scale(2.4);opacity:0}60%{transform:rotate(-8deg) scale(.92);opacity:1}}
@media (max-width:960px){ .try-grid{grid-template-columns:minmax(0,1fr)} .steps{order:2} }
@media (max-width:520px){ .now-btn .lbl-long{display:none} .todo{gap:10px} }
/* 지금 하는 일 띠 — 앱의 「오늘 할 일」 패 머리처럼: 하는 중이면 금 띠와 「✓ 마쳤다」·「‖ 멈추기」, 멈춤이면 「▶ 이어 하기」 */
.try-now{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem 1rem;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);transition:background .3s,box-shadow .3s}
.tn-top{grid-column:1;font-size:var(--fs-small);color:var(--dim);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.5em}
.tn-name{grid-column:1;min-width:0;font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1.35;overflow-wrap:anywhere}
.tn-acts{grid-column:2;grid-row:1 / 3;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tn-acts:empty{display:none}
.tn-acts button{border:1px solid var(--line-2);background:transparent;color:var(--fg);border-radius:var(--r);min-height:2.6em;padding:0 1em;font:inherit;font-size:var(--fs-small);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.tn-acts button:hover{border-color:var(--fg)}
.tn-acts button.main{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-fg);font-weight:700}
.tn-acts button.main:hover{background:var(--gold);color:var(--bg)}
.try-now[data-s="idle"] .tn-name{font-weight:400;font-size:var(--fs-small);color:var(--fg-2)}
.try-now[data-s="doing"]{box-shadow:inset 3px 0 0 var(--gold);background:linear-gradient(90deg,var(--gold-soft),transparent 75%);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.try-now[data-s="doing"] .tn-top{color:var(--gold-fg);font-weight:600}
.try-now[data-s="doing"] .tn-top::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--gold);animation:tnb 1.6s ease-in-out infinite}
.try-now[data-s="paused"]{box-shadow:inset 3px 0 0 var(--line-2)}
.try-now[data-s="paused"] .tn-name{color:var(--fg-2)}
@keyframes tnb{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .try-now .tn-top::before{animation:none!important} }
@media (max-width:520px){ .try-now{grid-template-columns:minmax(0,1fr)} .tn-acts{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:4px} }

/* 굴릴 때마다 한 걸음 — 붙박인 무대(.stage) 안에서 휠 한 번(손가락 한 번 밀기)에 한 장씩.
   빨리 여러 번 굴리셔도 한 장씩만 넘어가고, 처음·끝에서는 놓아 준다(스크립트의 「걸음마당」). */
.stepsec{position:relative}
.stage{position:relative}
/* 무대는 화면을 다 쓴다 — 붙박인 동안 다음 마당이 밑에 비치지 않게. 붙은 두 무대(여섯 비결 → 다른 점)는 끝에서 굴리면
   사이를 굴러 지나가지 않고 통째로 바꿔 넣는다(`바꿔넣기`). 주공께서 "애매하게 띄어지는 구간", "이때는 안 보였다가 휠을 내리면 통으로 교체되게" 하셨다(10월 15일) */
.live .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.live .stage.swap-in .stage-in{animation:swapin .6s var(--ease) both}
.live .stage.swap-in.up .stage-in{animation-name:swapdown}
@keyframes swapin{from{opacity:0;transform:translateY(56px)}}
@keyframes swapdown{from{opacity:0;transform:translateY(-56px)}}
.stage-in{display:flex;flex-direction:column;padding-block:clamp(96px,10vw,150px)}
.live .stage-in{width:100%;flex:1;min-height:0;padding-block:var(--pt,calc(clamp(74px,9vh,104px) + env(safe-area-inset-top,0px))) clamp(18px,3.5vh,40px)}

/* 여섯 비결 — 카드가 밑에서 하나씩 올라와 쌓인다.
   카드는 화면을 다 채우지 않고(높이 600 안쪽) 가운데에 — 주공께서 "그림이 너무 커서 부담된다, 내용은 적어 없어 보인다" 하셨다(10월 15일).
   그림은 앱 화면을 실제보다 조금 작게(0.7배 안팎), 글 쪽에는 쓰임 셋을 또렷이 둔다. */
.live .stage-in{justify-content:center}
.feat-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.feat-top .h2,.diff-top .h2{font-size:clamp(28px,3.2vw,46px)}
.feat-count{font-size:var(--fs-small);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.feat-count b{font-size:2em;color:var(--fg);font-weight:800;margin-right:.15em}
.segs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,.8vw,12px);margin-top:clamp(14px,2.4vh,26px)}
.segs button{display:grid;gap:8px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--dim);font-size:var(--fs-small);transition:color .3s}
.segs button i{display:block;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.segs button i b{display:block;height:100%;width:calc(var(--f,0) * 100%);background:var(--fg)}
.segs button.on{color:var(--fg);font-weight:700}
.deck{display:grid;gap:24px;margin-top:40px}
.live .deck{position:relative;flex:0 1 600px;min-height:0;display:block;margin-top:clamp(16px,3vh,32px)}
.fcard{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(22px,3vw,44px);border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.live .fcard{position:absolute;inset:0;transform-origin:50% 0;will-change:transform;box-shadow:0 -24px 70px -30px var(--shadow)}
.fcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--bg);opacity:var(--dim,0);pointer-events:none}
.fcard .ftxt{min-width:0}
.fcard .ftop{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.fcard .no{font-size:var(--fs-small);font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fcard .tag{display:inline-flex;font-size:var(--fs-small);color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;padding:.2em .8em}
.fcard h3{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;line-height:1.25}
.fcard p{font-size:var(--fs-lead);color:var(--fg-2);margin-top:14px;line-height:1.7}
.fcard ul{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.fcard li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-body);line-height:1.55}
.fcard li::before{content:"";width:20px;height:20px;margin-top:.12em;background:var(--fg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.6'/%3E%3Cpath d='M6.2 10.3l2.6 2.5 5-5.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.6'/%3E%3Cpath d='M6.2 10.3l2.6 2.5 5-5.4'/%3E%3C/svg%3E") center/contain no-repeat}
.shot{position:relative;align-self:center;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--shot-bg);min-height:0;box-shadow:0 30px 60px -34px var(--shadow)}
/* 그림은 늘리거나 옆을 자르지 않는다 — 너비에 맞추고, 길면 밑만 접는다 */
.shot img{width:100%;height:auto;transform:scale(var(--z,1));transform-origin:50% 0}
.shot.cut{max-height:520px}
.shot.cut::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;background:linear-gradient(transparent,var(--shot-bg));pointer-events:none}
.live .fcard .shot{max-height:100%}
.shot.contain{height:100%;max-height:520px}
.shot.contain img{height:100%;object-fit:contain}
@media (max-width:760px){
  .fcard{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .live .fcard{grid-template-rows:auto minmax(0,1fr);gap:16px}
  .live .fcard ul{display:none}
  .live .fcard p{font-size:var(--fs-body);margin-top:10px;line-height:1.6}
  .fcard .ftop{margin-bottom:10px}
  .shot:not(.contain) img{width:150%;max-width:none}   /* 휴대폰에선 앱 화면 왼쪽만 크게 — 통째로 줄이면 글이 안 읽힌다 */
  .segs span{display:none}
  .live .deck{flex:0 1 64svh}
}

/* 다른 점 — 보통 일정 앱과 제갈량을 나란히 놓고 견준다. 주공께서 "비교하는지 티도 안 난다, 좌우가 멀어 다 읽히지도 않는다" 하셨다(10월 15일).
   같은 판 안에 두 칸을 붙여 놓고 가운데에 VS, 걸음마다 한 가지(적기 · 말 걸기 · 밀린 일 · 기록)를 견주고 끝에 한눈에 표.
   보통 앱 쪽은 점선 테·흐린 글, 제갈량 쪽은 채운 패·또렷한 글. */
.diff-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.vs-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2)}
.vs-tabs button{border:0;background:none;border-radius:999px;padding:.5em 1.05em;font-size:var(--fs-small);font-weight:600;color:var(--dim);cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.vs-tabs button:hover{color:var(--fg)}
.vs-tabs button.on{background:var(--fg);color:var(--bg)}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,1.6vw,20px);align-items:stretch;margin-top:clamp(18px,3.4vh,36px)}
.side{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:clamp(18px,2.2vw,28px);min-width:0}
.side.them{border:1.5px dashed var(--line-2)}
.side.us{border:1px solid var(--line-2);background:var(--surface);box-shadow:0 40px 80px -40px var(--shadow)}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.who{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-body);white-space:nowrap}
.them .who{color:var(--dim)}
.who img{width:24px;height:24px}
.who .ph{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);display:grid;place-items:center}
.who .ph::after{content:"";width:10px;height:2px;background:var(--dim);box-shadow:0 -4px 0 var(--dim),0 4px 0 var(--dim)}
.score{position:relative;flex:1;height:1.4em;font-weight:800;font-size:clamp(19px,1.9vw,28px);letter-spacing:-.025em}
.score span{position:absolute;right:0;top:0;white-space:nowrap;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 12px))}
.them .score{color:var(--dim);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--line-2)}
.panes{position:relative;height:clamp(240px,36vh,330px);margin-top:18px}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px));pointer-events:none}
.vs-mid{display:grid;place-items:center}
.vs-mid span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg);font-weight:800;font-size:var(--fs-small);letter-spacing:.06em}
.diff-cap{position:relative;height:3.4em;margin-top:clamp(14px,2.4vh,26px);text-align:center;font-size:var(--fs-lead);font-weight:600;line-height:1.6}
.diff-cap span{position:absolute;inset:0;opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 10px))}
/* 칸 속 */
.mform{display:grid;gap:6px}
.mrow{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:10px;align-items:center;font-size:var(--fs-tiny);color:var(--dim)}
.mrow i{font-style:normal;border:1px solid var(--line-2);border-radius:8px;padding:.22em .7em;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmore{display:none;font-size:var(--fs-tiny);color:var(--dim)}
.uin{display:flex;gap:8px}
.uin i{flex:1;min-width:0;font-style:normal;border:1px solid var(--line-2);border-radius:10px;padding:.55em .9em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uin b{flex:none;border-radius:10px;padding:.55em 1em;background:var(--btn);color:var(--on-btn);font-size:var(--fs-small)}
.urow{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:12px;background:linear-gradient(90deg,var(--gold-soft),transparent 75%);box-shadow:inset 3px 0 0 var(--gold)}
.urow .bx{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2)}
.urow span{flex:1;min-width:0;font-weight:700}
.urow span small{display:block;font-weight:400;color:var(--fg-2);font-size:var(--fs-small)}
.urow b{flex:none;border:1px solid var(--gold);color:var(--gold-fg);border-radius:10px;padding:.35em .8em;font-size:var(--fs-small);white-space:nowrap}
.note{font-size:var(--fs-small);color:var(--fg-2)}
.them .note{color:var(--dim)}
.quiet{display:grid;place-items:center;gap:10px;text-align:center;padding:22px;border-radius:14px;border:1px solid var(--line);color:var(--dim)}
.quiet svg{width:34px;height:34px}
.quiet b{color:var(--fg-2);font-size:var(--fs-body)}
.ping{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid var(--line);font-size:var(--fs-small);color:var(--dim)}
.bub{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--surface-2)}
.bub::before{content:"신";flex:none;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--fg);color:var(--bg);font-size:var(--fs-small)}
.bub p{font-size:var(--fs-body);font-weight:600;line-height:1.55}
.bub-picks{display:flex;gap:8px;flex-wrap:wrap;padding-left:3.1em}
.bub-picks span{border:1px solid var(--line-2);border-radius:999px;padding:.3em .9em;font-size:var(--fs-small)}
.warn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line-2);font-size:var(--fs-small);color:var(--fg-2);font-weight:600}
.warn::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:1.5px solid currentColor;font-size:13px}
.carry{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.carry span{min-width:0;font-weight:600}
.carry small{display:block;color:var(--fg-2);font-size:var(--fs-small);font-weight:400}
.carry b{flex:none;border:1px solid var(--gold);color:var(--gold-fg);background:var(--gold-soft);border-radius:10px;padding:.4em .85em;font-size:var(--fs-small);white-space:nowrap}
.blank{display:grid;gap:14px;padding:18px;border-radius:14px;border:1px solid var(--line)}
.blank b{font-size:var(--fs-small);color:var(--fg-2)}
.blank i{display:block;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.bars{display:flex;align-items:flex-end;gap:8px;height:clamp(80px,12vh,120px);padding:14px 16px 0;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.bars i{flex:1;border-radius:5px 5px 0 0;background:var(--fg);opacity:.85;height:calc(var(--h) * var(--o,1))}
.bars i:last-child{background:var(--gold);opacity:1}
.wv{font-size:var(--fs-small);color:var(--fg-2);border-left:2px solid var(--fg);padding:4px 0 4px 12px}
.cmp{display:grid;gap:0}
.cmp li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;padding:.62em 0;border-bottom:1px solid var(--line);font-size:var(--fs-body);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp li:last-child{border-bottom:0}
.cmp li::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.them .cmp li{color:var(--dim);font-weight:500;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E")}
.us .cmp li{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.6'/%3E%3Cpath d='M6.2 10.3l2.6 2.5 5-5.4'/%3E%3C/svg%3E")}
/* 걸음 없이(움직임 줄임) 볼 때는 칸 속을 위아래로 늘어놓는다 */
.stepsec:not(.live) .panes{height:auto;display:grid;gap:22px}
.stepsec:not(.live) .pane{position:static;opacity:1;transform:none}
.stepsec:not(.live) .score span:not(:last-child),.stepsec:not(.live) .diff-cap span:not(:last-child){display:none}
.stepsec:not(.live) .score span,.stepsec:not(.live) .diff-cap span{position:static;opacity:1;transform:none;display:block;text-align:right}
.stepsec:not(.live) .diff-cap span{text-align:center}
.stepsec:not(.live) .diff-cap{height:auto}
@media (max-width:760px){
  .vs{grid-template-columns:minmax(0,1fr);gap:8px}
  .vs-mid{height:0;position:relative;z-index:2}
  .vs-mid span{width:40px;height:40px;font-size:13px}
  .side{padding:14px 16px;border-radius:18px}
  .side-head{padding-bottom:10px}
  .who{font-size:var(--fs-small)}
  .score{font-size:18px}
  .panes{height:clamp(150px,23svh,210px);margin-top:10px}
  .pane{gap:8px}
  .mrow:nth-child(n+4){display:none}
  .mmore{display:block}
  .bub-picks{display:none}
  .bub{padding:10px 12px}
  .bub p{font-size:var(--fs-small)}
  .urow{padding:10px 12px}
  .warn:nth-child(n+3),.carry:nth-child(n+2),.blank i:nth-child(n+4){display:none}
  .quiet{padding:12px}.quiet svg{width:26px;height:26px}
  .bars{height:70px}
  .cmp li{font-size:var(--fs-small);padding:.32em 0}
  .live .diff-cap{display:none}
  .vs-tabs{width:100%;justify-content:space-between}
  .vs-tabs button{padding:.45em .7em;font-size:var(--fs-tiny)}
  .diff-top .h2{font-size:clamp(26px,7vw,34px)}
}

/* 키 작은 휴대폰(360×640 따위) — 다른 점 두 칸이 화면 밑으로 넘치지 않게 줄인다 */
@media (max-width:760px) and (max-height:700px){
  .live .stage-in{padding-top:calc(58px + env(safe-area-inset-top,0px))}
  .diff-top .h2{font-size:24px}
  .vs{margin-top:12px}
  .panes{height:clamp(120px,19svh,150px)}
  .mrow:nth-child(n+3){display:none}
  .cmp li{padding:.2em 0}
}

/* 문답 일기 */
.diary{background:var(--bg-2);border-block:1px solid var(--line)}
.diary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.chat{display:flex;flex-direction:column;gap:14px;min-height:460px;padding:clamp(20px,2.4vw,32px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.msg{max-width:88%;padding:14px 18px;border-radius:18px;font-size:var(--fs-body);line-height:1.55;animation:pop .45s var(--ease)}
.msg.sin{align-self:flex-start;background:var(--surface-2);border-top-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--fg);color:var(--bg);border-top-right-radius:6px;font-weight:600}
.msg.typing{display:flex;gap:5px;padding:18px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);animation:bob 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-5px);opacity:.5}}
.chat .picks{display:flex;flex-wrap:wrap;gap:8px;animation:pop .45s var(--ease)}
.chat .again{align-self:flex-start;margin-top:6px}
.page{position:relative;padding:clamp(24px,3vw,44px);border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--bg)}
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.page-head h3{font-size:clamp(22px,2vw,30px)}
.page-head span{color:var(--dim);font-size:var(--fs-small)}
.week{display:flex;gap:8px;margin-top:18px}
.week i{flex:1;display:grid;justify-items:center;gap:6px;font-style:normal;font-size:var(--fs-tiny);color:var(--faint)}
.week i::after{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2)}
.week i.full::after{background:var(--fg);border-color:var(--fg)}
.week i.today{color:var(--fg);font-weight:700}
.week i.today.full::after{background:var(--gold);border-color:var(--gold)}
.weave{margin-top:26px;padding:20px 22px;border-left:2px solid var(--fg);background:var(--surface);border-radius:0 12px 12px 0}
.weave small{display:block;font-size:var(--fs-small);color:var(--dim);margin-bottom:8px}
.weave p{font-size:clamp(18px,1.5vw,21px);line-height:1.75;min-height:3.5em}
.weave p .frag{animation:ink .9s var(--ease)}
@keyframes ink{from{opacity:0;filter:blur(6px)}}
.weave p .wait{color:var(--faint)}
.qa{margin-top:22px;display:grid;gap:12px}
.qa div{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line);animation:pop .45s var(--ease)}
.qa dt{font-size:var(--fs-small);color:var(--dim)}
.qa dd{margin:0;font-size:var(--fs-body);font-weight:600}
.page-note{margin-top:20px;font-size:var(--fs-small);color:var(--faint)}
@media (max-width:900px){ .diary-grid{grid-template-columns:minmax(0,1fr)} .chat{min-height:0} }

/* 재미 바둑판 — 벼슬은 한 줄을 다 쓰고, 밑에 운수 · 옛이야기 · 먹 셋을 같은 키로.
   벼슬 카드는 그림 한 장이 아니라 손수 그린 카드(인물은 앱의 `인물그림` 그대로) — 벼슬을 올리면 인물·이름·셈·점 사다리가 함께 바뀐다
   (주공께서 "다음 벼슬을 올려도 왼쪽 그림이 바뀌지 않는다, 디자인도 별로" 하셨다, 10월 15일). 카드는 따로 쓰이는 그림이라 빛깔을 박아 둔다(앱의 품계 카드와 같다). */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-template-areas:"rank rank rank" "luck tale ink"}
.cell{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);overflow:hidden;background:var(--bg-2);display:flex;flex-direction:column}
.cell h3{font-size:var(--fs-h3)}
.cell > p,.cell .p{color:var(--fg-2);line-height:1.7;margin-top:8px}
.c-rank{grid-area:rank;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(22px,3.4vw,48px)}
.c-luck{grid-area:luck}.c-tale{grid-area:tale}.c-ink{grid-area:ink}
.tilt{perspective:900px}
.rcard{position:relative;border-radius:18px;padding:12px;color:#f4ead2;background:radial-gradient(110% 70% at 50% 28%,#3a2d0e 0%,#16120a 55%,#0d0b07 100%);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);will-change:transform;box-shadow:0 40px 80px -36px rgba(0,0,0,.7)}
.rcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,240,200,.14),transparent 55%);pointer-events:none}
.rc-frame{position:relative;border:1.5px solid #d4a72c;border-radius:10px;padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center}
.rc-frame::before{content:"";position:absolute;inset:4px;border:1px solid rgba(212,167,44,.35);border-radius:7px;pointer-events:none}
.rc-top{font-size:13px;letter-spacing:.32em;font-weight:700;color:#f0d27a;padding-left:.32em}
.rc-date{font-size:12px;color:#bfb293;margin-top:2px}
.rc-fig{position:relative;width:64%;aspect-ratio:400/440;margin-top:6px}
.rc-fig::before{content:"";position:absolute;inset:-4% -8% 10%;border-radius:50%;background:radial-gradient(circle,rgba(240,210,122,.3),rgba(240,210,122,0) 66%);border:1px dashed rgba(212,167,44,.3)}
.rc-fig svg{position:relative;display:block;width:100%;height:100%}
.rc-fig svg.in{animation:figin .8s var(--ease) both}
@keyframes figin{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(4px)}}
.rc-name{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:-2px;min-height:1.3em;font-size:40px;line-height:1.2;font-weight:800;letter-spacing:.06em}
.rc-name span{background:linear-gradient(180deg,#fff0bf,#d9a62c 70%,#b9861b);-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-name span.in{animation:figin .6s var(--ease) both}
.rc-seal{font-family:var(--seal);font-size:13px;line-height:1.05;font-weight:700;color:#e0574b;border:2px solid #e0574b;border-radius:5px;padding:3px 4px;transform:rotate(-8deg);letter-spacing:0}
.rc-seal.on{animation:stamp .6s var(--ease) both}
.rc-desc{font-size:13px;color:#cbbf9f;margin-top:2px;min-height:1.6em}
.rc-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:12px;border:1px solid rgba(212,167,44,.55);border-radius:8px}
.rc-stats span{display:grid;padding:8px 4px;font-size:12px;color:#bfb293}
.rc-stats span + span{border-left:1px solid rgba(212,167,44,.35)}
.rc-stats b{font-size:22px;color:#f4ead2;font-variant-numeric:tabular-nums;line-height:1.3}
.rc-dots{position:relative;display:flex;justify-content:space-between;align-items:center;width:92%;margin-top:14px;height:14px}
.rc-dots::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:rgba(212,167,44,.35)}
.rc-dots i{position:relative;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(212,167,44,.6);background:#16120a;transition:background .4s,transform .4s}
.rc-dots i.on{background:#d4a72c;border-color:#d4a72c}
.rc-dots i.cur{transform:scale(1.6);background:#f0d27a;border-color:#f0d27a;box-shadow:0 0 0 3px rgba(240,210,122,.2)}
.rank-side{min-width:0}
.rank-side h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em}
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:24px}
.ladder button{border:1px solid var(--line);background:transparent;border-radius:12px;padding:10px 4px;text-align:center;font-size:var(--fs-small);font-weight:700;color:var(--fg-2);cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.ladder button:hover{border-color:var(--fg);color:var(--fg)}
.ladder small{display:block;font-size:var(--fs-tiny);font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.ladder .past{border-color:var(--line-2);color:var(--fg)}
.ladder .cur{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-fg)}
.ladder .cur small{color:var(--gold-fg)}
.rank-ctl{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:22px}
.rank-say{margin-top:14px;min-height:1.6em;font-weight:600}
.sex{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-small)}
.sex span{color:var(--dim);padding:0 .5em 0 .6em}
.sex button{border:0;background:none;border-radius:999px;padding:.35em .9em;cursor:pointer;color:var(--dim);font-weight:600}
.sex button.on{background:var(--fg);color:var(--bg)}
.ring{display:block;width:min(150px,56%);margin:18px auto 6px;overflow:visible}
.ring circle{fill:none;stroke-width:9}
.ring .bgc{stroke:var(--line)}
.ring .fgc{stroke:var(--gold);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.6s var(--ease)}
.ring text{fill:var(--fg);font-size:30px;font-weight:800;text-anchor:middle;font-family:var(--sans)}
.ring .unit{font-size:13px;fill:var(--dim);font-weight:500}
.luck-name{text-align:center;font-weight:700;min-height:1.6em}
.luck-say{text-align:center;color:var(--fg-2);font-size:var(--fs-small);min-height:3em;margin-top:2px}
.cell .center{display:flex;justify-content:center;margin-top:auto;padding-top:14px}
.flip{perspective:1000px;margin-top:18px;height:220px}
.flip-in{position:relative;width:100%;height:100%;transition:transform .9s var(--ease);transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;border:1px solid var(--line-2);display:grid;place-items:center;padding:20px;text-align:center;background:var(--bg)}
.face.back{transform:rotateY(180deg);place-items:start;text-align:left;align-content:start;gap:8px;overflow:auto}
.face.back b{font-size:calc(var(--fs-body) * 1.12)}
.face.back small{color:var(--dim)}
.face.back p{color:var(--fg-2);font-size:var(--fs-small)}
.sticks{display:flex;gap:10px;align-items:flex-end;height:110px}
.sticks i{width:9px;border-radius:5px;background:var(--fg);opacity:.85;animation:shake 2.4s ease-in-out infinite}
.sticks i:nth-child(1){height:90px;transform:rotate(-8deg)}.sticks i:nth-child(2){height:110px;animation-delay:.2s}.sticks i:nth-child(3){height:96px;transform:rotate(7deg);animation-delay:.4s}.sticks i:nth-child(4){height:84px;transform:rotate(12deg);animation-delay:.6s}
@keyframes shake{50%{translate:0 -6px}}
.ink-pad{position:relative;flex:1;min-height:220px;margin-top:18px;border-radius:16px;border:1px dashed var(--line-2);touch-action:none;overflow:hidden;cursor:crosshair;background:var(--bg)}
.ink-pad canvas{position:absolute;inset:0;width:100%;height:100%}
.ink-pad span{position:absolute;inset:auto 0 16px 0;text-align:center;color:var(--dim);font-size:var(--fs-small);pointer-events:none;transition:opacity .4s}
.ink-pad.used span{opacity:0}
@media (max-width:960px){
  .bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"rank rank" "luck tale" "ink ink"}
  .c-rank{grid-template-columns:minmax(0,1fr)} .c-rank .tilt{width:min(100%,300px);margin-inline:auto}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"rank" "luck" "tale" "ink"}
  .ladder{gap:6px} .ladder button{font-size:var(--fs-tiny);padding:8px 2px}
}

/* 지킴 — 큰 말 한 덩이, 밑에 그림(기기 ↔ 바깥 서버)과 네 가지를 같은 키의 칸으로 */
.scrub{font-size:clamp(26px,3vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.4;max-width:24em}
.scrub .w{color:var(--fg);opacity:var(--o,.18);transition:opacity .2s linear}
.safe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:clamp(40px,5vw,64px);align-items:stretch}
.vault{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,.62fr);align-items:center;padding:clamp(20px,2.6vw,32px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2)}
.dev{border:1px solid var(--line-2);border-radius:16px;padding:16px;background:var(--bg);display:grid;gap:8px}
.dev > b{font-size:var(--fs-body);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.dev > b svg{width:20px;height:20px}
.rec{border-radius:10px;background:var(--surface);border:1px solid var(--line);padding:9px 12px;font-size:var(--fs-small);display:flex;justify-content:space-between;gap:8px}
.rec span{color:var(--dim)}
.wire{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);margin:0 6px}
.wire i{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--fg);animation:bounce 2.6s var(--ease) infinite}
.wire i:nth-child(2){animation-delay:.9s}.wire i:nth-child(3){animation-delay:1.8s}
/* 점은 서버에 닿아 스러진다 — 예전엔 벽에 막혀 되돌아왔으나(어디로도 안 보냄), 이제 맞출 때 잠근 채로 가니(10월 21일) */
@keyframes bounce{0%{left:0;opacity:0}15%{opacity:1}75%{left:calc(100% - 9px);opacity:1}100%{left:calc(100% - 9px);opacity:0}}
.ext{border:1.5px dashed var(--line-2);border-radius:16px;padding:18px 12px;text-align:center;color:var(--dim);display:grid;gap:6px;justify-items:center}
.ext svg{width:34px;height:34px}
.ext b{color:var(--fg-2);font-size:var(--fs-small)}
.ext small{font-size:var(--fs-tiny)}
.safe-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.safe-pts li{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2vw,26px);display:grid;gap:8px;align-content:start}
.safe-pts svg{width:28px;height:28px;margin-bottom:4px}
.safe-pts b{font-size:calc(var(--fs-body) * 1.12);letter-spacing:-.02em}
.safe-pts span{color:var(--fg-2);font-size:var(--fs-body);line-height:1.6}
@media (max-width:960px){ .safe-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .vault{grid-template-columns:minmax(0,1fr);gap:0} .wire{width:2px;height:60px;margin:6px auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
  .wire i{left:50%!important;margin-left:-4.5px;animation-name:bouncev}
  .safe-pts{grid-template-columns:minmax(0,1fr)}
}
@keyframes bouncev{0%{top:0;opacity:0}15%{opacity:1}75%{top:calc(100% - 9px);opacity:1}100%{top:calc(100% - 9px);opacity:0}}

/* 물음과 답 */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,1.4vw,20px);font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:var(--fg);transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 0 24px;color:var(--fg-2);line-height:1.75;font-size:var(--fs-body);max-width:40em}

@media (max-width:900px){ .faq{grid-template-columns:minmax(0,1fr)} }

/* 맺음 */
.end{padding-block:clamp(110px,13vw,180px);text-align:left}
.end .mega{max-width:12em}
.end .acts{margin-top:44px;align-items:center}
.end .acts small{color:var(--dim);font-size:var(--fs-small)}
.foot{border-top:1px solid var(--line);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));color:var(--faint);font-size:var(--fs-small)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.foot .brand{color:var(--fg);font-size:var(--fs-body)}
.foot .brand img{width:24px;height:24px}

/* 깃털 마우스 — 앱과 같은 깃털. 누를 곳 위에서는 살랑인다 */
.quill{position:fixed;left:0;top:0;width:40px;height:40px;z-index:100;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.quill svg{width:100%;height:100%;transform-origin:3.7px 36.7px;transition:transform .3s var(--ease)}
.quill .body{fill:var(--fg);stroke:var(--bg);stroke-width:1.6;stroke-linejoin:round}
.quill .vein{fill:none;stroke:var(--bg);stroke-width:1;stroke-linecap:round}
.quill-on .quill{opacity:1}
.quill-on .quill.away{opacity:0}   /* 창 밖으로 나가면 그 자리에서 사라지고, 돌아오면 마우스 자리에서 다시 뜬다 */
.quill-on,.quill-on *{cursor:none!important}
.quill.hot svg{animation:sway 1.1s ease-in-out infinite}
.quill.down svg{transform:rotate(-14deg) scale(.92)}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .go .split .ch{transform:none!important;opacity:1!important}
  .go [data-reveal]{visibility:visible!important}
}

/* ════════ 새 옷 (10월 16일) ════════
   getartcraft.com 의 결 — 가운데 한 기둥(세로 실선 둘) 안에 마당을 쌓고, 칸은 1px 실선을 함께 쓰는 격자로 나눈다. 모서리는 거의 각지게(3~4px).
   주공께서 시안을 보시고 "이 디자인으로 해 달라, 오른쪽 자 막대도 제대로" 하셨다. 글꼴(Pretendard)은 그대로 둔다.
   예전 결(둥근 알약 단추·떠 있는 패·큰 그림자)은 걷었다. 위의 옛 꾸밈은 여기서 덮어쓴다 — 새로 고칠 것은 이 묶음에 적는다. */
html{font-size:clamp(16px,calc(9.5px + .45vw),26px)}
:root{
  --bg:#0c0c0e; --bg-2:#0c0c0e; --surface:#111114; --surface-2:#18181c; --press:#141417; --hover:#18181c;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.2);
  --fg:#f3f2ee; --fg-2:#bebcb5; --dim:#8f8d87; --faint:#77756f;
  --gold:#d4a72c; --gold-fg:#e2bd57; --gold-soft:rgba(212,167,44,.12); --on-gold:#1a1405;
  --btn:#f3f2ee; --on-btn:#0c0c0e; --shadow:rgba(0,0,0,.5);
  --r:3px; --r-md:3px; --r-lg:4px;
  --col:max(70rem,80vw);
  --gut:clamp(16px,2.4vw,2.75rem);
  --fs-mega:clamp(2.6rem,6.2vw,5.25rem);
  --fs-h2:clamp(1.9rem,3.6vw,3.1rem);
  --fs-h3:clamp(1.2rem,1.5vw,1.45rem);
  --fs-lead:clamp(1.05rem,1.15vw,1.2rem);
  --fs-body:1rem; --fs-small:.9rem; --fs-tiny:.8rem;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#f5f5f2; --bg-2:#f5f5f2; --surface:#fbfbf9; --surface-2:#ececE8; --press:#ececE8; --hover:#e7e7e2;
  --line:rgba(17,17,15,.11); --line-2:rgba(17,17,15,.24);
  --fg:#141412; --fg-2:#45443f; --dim:#64635d; --faint:#7a7973;
  --gold:#a16207; --gold-fg:#8a5306; --gold-soft:rgba(161,98,7,.1); --on-gold:#fff;
  --btn:#141412; --on-btn:#f5f5f2; --shadow:rgba(30,30,25,.18);
} }
:root[data-theme="light"]{
  --bg:#f5f5f2; --bg-2:#f5f5f2; --surface:#fbfbf9; --surface-2:#ececE8; --press:#ececE8; --hover:#e7e7e2;
  --line:rgba(17,17,15,.11); --line-2:rgba(17,17,15,.24);
  --fg:#141412; --fg-2:#45443f; --dim:#64635d; --faint:#7a7973;
  --gold:#a16207; --gold-fg:#8a5306; --gold-soft:rgba(161,98,7,.1); --on-gold:#fff;
  --btn:#141412; --on-btn:#f5f5f2; --shadow:rgba(30,30,25,.18);
}
:focus-visible{outline:2px solid var(--gold);border-radius:var(--r)}
.wrap{max-width:var(--col)}
/* 기둥 — 쪽 맨 위에서 맨 밑까지 세로 실선 둘 */
main{position:relative}
main::before{content:"";position:absolute;inset:0 auto 0 50%;width:min(100%,var(--col));transform:translateX(-50%);border-inline:1px solid var(--line);pointer-events:none;z-index:0}
main > section,main > .greet-strip{position:relative;border-top:1px solid var(--line)}
main > section:first-child{border-top:0}
.foot{position:relative}
.foot::before{content:"";position:absolute;inset:0 auto 0 50%;width:min(100%,var(--col));transform:translateX(-50%);border-inline:1px solid var(--line);pointer-events:none}
.bleed{margin-inline:calc(-1 * max(var(--gut),env(safe-area-inset-left,0px)))}

/* 단추 — 각진 두 층 */
.btn{border-radius:var(--r);min-height:2.85em;padding:0 1.3em;font-size:var(--fs-small);font-weight:600;letter-spacing:.01em}
.btn-lg{min-height:3.1em;padding:0 1.5em;font-size:var(--fs-body)}
.btn-sm{min-height:2.5em;padding:0 1em;font-size:var(--fs-small)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--hover)}

/* 머리 줄 */
.top{background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid var(--line)}
.top-in{height:3.6rem;gap:1.25rem}
.brand{font-size:1.05rem}
.brand img{width:1.45rem;height:1.45rem}
.top-nav{margin-left:.5rem;gap:2px}
.top-nav a{border-radius:var(--r);font-size:var(--fs-small);color:var(--fg-2);padding:.35em .75em}
.top-nav a:hover{background:var(--hover);color:var(--fg)}
.top-nav a.on{background:var(--btn);color:var(--on-btn);font-weight:600}
.top-in > .btn{margin-left:auto;min-height:2.3rem}

/* 머리 — 가운데 이름과 한 줄, 뒤에 흐르는 칸 그물(ShapeGrid) */
.hero{min-height:min(48rem,86vh);padding:calc(3.6rem + env(safe-area-inset-top,0px)) 0 0;display:grid;place-items:center}
.hero-grid{position:absolute;inset:0;--grid-line:var(--line-2);--grid-hover:var(--gold)}
.shape-grid{overflow:hidden}
.shape-grid canvas{position:absolute;top:0;left:0;display:block}
.shape-grid .sg-lines{position:absolute;will-change:transform;pointer-events:none;opacity:.72}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse 36% 34% at 50% 52%,var(--bg) 35%,transparent 100%);pointer-events:none;opacity:.88}
.hero-in{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:1.15rem;padding-block:3rem 4.5rem;pointer-events:none}
.hero-in > *{pointer-events:auto}
.hero .mark{display:flex;align-items:center;gap:.22em;font-size:clamp(3rem,8.4vw,6.4rem);font-weight:900;letter-spacing:-.045em;line-height:1}
.hero .mark img{width:.82em;height:.82em}
.hero .mega{font-size:clamp(1.55rem,3.2vw,2.6rem);letter-spacing:-.025em;line-height:1.35;font-weight:700}
.hero .mega .ln{display:inline}
.hero .mega .ln + .ln::before{content:" "}
.hero .mega .light{font-weight:300;color:var(--fg-2)}
.hero .mega .em svg{display:none}
.hero .lead{max-width:31em;font-size:var(--fs-body);color:var(--fg-2)}
.hero .acts{justify-content:center;margin-top:.4rem}
.hero .meta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;font-size:var(--fs-tiny);letter-spacing:.08em;color:var(--dim)}
.hero .meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:7px;vertical-align:2px}
.go .hero .mark{animation:fade 1s var(--ease) .1s both}
.go .hero-in > .lead,.go .hero-in > .acts,.go .hero-in > .meta{animation:fade 1s var(--ease) .55s both}

/* 문안 인사 띠 — 머리 밑 한 줄 */
.greet-strip .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem 2rem;padding-block:1.1rem}
.greet{background:none;border:0;border-radius:0;padding:0;box-shadow:none;display:contents}
.greet-top{font-size:var(--fs-tiny);letter-spacing:.06em;white-space:nowrap}
.greet-top img{width:1.3rem;height:1.3rem}
.greet-main{display:flex;align-items:center;gap:.75rem 1.25rem;flex-wrap:wrap;min-width:0}
.greet p{margin:0;font-size:var(--fs-body);min-height:0;font-weight:600}
.greet .picks{margin:0}
.pick{border-radius:var(--r);font-size:var(--fs-small);padding:.4em .9em}

/* 띠 글 — 낮고 가지런하게 */
.marq{padding-block:.9rem;border-block:1px solid var(--line)}
.marq-row{font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:600;letter-spacing:-.01em}
.marq-row + .marq-row{margin-top:.35rem}
.marq-track span{gap:.9em;padding-right:.9em}
.marq-track span::after{width:5px;height:5px;opacity:1;background:var(--dim)}

/* 마당 머리 — 「01 / 이름」 줄, 큰 제목, 풀이 */
main{counter-reset:마당}
.sec{padding-block:clamp(3.5rem,6vw,6rem)}
.sec-head{gap:1.1rem;margin-bottom:clamp(2rem,3.6vw,3.5rem)}
.kicker{font-size:var(--fs-tiny);letter-spacing:.08em;color:var(--dim);font-weight:500;gap:.5em}
.kicker::before{counter-increment:마당;content:counter(마당,decimal-leading-zero) " /";width:auto;height:auto;background:none;color:var(--fg-2);font-weight:700}
.h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.18;max-width:16em}
.h2 .light{font-weight:300;color:var(--fg-2)}

/* 바로 해 보기 */
.step{padding:1.15rem 0}
.step .n{width:2.4rem;height:2.4rem;border-radius:var(--r)}
.app{border-radius:var(--r-lg);background:var(--surface);box-shadow:none;border-color:var(--line-2)}
.app-top .cnt{border-radius:var(--r)}
.say{border-radius:var(--r);background:var(--press)}
.say::before{border-radius:var(--r)}
.gauge,.gauge i{border-radius:2px}
.gauge{height:4px}
.try-form input,.try-form .btn{border-radius:var(--r)}
.chip{border-radius:var(--r)}
.todo.doing{border-radius:0}
.box{border-radius:3px}
.now-btn{border-radius:var(--r)}
.seal{border-radius:6px}
/* 바로 해 보기 — 앱의 「오늘 할 일」 패와 같은 꼴(10월 22일, 주공께서 "이 부분 아직 초기 형태" 하셨다).
   걸음 셋은 위에 한 줄, 밑에 체험 칸을 넓게. 넓으면 패 안을 좌우로(왼쪽 지금 하는 일 띠·막대·적는 칸 / 오른쪽 할 일 줄), 앱과 같은 차례.
   신의 말풍선은 앱에 없는 것이라 패 밖 위에 둔다 */
.try-grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,2.6vw,2.4rem)}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1rem,2.4vw,2.4rem)}
.step{border-top:1px solid var(--line);border-bottom:0!important}
.step b{font-size:clamp(17px,1.35vw,20px)}
.try-demo{display:grid;gap:12px;min-width:0}
.try-demo .say{margin:0}
.try-demo .try-note{margin-top:6px}
.app{padding:0}
.app-top{padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);gap:10px}
.app-top b{font-size:calc(var(--fs-body) * 1.12)}
.app-top .kbd{margin-left:auto;font-size:12px;font-weight:700;color:var(--fg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:.1em .5em;background:var(--press)}
.d-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);border-top:1px solid var(--line)}
.d-left{padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);border-right:1px solid var(--line);min-width:0}
.try-now{margin:calc(-1 * clamp(16px,1.8vw,22px)) calc(-1 * clamp(18px,2vw,26px)) 0;border:0;border-bottom:1px dashed var(--line-2);border-radius:0;padding:16px clamp(18px,2vw,26px)}
.try-now[data-s="doing"]{border-bottom-color:transparent}
.tn-acts{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:8px}
.try-now{grid-template-columns:minmax(0,1fr)}
.gauge-row{display:flex;align-items:center;gap:14px;margin-top:22px}
.gauge-row .gauge{flex:1;margin:0;height:6px}
.gauge-row span{flex:none;font-size:var(--fs-small);color:var(--fg-2);font-variant-numeric:tabular-nums}
.gauge-row span b{color:var(--fg)}
.try-form{margin-top:16px}
.todo-list{margin:0;padding:6px clamp(14px,1.6vw,22px) 10px;align-content:start}
.todo{grid-template-columns:auto auto minmax(0,1fr) auto;padding:14px 0;border-top:0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo.doing{margin-left:calc(-1 * clamp(14px,1.6vw,22px));padding-left:calc(clamp(14px,1.6vw,22px) - 2px);background:none}
.grip{width:10px;height:16px;opacity:.55;background:radial-gradient(circle,var(--fg-2) 1.2px,transparent 1.6px) 0 0/5px 5.4px}
.box{width:20px;height:20px}
.box svg{width:13px;height:13px}
.todo .t{font-weight:500}
.todo.star .t{font-weight:700}
.acts-r{display:inline-flex;align-items:center;gap:6px}
.star-btn{width:36px;height:36px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r);color:var(--fg-2);cursor:pointer;padding:0}
.star-btn:hover{color:var(--fg);background:var(--press)}
.star-btn svg{width:20px;height:20px}
.star-btn[aria-pressed="true"]{color:var(--gold)}
.star-btn[aria-pressed="true"] svg{fill:currentColor}
.todo.fin .star-btn{visibility:hidden}
.todo.doing .now-btn{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.todo.fin .t{text-decoration:line-through}
@media (max-width:860px){
  .steps{grid-template-columns:minmax(0,1fr);order:2}
  .d-grid{grid-template-columns:minmax(0,1fr)}
  .d-left{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .try-form{flex-wrap:wrap} .try-form input{flex:1 1 100%} .try-form .btn{flex:1}
  .todo{grid-template-columns:auto auto minmax(0,1fr)} .acts-r{grid-column:3;justify-self:end}
}

/* 여섯 비결 — 세 줄기 칸 격자. 칸마다 이름표 줄 · 앱 화면 · 글 */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.fcell{position:relative;display:grid;grid-template-rows:auto auto 1fr;background:var(--bg);min-width:0;transition:background .2s}
.ftag{display:flex;justify-content:space-between;gap:.75rem;padding:.7rem 1rem;font-size:var(--fs-tiny);letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.ftag{flex-wrap:wrap;min-width:0}
.ftag b{color:var(--fg-2);font-weight:700;margin-right:.4em;transition:color .2s}
.fcell .pic{position:relative;aspect-ratio:16/10;overflow:hidden;border-block:1px solid var(--line);background:var(--press);margin:0}
.fcell .pic img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .7s var(--ease)}
.fcell .pic.whole img{object-fit:contain;object-position:center;padding:.6rem}
.fcell .ftxt{padding:1.1rem 1.15rem 1.5rem;display:grid;gap:.5rem;align-content:start}
.fcell h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.35}
.fcell p{font-size:var(--fs-small);color:var(--fg-2);line-height:1.7}
.fcell ul{margin-top:.35rem;padding-top:.75rem;border-top:1px solid var(--line);display:grid;gap:.4rem}
.fcell li{position:relative;padding-left:1.1rem;font-size:var(--fs-tiny);color:var(--fg-2);line-height:1.6}
.fcell li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:1px;background:var(--dim)}
.fcell:hover{background:var(--hover)}
.fcell:hover .pic img{transform:scale(1.04)}
.fcell:hover .ftag b{color:var(--gold-fg)}
.fgrid .fcell[data-reveal]{visibility:visible}

/* 다른 점 */
.vs-tabs{border-radius:5px;background:transparent;padding:3px;gap:2px}
.vs-tabs button{border-radius:var(--r)}
.vs-tabs button.on{background:var(--btn);color:var(--on-btn)}
.side{border-radius:var(--r-lg)}
.side.us{background:var(--surface);box-shadow:none}
.vs-mid span{border-radius:var(--r);width:3rem;height:3rem}
.mrow i,.uin i,.uin b,.urow b,.carry b,.who .ph,.urow .bx{border-radius:var(--r)}
.urow,.quiet,.ping,.warn,.carry,.blank,.bars{border-radius:var(--r)}
.urow{border-radius:0}
.bub{border-radius:var(--r);background:var(--press)}
.bub::before{border-radius:var(--r)}
.bub-picks span{border-radius:var(--r)}
.bars i{border-radius:2px 2px 0 0}
.live .stage-in{padding-top:var(--pt,calc(4.6rem + env(safe-area-inset-top,0px)))}

/* 문답 일기 */
.diary{background:transparent;border-block:0}
.chat,.page{border-radius:var(--r-lg)}
.chat{background:var(--surface)}
.msg{border-radius:var(--r)}
.msg.sin{background:var(--press);border-top-left-radius:var(--r)}
.msg.me{border-top-right-radius:var(--r)}
.weave{border-radius:0;background:var(--press);border-left-color:var(--gold)}

/* 재미 — 칸 사이 실선 하나 */
.bento{gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{border:0;border-radius:0;background:var(--bg)}
.ladder button{border-radius:var(--r)}
.sex{border-radius:5px;padding:3px;gap:2px}
.sex button{border-radius:var(--r)}
.sex button.on{background:var(--btn);color:var(--on-btn)}
.face{border-radius:var(--r-lg)}
.sticks i{border-radius:2px}
.ink-pad{border-radius:var(--r-lg)}

/* 지킴 */
.vault{border-radius:var(--r-lg);background:transparent}
.dev,.ext{border-radius:var(--r-lg)}
.rec{border-radius:var(--r);background:var(--press)}
.safe-pts{gap:1px;background:var(--line);border:1px solid var(--line)}
.safe-pts li{border:0;border-radius:0;background:var(--bg)}
.safe-pts svg{color:var(--gold-fg)}

/* 물음과 답 */
.faq summary{font-size:clamp(1.05rem,1.25vw,1.2rem);padding:1.15rem 0}

/* 맺음 — 가운데 */
.end{padding-block:clamp(5rem,9vw,8.5rem);text-align:center}
.end .wrap{display:grid;justify-items:center}
.end .mega{font-size:var(--fs-mega);max-width:13em}
.end .acts{justify-content:center;margin-top:2.2rem}
.end .acts small{flex-basis:100%;text-align:center}

/* 밑줄 */
.foot{padding-block:0;border-top:1px solid var(--line)}
.foot .wrap{padding-block:1.6rem calc(1.6rem + env(safe-area-inset-bottom,0px))}

/* 여섯 비결의 그림 — 앱 화면 사진 대신 한 가지만 크게 보이는 단순한 그림(10월 16일, 주공께서 "너무 빽빽해 숨이 막힌다, 쉬운 그림으로" 하셨다).
   칸마다 그 비결의 한 장면만: 한 줄 적고 「하는 중」 · 「오늘로」 · 이어진 달력 막대 · 보고서 셈 · 공유 · 먼저 건네는 인사. 글씨는 크고 가짓수는 둘셋 */
:root{--k1:#6f8df0;--k2:#3fb98a;--k3:#d9894a}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--k1:#3b5fd0;--k2:#16865c;--k3:#b4621f} }
:root[data-theme="light"]{--k1:#3b5fd0;--k2:#16865c;--k3:#b4621f}
.fcell .pic.ill{display:grid;place-items:center;padding:1.6rem clamp(1rem,2.4vw,2.2rem);font-size:var(--fs-small)}
.ill > *{width:100%;max-width:23rem;transition:transform .5s var(--ease)}
.fcell:hover .ill > *{transform:translateY(-3px)}
.i-stack{display:grid;gap:.75rem}
.i-cap{font-size:var(--fs-tiny);letter-spacing:.06em;color:var(--dim)}
.i-in{display:flex;gap:.5rem}
.i-in span{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:var(--r);padding:.55em .8em;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-in b{flex:none;border-radius:var(--r);padding:.55em .9em;background:var(--btn);color:var(--on-btn);font-weight:600}
.i-row{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.i-row.doing{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));box-shadow:inset 3px 0 0 var(--gold);background:linear-gradient(90deg,var(--gold-soft),var(--bg) 80%)}
.i-box{flex:none;width:1.05rem;height:1.05rem;border:1.5px solid var(--line-2);border-radius:3px}
.i-row span{flex:1;min-width:0;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-row small{display:block;font-weight:400;font-size:var(--fs-tiny);color:var(--dim)}
.i-row em{flex:none;font-style:normal;font-size:var(--fs-tiny);font-weight:700;border:1px solid var(--gold);color:var(--gold-fg);border-radius:var(--r);padding:.35em .6em}
.i-row em.gold{background:var(--gold-soft)}
.i-now{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.2rem .7rem;padding:.8rem .9rem;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:var(--r);box-shadow:inset 3px 0 0 var(--gold);background:linear-gradient(90deg,var(--gold-soft),var(--bg) 80%)}
.i-now small{grid-column:1;font-size:var(--fs-tiny);color:var(--gold-fg);font-weight:600}
.i-now b{grid-column:1;min-width:0;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-now em{grid-column:2;grid-row:1 / 3;font-style:normal;font-size:var(--fs-tiny);font-weight:700;border:1px solid var(--gold);color:var(--gold-fg);background:var(--gold-soft);border-radius:var(--r);padding:.35em .6em;white-space:nowrap}
.i-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto repeat(3,2.1rem);gap:6px 0;max-width:24rem}
.i-cal span{text-align:center;font-size:var(--fs-tiny);color:var(--dim);padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.i-cal i{align-self:center;margin:0 3px;padding:.3em .55em;border-radius:var(--r);font-style:normal;font-size:var(--fs-tiny);font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--k) 30%,transparent);box-shadow:inset 0 0 0 1px var(--k)}
.i-cal i.left{background:transparent}
.i-doc{display:grid;gap:.6rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.i-big{font-size:var(--fs-small);color:var(--fg-2)}
.i-big strong{font-size:2.1em;font-weight:800;color:var(--fg);letter-spacing:-.03em;margin-right:.15em}
.i-bars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem .8rem;align-items:center;font-size:var(--fs-tiny);color:var(--fg-2)}
.i-bars i{height:.55rem;border-radius:2px;background:linear-gradient(90deg,var(--fg-2) var(--w),var(--line) var(--w))}
.i-share{display:flex;align-items:center;justify-content:center;gap:.8rem}
.i-card{flex:none;width:8.5rem;display:grid;gap:.4rem;padding:.8rem;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);transform:rotate(-4deg)}
.i-card b{font-size:var(--fs-tiny)}
.i-card i{height:.45rem;width:var(--w);border-radius:2px;background:var(--k)}
.i-arrow{color:var(--dim);font-size:1.3rem}
.i-chat{flex:0 1 9rem;padding:.7rem .85rem;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 2px;background:#fee500;color:#191600;font-weight:600;font-size:var(--fs-tiny);line-height:1.5}
.i-bub{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.fcell .pic .i-bub img{flex:none;width:1.75rem;height:1.75rem;object-fit:contain;transition:none;transform:none}
.i-bub p{font-weight:600;line-height:1.55;color:var(--fg)}
.i-picks{display:flex;gap:.45rem;padding-left:2.45rem;flex-wrap:wrap}
.i-picks span{border:1px solid var(--line-2);border-radius:var(--r);padding:.3em .75em;font-size:var(--fs-tiny);color:var(--fg-2)}
.fcell .ftxt{padding:1.4rem 1.4rem 1.8rem;gap:.6rem}
/* 홀로 카드 — 벼슬 카드 위에 금박 빛(WebGL)을 소프트 라이트로 얹는다(스크린은 어두운 바탕까지 회색으로 들떠 글이 흐렸다 — 주공께서 "카드 내용물이 너무 안 보인다" 하셨다, 10월 16일). 기울기·그늘은 스크립트가 용수철로 움직인다 */
.holo-host{position:relative;touch-action:pan-y}
.holo-shadow{position:absolute;inset:10% 7% -4%;border-radius:18px;background:rgba(0,0,0,.42);filter:blur(26px);pointer-events:none;will-change:transform}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .holo-shadow{background:rgba(40,32,10,.28)} }
:root[data-theme="light"] .holo-shadow{background:rgba(40,32,10,.28)}
.rcard.holo-card{transition:none;box-shadow:none;transform:perspective(1100px)}
.rcard.holo-on::after{display:none}
/* 카드 속 글은 카드 너비를 따라 커진다(cqw — 너비 340 일 때 예전 px 그대로).
   한때 30rem(480px)까지 키웠으나 넓은 화면에서 마당을 다 채워 "카드가 너무 커서 부담스럽다" 하셨다(10월 21일) — 300~340px 에 묶는다 */
@media (min-width:961px){ .c-rank{grid-template-columns:minmax(0,clamp(280px,18vw,340px)) minmax(0,1fr)} }
.tilt{container-type:inline-size}
.rcard{padding:3.5cqw;border-radius:5.3cqw}
.rc-frame{padding:4.7cqw 4.7cqw 4.1cqw;border-radius:2.9cqw}
.rc-top{font-size:max(12px,3.8cqw)}
.rc-date{font-size:max(12px,3.5cqw)}
.rc-name{font-size:11.8cqw;gap:2.9cqw}
.rc-seal{font-size:max(11px,3.8cqw)}
.rc-desc{font-size:max(13px,3.9cqw)}
.rc-stats{margin-top:3.5cqw;border-radius:2.4cqw}
.rc-stats span{font-size:max(12px,3.5cqw);padding:2.4cqw 1.2cqw}
.rc-stats b{font-size:6.5cqw}
.rc-dots{height:4.1cqw;margin-top:4.1cqw}
.rc-dots i{width:2.4cqw;height:2.4cqw}
.holo-foil{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;z-index:2}
/* 오른쪽 줄자 — 창 오른쪽 벽에 붙은 줄자. 맨 위 줄자 통에서 띠가 풀려 내려오고, 띠에 쪽 전체를 0~100 으로 잰 눈금과 지금 자리의 금 표.
   마당 이름은 줄자 왼쪽(오른쪽 맞춤), 지금 마당은 크고 굵게. 주공께서 "줄자 컨셉으로 오른쪽 벽에 붙이고 글은 줄자 왼쪽에" 하셨다(10월 16일).
   기둥 바깥이 좁으면 이름은 감추고 줄자만(.slim), 900px 아래·이름이 둘 아래면 감춘다 */
:root{--tape:#131316;--tape-case:#1b1b1f}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--tape:#ececE8;--tape-case:#e1e1dc} }
:root[data-theme="light"]{--tape:#ececE8;--tape-case:#e1e1dc}
.scale{position:fixed;right:env(safe-area-inset-right,0px);top:calc(3.6rem + 48px + env(safe-area-inset-top,0px));bottom:30px;z-index:25;display:flex;align-items:stretch;gap:18px;pointer-events:none;font-variant-numeric:tabular-nums}
.scale.off,.scale.none{display:none}
.scale-track{position:relative;flex:none;width:42px;height:100%;pointer-events:auto;cursor:pointer;touch-action:none;background:var(--tape);border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:border-color .2s}
.scale-track:hover,.scale.drag .scale-track{border-left-color:var(--fg-2)}
.scale-case{position:absolute;left:-8px;right:0;top:-36px;height:32px;border:1px solid var(--line-2);border-right:0;border-radius:9px 0 0 9px;background:var(--tape-case);display:grid;place-items:center}
.scale-case i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--fg-2);box-shadow:inset 0 0 0 2.5px var(--tape-case),inset 0 0 0 6px var(--faint)}
.scale-track::after{content:"";position:absolute;left:-7px;bottom:-1px;width:7px;height:11px;border:1.5px solid var(--fg-2);border-right:0;border-radius:2px 0 0 2px}   /* 띠 끝의 쇠 고리 */
.scale-ticks i{position:absolute;left:0;width:5px;height:1px;background:var(--line-2);transition:width .25s,background .25s}
.scale-ticks i.five{width:10px}
.scale-ticks i.ten{width:15px;background:var(--faint)}
.scale-ticks i.near{width:13px;background:var(--fg-2)}
.scale-ticks i.lit{width:19px;background:var(--fg)}
.scale-ticks i span{position:absolute;left:18px;top:0;width:20px;text-align:right;transform:translateY(-50%);font-size:10px;letter-spacing:.04em;color:var(--faint);line-height:1}
.scale-ticks i.near span{color:var(--fg)}
.scale-ticks i.lit span{opacity:0}
.scale.few .scale-ticks i.five:not(.ten) span{display:none}
.scale-mark{position:absolute;left:0;right:0;top:0;height:0;transition:top .12s linear}
.scale.drag .scale-mark{transition:none}
.scale-mark i{position:absolute;left:-14px;right:0;top:-1px;height:2px;background:var(--gold)}
.scale-mark i::before{content:"";position:absolute;left:-6px;top:-4px;border:5px solid transparent;border-right:6px solid var(--gold);border-left:0}
.scale-mark b{position:absolute;right:4px;top:0;transform:translateY(-50%);padding:2px 4px;border-radius:2px;background:var(--gold);color:var(--on-gold);font-size:10px;font-weight:800;line-height:1;letter-spacing:.04em}
.scale-secs{position:relative;flex:1;min-width:0;height:100%}
.scale-secs a{position:absolute;right:14px;top:0;transform:translateY(-50%);max-width:calc(100% - 14px);padding:4px 0 4px 10px;pointer-events:auto;cursor:pointer;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-size:13px;line-height:1.25;letter-spacing:.02em;color:var(--faint);transition:top .45s cubic-bezier(.2,.8,.2,1),font-size .35s cubic-bezier(.2,.8,.2,1),color .25s}
.scale-secs a::after{content:"";position:absolute;right:-14px;top:50%;width:8px;height:1px;background:currentColor;opacity:.55}
.scale-secs a{overflow:visible}
.scale-secs a:hover,.scale-secs a.go{color:var(--fg)}
.scale-secs a.past{color:var(--fg-2)}
.scale-secs a.on{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--fg);white-space:normal;word-break:keep-all;line-height:1.15}
.scale-secs a.on::after{background:var(--gold);opacity:1;width:10px;height:2px}
.scale.slim .scale-secs{display:none}
.scale.slim{gap:0}
@media (max-width:1200px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .hero{min-height:0}
  .greet-strip .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .hero-in{padding-block:2.5rem 3.5rem}
  .hero .mega .ln{display:block}
  .hero .mega .ln + .ln::before{content:none}
  .top-in > .btn{min-height:2.5rem}
}
@media (prefers-reduced-motion: reduce){ .scale-secs a,.scale-mark{transition:none} }

/* ════════ 이야기 흐름 (10월 22일) ════════
   주공께서 "서비스 소개보다 사용법에 가깝다, 문제 제기 > 공감 > 해결책이 약하다" 하시어 쪽을 둘로 나눴다 —
   소개 쪽은 문제(머리) → 공감(#pain, 하루 세 장면) → 해결(#try, 같은 세 때가 어찌 바뀌는지 + 체험) → 상품 → 믿음 → 어명(후기) → 물음과 답,
   쓰는 법은 guide/ 로. 하루 세 장면은 두 마당이 같은 때(09:10 · 14:30 · 18:40)를 써서 짝으로 읽힌다 */
.day-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.day-line li{position:relative;background:var(--bg);padding:clamp(1.4rem,2.4vw,2.2rem);display:grid;gap:.75rem;align-content:start}
.dl-when{display:flex;align-items:baseline;gap:.6em;font-size:var(--fs-small);color:var(--dim);letter-spacing:.04em}
.dl-when time{font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.day-line b{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.35}
.day-line p{color:var(--fg-2);line-height:1.7}
.pain-end{margin-top:clamp(1.6rem,3vw,2.6rem);max-width:42em;font-size:var(--fs-lead);color:var(--fg-2);line-height:1.8}
.pain-end b{color:var(--fg)}
.day-line.after{margin-bottom:clamp(2.6rem,4.5vw,4.4rem)}
.day-line.after li{box-shadow:inset 0 2px 0 var(--gold)}
.day-line.after .dl-when time{color:var(--gold-fg)}
.try-head{display:grid;gap:.35rem;margin-bottom:1.6rem}
.try-head h3{font-size:var(--fs-h3);letter-spacing:-.02em}
.try-head p{color:var(--fg-2);font-size:var(--fs-small)}
@media (max-width:860px){ .day-line{grid-template-columns:minmax(0,1fr)} .day-line li{grid-template-columns:auto minmax(0,1fr);column-gap:1.2rem} .day-line li > *:not(.dl-when){grid-column:2} .dl-when{grid-row:1 / 3;flex-direction:column;gap:.3em;align-items:flex-start} }

/* 쓰시는 분들의 어명 — 예시인 동안은 ?후기=미리보기 에서만 보인다 */
.sample-bar{border:1px dashed var(--gold);color:var(--gold-fg);background:var(--gold-soft);padding:.65em 1em;font-size:var(--fs-small);font-weight:600;margin-bottom:2rem;border-radius:var(--r)}
.voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.voice-grid li{background:var(--bg);padding:clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;gap:1rem}
.v-tag{align-self:flex-start;font-size:var(--fs-tiny);font-weight:700;color:var(--gold-fg);border:1px solid var(--gold);border-radius:var(--r);padding:.15em .6em}
.voice-grid blockquote{margin:0;flex:1;font-size:var(--fs-body);line-height:1.75;color:var(--fg)}
.v-who{display:flex;gap:.7em;align-items:baseline;flex-wrap:wrap;font-size:var(--fs-small);color:var(--dim)}
.v-who b{color:var(--fg);font-weight:700}
@media (max-width:960px){ .voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .voice-grid{grid-template-columns:minmax(0,1fr)} }
.foot-link{color:var(--fg-2);text-decoration:none}
.foot-link:hover{color:var(--fg)}

/* ════════ 쓰는 법 쪽 (guide/index.html) ════════ */
.g-hero{padding-top:calc(68px + clamp(3rem,6vw,5.5rem) + env(safe-area-inset-top,0px))}
.g-crumb{display:flex;gap:.6em;align-items:center;font-size:var(--fs-small);color:var(--dim);margin-bottom:1.2rem}
.g-crumb a{color:var(--fg-2);text-decoration:none}
.g-crumb a:hover{color:var(--fg)}
.g-hero .lead{margin-top:1.1rem;max-width:36em}
.g-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(2rem,4vw,3rem)}
.g-toc a{display:flex;gap:.7em;align-items:baseline;padding:.7rem 1rem;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;color:var(--fg);font-weight:600;transition:background .2s,border-color .2s}
.g-toc a:hover{background:var(--hover);border-color:var(--fg-2)}
.g-toc b{font-size:var(--fs-tiny);color:var(--dim);font-variant-numeric:tabular-nums}
.g-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.g-steps > li{background:var(--bg);display:grid;align-content:start;gap:.6rem;padding-bottom:clamp(1.4rem,2.4vw,2rem)}
.g-steps > li > :not(.g-pic){padding-inline:clamp(1.2rem,2.2vw,1.8rem)}
.g-pic{display:grid;place-items:center;aspect-ratio:16/9;padding:1.4rem clamp(1rem,2vw,1.8rem);background:var(--press);border-bottom:1px solid var(--line);font-size:var(--fs-small);margin-bottom:.8rem}
.g-n{font-size:var(--fs-tiny);font-weight:700;color:var(--gold-fg);font-variant-numeric:tabular-nums}
.g-steps h3{font-size:var(--fs-h3);letter-spacing:-.02em}
.g-steps p:not(.g-n){color:var(--fg-2);line-height:1.75}
.i-box.on{background:var(--fg);border-color:var(--fg);color:var(--bg);display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:800;line-height:1}
.i-row span.done{color:var(--dim);text-decoration:line-through}
.g-more{margin-top:1.4rem}
.g-screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.g-screen{background:var(--bg);padding:clamp(1.4rem,2.4vw,2.2rem);min-width:0}
.g-screen h3{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:1.2rem}
.g-tag{font-size:var(--fs-small);font-weight:700;background:var(--btn);color:var(--on-btn);border-radius:var(--r);padding:.2em .7em}
.g-list{display:grid;gap:0;margin:0}
.g-list > div{padding:.95rem 0;border-top:1px solid var(--line)}
.g-list dt{font-weight:700;margin-bottom:.3rem}
.g-list dd{margin:0;color:var(--fg-2);line-height:1.75}
.g-list.g-cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3.5rem)}
.g-ladder{display:grid;border-top:1px solid var(--line)}
.g-ladder li{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line)}
.g-rk{font-weight:800;font-size:var(--fs-h3);letter-spacing:-.02em}
.g-rk small{display:block;font-size:var(--fs-tiny);font-weight:500;color:var(--gold-fg);letter-spacing:.02em}
.g-ladder li > span:last-child{color:var(--fg-2)}
.g-note{margin-top:1.6rem;max-width:44em;padding:1.1rem 1.3rem;border:1px solid var(--line-2);border-radius:var(--r);color:var(--fg-2);line-height:1.8}
.g-note b{color:var(--fg)}
.g-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line);counter-reset:g}
.g-flow li{background:var(--bg);padding:clamp(1.3rem,2.2vw,2rem);display:grid;gap:.5rem;align-content:start;counter-increment:g}
.g-flow li::before{content:counter(g);width:2.2rem;height:2.2rem;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r);font-weight:700;margin-bottom:.4rem}
.g-flow b{line-height:1.5}
.g-flow span{color:var(--fg-2);line-height:1.7}
.g-keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.g-keys li{display:flex;align-items:center;gap:.45rem;padding:1rem 1.1rem;background:var(--bg)}
.g-keys span{margin-left:.5rem;color:var(--fg-2)}
.g-keys kbd{min-width:2rem;height:2rem;display:inline-grid;place-items:center;padding:0 .5em;font:inherit;font-size:var(--fs-small);font-weight:700;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:var(--r);background:var(--press)}
.guide .end .acts{gap:12px}
@media (max-width:960px){ .g-steps,.g-screens,.g-flow{grid-template-columns:minmax(0,1fr)} .g-list.g-cols{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .g-ladder li{grid-template-columns:minmax(0,1fr);gap:.3rem} .g-rk{display:flex;gap:.6em;align-items:baseline} .g-rk small{display:inline} }
.guide .sec{scroll-margin-top:72px}

/* 여섯 비결 그림 — 주공께서 손수 지으신 그림(1600×1000, 밝은 꼴·어두운 꼴 두 벌, img/feat/). 쪽은 기기의 밝기를 따르니 <picture> 로 갈아 끼운다(10월 22일) */
.fcell .pic.art{background:var(--bg)}
.fcell .pic.art picture{display:block;width:100%;height:100%}
.fcell .pic.art img{object-position:center}

/* 새 로고(10월 22일) — 금 깃털 부채 + 붓글씨 「제갈량」. 이름 자리(머리 줄·밑줄·머리)는 그림 한 장(짜임)으로, 바탕 밝기 따라 두 판을 갈아 끼운다.
   logo-lockup-light = 밝은 글(어두운 바탕용) · logo-lockup-dark = 짙은 글(밝은 바탕용). 쪽의 처음 꼴이 어두운 꼴이라 light 판이 먼저다 */
img.lk{display:block;width:auto}
img.lk-l{display:none}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) img.lk-d{display:none} :root:not([data-theme="dark"]) img.lk-l{display:block} }
:root[data-theme="light"] img.lk-d{display:none}
:root[data-theme="light"] img.lk-l{display:block}
.brand img.lk{width:auto;height:1.85rem}
.foot .brand img.lk{width:auto;height:1.5rem}
.hero .mark img.lk{width:auto;height:1.15em}

/* 벼슬 인물 그림(10월 22일) — 투명 바탕 초상, 카드의 금빛 후광 위에 */
.rc-fig img{position:relative;display:block;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.rc-fig img.in{animation:figin .8s var(--ease) both}