/* 스위스 그리드: 흰 종이, 검정 글자, 빨강 하나. 굵은 고딕, 가는 칸선, 그림자·둥근 모서리 없음 */
:root{--paper:#f4f3ef;--white:#fff;--ink:#111;--red:#e5341d;--mut:#6b6a64;--rule:#111;--hair:rgba(17,17,17,.16);
  --fg:var(--ink);--acc:var(--red);--acc-ink:#fff;--line:var(--hair);--line2:rgba(17,17,17,.4);--ok:#0b7a43;--bad:var(--red);
  --head:"IBM Plex Sans KR","IBM Plex Sans",-apple-system,"Apple SD Gothic Neo",sans-serif;--serif:"Noto Serif KR","Noto Serif","AppleMyungjo",Georgia,serif}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--paper)}
::selection{background:var(--red);color:#fff}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--head);font-size:16px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
main{max-width:560px;margin:0 auto;padding:28px 16px 64px;min-height:100vh}
section{display:none}section.on{display:block}
h1{font-family:var(--head);font-size:2.6rem;line-height:1.08;font-weight:700;letter-spacing:-.045em;margin:.3em 0 .45em}
h2{font-family:var(--head);font-size:1.45rem;line-height:1.25;font-weight:700;letter-spacing:-.03em;margin:0 0 .5em}
p{margin:.5em 0}.sub{color:var(--mut);font-size:.9rem}
b{font-weight:700}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
/* 꼬리표: 빨간 네모 하나와 굵은 글자 */
.tag{display:inline-flex;align-items:center;gap:.55em;margin-bottom:8px;font-weight:700;font-size:.82rem;letter-spacing:0;color:var(--ink)}
.tag::before{content:"";width:.62em;height:.62em;background:var(--red)}

/* 단추: 검정 직사각형. 테두리 단추(.ghost)는 누르면 검정으로 채워진다 */
button{position:relative;isolation:isolate;font:inherit;cursor:pointer;border:0;background:none;color:#fff;padding:.72em 1.3em;font-weight:700;letter-spacing:-.01em;border-radius:0;transition:color .12s}
button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);border:1px solid var(--ink);transition:background .12s,border-color .12s}
button:hover:not(:disabled)::before{background:var(--red);border-color:var(--red)}
button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
button.ghost{color:var(--ink)}
button.ghost::before{background:transparent;border:1px solid var(--ink)}
button.ghost:hover:not(:disabled){color:#fff}button.ghost:hover:not(:disabled)::before{background:var(--ink);border-color:var(--ink)}
button:disabled{opacity:.3;cursor:default}
.row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* 칸: 위에 굵은 선 하나로 나눈다 */
.card,.stat,.reveal,.rec{position:relative;background:none;color:var(--ink);border-top:2px solid var(--ink)}
.card .sub,.stat .sub,.reveal .sub{color:var(--mut)}
.passage{position:relative;padding:22px 22px 24px;background:var(--white);border:1px solid var(--ink);font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.95;margin:16px 0}
.passage.hide{filter:blur(8px);user-select:none}
label{display:block;margin:20px 0 6px;font-weight:700;font-size:.88rem;color:var(--ink)}
input[type=number],input[type=search],input[type=text],input[type=date],textarea{font:inherit;width:100%;padding:.7em .8em;border:1px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);font-weight:500;outline:none}
input[type=number]:focus,input[type=search]:focus,input[type=text]:focus,input[type=date]:focus,textarea:focus{outline:2px solid var(--red);outline-offset:-1px}
input[type=search]::placeholder{color:var(--mut)}
input[type=range]{width:100%;accent-color:var(--red)}
.big{font-family:var(--head);font-size:clamp(4rem,22vw,6.4rem);font-weight:700;letter-spacing:-.06em;color:var(--ink);line-height:.95;margin:.1em 0 .15em}
.big .unit{font-size:.3em;letter-spacing:-.02em;margin-left:.15em;color:var(--red);font-weight:700}
.stat{padding:14px 0 6px;margin:16px 0}
.stat b{color:var(--ink);font-weight:700;box-shadow:inset 0 -.38em 0 rgba(229,52,29,.22)}
.q{position:relative;font-family:var(--serif);font-size:1.2rem;line-height:1.85;padding:20px 0 22px;margin:12px 0 16px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.opts{display:grid;gap:0;border-top:1px solid var(--ink)}
.opts button{color:var(--ink);text-align:left;font-weight:500;padding:.85em 1em}
.opts button::before{background:transparent;border:0;border-bottom:1px solid var(--ink)}
.opts button:hover:not(:disabled){color:#fff}.opts button:hover:not(:disabled)::before{background:var(--ink)}
.opts button:disabled{opacity:1}
.opts button:disabled:not(.right):not(.wrong){opacity:.4}
.opts button.right{color:#fff}.opts button.right::before{background:var(--ok);border-color:var(--ok)}
.opts button.wrong{color:#fff}.opts button.wrong::before{background:var(--red);border-color:var(--red)}
.reveal{margin:16px 0 0;padding:14px 0 0;font-size:.95rem}
.reveal a,.stat a,.rec a{color:var(--red);font-weight:700}
.bar{height:4px;background:var(--hair);overflow:hidden;margin-bottom:16px}.bar i{display:block;height:100%;background:var(--red);transition:width .35s}
.shelf{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.spine{padding:4px 10px;border:1px solid var(--ink);background:var(--white);color:var(--ink);font-size:.85rem;font-weight:700}
.pitem{display:block;width:100%;text-align:left;font-weight:500}
.opts.pl{margin:10px 0 0}.opts.pl button{padding:.65em .9em}
.pitem.on{color:#fff}.pitem.on::before{background:var(--ink)!important}
.pitem .sub{display:block;font-weight:400;font-size:.78rem}.pitem.on .sub,.opts button:hover:not(:disabled) .sub{color:rgba(255,255,255,.7)}
.pitem.on::after{content:"";position:absolute;right:1em;top:50%;width:.6em;height:.6em;background:var(--red);transform:translateY(-50%)}
.fl{display:flex;gap:6px;overflow-x:auto;padding:4px 6px 10px 0;margin:0;-webkit-overflow-scrolling:touch}
.fl h4{flex:none;align-self:center;margin:0 4px 0 0;font-size:.78rem;color:var(--ink);font-weight:700}
.chip{flex:none;padding:.3em .8em;white-space:nowrap;font-size:.82rem;font-weight:600;color:var(--ink)}
.chip::before{background:transparent;border:1px solid var(--ink)}
.chip.on{color:#fff}.chip.on::before{background:var(--ink)}
.chip:hover:not(:disabled){color:#fff}
.chip i{font-style:normal;opacity:.55;font-weight:500;margin-left:.35em}
.pickbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px -16px 0;padding:12px 16px;background:var(--paper);border-top:2px solid var(--ink)}
.pickbar span{font-weight:700}
.spine.x{cursor:pointer;font-family:inherit}.spine.x::after{content:" ×";font-weight:700;color:var(--red)}
.dist{margin:4px 0 12px}.dist b.h{display:block;font-size:.78rem;margin:12px 0 2px;color:var(--ink);font-weight:700;background:none;padding:0;box-shadow:none}
.dist .r2{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:.85rem}
.dist .lab{width:8.5em;flex:none}.dist .trk{flex:1;height:8px;background:var(--hair);overflow:hidden}.dist .trk i{display:block;height:100%;background:var(--ink)}.dist .r2:first-of-type .trk i{background:var(--red)}.dist .pct{width:2.8em;text-align:right;color:var(--mut)}
.rec{padding:14px 0 6px;margin:0;border-top:1px solid var(--ink)}
.rec .t{font-weight:700;font-size:1.1rem}.rec .m{color:var(--mut);font-size:.85rem}.rec .why{margin-top:6px;font-size:.9rem}.rec .why b{color:var(--red);font-weight:700}
.rec a{font-size:.9rem}
.cardimg{width:100%;height:auto;border:1px solid var(--ink);margin:18px 0 8px}
.pitem-row{display:flex;gap:0;align-items:stretch}.pitem-row .pitem{flex:1}
.starb{flex:none;width:48px;display:grid;place-items:center;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink);cursor:pointer;font-size:1.1rem;color:var(--mut);user-select:none}.starb.on{color:#fff;background:var(--red)}
.mpanel{margin:16px 0}.mpanel .t{font-weight:700;font-size:1.15rem}.mpanel .m{color:var(--mut);font-size:.85rem}.mpanel .row{margin-top:12px;gap:8px}.mpanel .row button{padding:.45em .9em;font-size:.85rem}
.bchip{display:inline-block;margin:0 6px 8px 0;padding:.25em .75em;border:1px solid var(--ink);background:var(--white);font-size:.85rem;font-weight:600;cursor:pointer}.bchip.sel{background:var(--ink);color:#fff}
.mnote{font-size:.8rem;color:var(--mut);margin:8px 0}
.foot{margin-top:48px;padding-top:12px;border-top:1px solid var(--ink);font-size:.78rem;color:var(--mut)}
.foot a,.sub a{color:var(--ink)}
.viz{margin:18px 0}
.vtitle{font-weight:700;margin:0 0 8px}
.vtabs{display:flex;gap:6px;margin-bottom:10px}
.vbar{position:sticky;top:0;z-index:5;background:var(--paper);margin:0 -16px;padding:8px 16px 6px;border-bottom:1px solid var(--ink)}
.vbar .vtabs button,.vbar .vctl button{padding:.28em .9em;font-size:.85rem}
.vbar .vtabs{margin-bottom:4px}.vbar .vctl{margin-top:6px}.vbar .vout{font-size:.88rem;font-weight:700;margin-top:6px}
.vstage{position:relative;border:1px solid var(--ink);background:#111;overflow:hidden;margin-top:12px}.vstage canvas{position:absolute;left:0;display:block}.vstage .ov{pointer-events:none}
.vtip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;padding:.3em .6em;white-space:nowrap}
.vctl{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.vctl input[type=range]{flex:1;min-width:110px}.vout b{color:var(--red)}.vl{font-size:.78rem;font-weight:700;color:var(--ink)}
.vleg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:10px;font-size:.78rem;color:var(--mut)}.vleg i{display:inline-block;width:14px;height:10px;border:1px solid var(--ink);margin-right:5px;vertical-align:0}.vleg i.f{background:var(--ink);opacity:.25}
.vcap{margin-top:8px}
.authbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 10px;font-size:.82rem;color:var(--mut);flex-wrap:wrap}.authbar b{color:var(--ink)}.authbar button{padding:.3em .9em;font-size:.8rem}
.mine{padding-top:14px}.mine b.h{display:block;margin-bottom:4px}.mine .row{margin-top:14px}.mine .row button{padding:.55em 1em;font-size:.9rem}
.cta-big{display:block;width:100%;font-size:1.1rem;padding:1em 1.5em;margin-top:26px;text-align:left}
.cta-big::before{background:var(--red);border-color:var(--red)}.cta-big:hover:not(:disabled)::before{background:var(--ink);border-color:var(--ink)}
.guess{display:inline-block;margin:0;padding:12px 0;color:var(--ink);font-weight:500;font-size:.9rem;text-decoration:underline;text-underline-offset:4px}.guess::before{display:none}.guess:hover:not(:disabled){color:var(--red)}
/* 기능 칸: 선을 나눠 쓰는 격자 */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:32px 0 8px;border-top:2px solid var(--ink);border-left:1px solid var(--ink)}
.mcard{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:left;color:var(--ink);padding:14px 14px 16px;font-weight:400;text-decoration:none;min-height:118px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.mcard::before{background:transparent;border:0}
.mcard:hover:not(:disabled){color:#fff}.mcard:hover::before{background:var(--ink)}
a.mcard{position:relative}a.mcard:hover{background:var(--ink);color:#fff}
.mcard b{display:block;font-weight:700;font-size:1.08rem;letter-spacing:-.03em;margin-bottom:4px;color:inherit}
.mcard span{display:block;font-size:.8rem;line-height:1.45;color:var(--mut)}.mcard:hover span{color:rgba(255,255,255,.7)}
.menu>:last-child:nth-child(odd){grid-column:1/-1}
input[type=date]{color-scheme:light}textarea{resize:vertical;line-height:1.5;display:block}
body .ghmun-appguide{border-top:2px solid var(--ink);font-family:var(--head)}

/* 위 줄: 이름 | 메뉴 | 로그인 */
.topbar{position:relative;z-index:20;display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;background:var(--paper);border-bottom:2px solid var(--ink)}
.topbar button{padding:.4em 0;font-weight:600;font-size:.88rem;color:var(--ink)}.topbar button::before{display:none}
.topbar button:hover:not(:disabled){color:var(--red)}
.topbar .brand{font-weight:700;font-size:1rem;letter-spacing:-.03em;color:var(--ink)}
.topbar .tnav{display:none}
.topbar .authbar{margin:0 0 0 auto;font-size:.78rem}.topbar .authbar span{display:none}
.topbar .authbar button{padding:.3em .85em;color:var(--ink)}.topbar .authbar button::before{display:block}
.topbar .authbar button:hover:not(:disabled){color:#fff}
.pk-side1,.pk-filt,.pk-main,.pk-side2{display:contents}
/* 휴대폰은 책장이 글 위에 */
.ihero{display:flex;flex-direction:column}#home-shelf{order:-1;margin-bottom:24px}
#home-shelf>h2{font-size:1.1rem}
.mshelf-empty .mrow{justify-content:center;align-items:center}.mshelf-empty .mempty{max-width:24em;margin:0;padding:0 12px}

@media (min-width:1024px){
  html{scroll-padding-top:72px}
  .topbar{position:sticky;top:0;padding:0 40px;height:64px;gap:0}
  .topbar .brand{width:240px;text-align:left;font-size:1.1rem}
  .topbar .tnav{display:flex;flex:1;align-self:stretch}
  .topbar .tnav button,.topbar .tnav a{flex:none;padding:0 18px;color:var(--ink);font-size:.92rem;font-weight:600;text-decoration:none;border-left:1px solid var(--hair);display:flex;align-items:center}
  .topbar .tnav button:hover,.topbar .tnav a:hover{color:var(--red)}
  .topbar .tnav [aria-current]{color:#fff;background:var(--ink)}
  .topbar .tnav [aria-current]:hover{color:#fff}
  .topbar .authbar{margin:0 0 0 auto}
  main{max-width:1280px;padding:56px 40px 96px}
  h1{font-size:clamp(3.4rem,4.6vw,4.6rem)}h2{font-size:2rem}
  .sub{font-size:.95rem}

  /* 첫 화면: 왼쪽 큰 제목, 오른쪽 인생 책 책장 */
  .ihero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end;padding-bottom:56px;border-bottom:2px solid var(--ink)}
  #home-shelf{order:0;margin:0}
  .itext p{max-width:30em;font-size:1.05rem}
  .itext .cta-big{width:auto;display:inline-block;padding:1.05em 2.4em;font-size:1.1rem}
  .itext .guess{display:block}
  #home-shelf>h2{font-size:1rem;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
  #home-shelf>.thsw,#home-shelf>.row{display:inline-flex;vertical-align:middle;margin:14px 10px 0 0}
  #home-shelf .mshelf{margin-top:0}
  section.on.split>.tag,#s-pick>.tag{justify-self:start}
  .menu{grid-template-columns:repeat(4,1fr);margin-top:0;border-top:0}
  .menu:has(>:nth-child(9)){grid-template-columns:repeat(3,1fr)}
  .menu>:last-child:nth-child(odd){grid-column:auto}
  .mcard{min-height:170px;padding:20px 22px 22px}.mcard b{font-size:1.35rem}.mcard span{font-size:.88rem}

  /* 한 줄로 읽는 화면은 가운데 좁게 */
  #s-speed,#s-info,#s-quiz,#s-plan,#s-timer,#s-longer{max-width:800px;margin:0 auto}
  .passage{padding:36px 40px;font-size:1.15rem}
  .q{font-size:1.45rem;padding:28px 0 30px}
  #opts{grid-template-columns:1fr 1fr;border-left:1px solid var(--ink)}#opts button::before{border-right:1px solid var(--ink)}

  /* 둘로 나눈 화면: .aside 가 오른쪽(.rev 면 왼쪽) 칸 전체를 차지하고 나머지는 다른 칸에 차례로 */
  section.on.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(40,auto) 1fr;column-gap:64px;align-items:start}
  .split>*{grid-column:1}.split>.aside{grid-column:2;grid-row:1/-1;margin-top:0}
  .split.rev{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .split.rev>*{grid-column:2}.split.rev>.aside{grid-column:1;position:sticky;top:88px}
  #s-calc .big,#s-result .big{font-size:9rem}
  #s-reco .cardimg{position:sticky;top:88px}

  /* 책 고르기: 왼쪽 필터, 가운데 목록, 오른쪽 고른 책 */
  section.on#s-pick{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(240px,300px);grid-template-rows:auto auto auto auto auto 1fr;column-gap:40px;align-items:start}
  #s-pick>.tag,#s-pick>h2,#s-pick>.sub{grid-column:1/-1}#s-pick>.sub{max-width:52em;margin-bottom:28px}
  .pk-filt,.pk-main,.pk-side1,.pk-side2{display:block}
  .pk-filt{grid-column:1;grid-row:4/7;position:sticky;top:88px;border-top:2px solid var(--ink);padding-top:12px}
  .pk-filt .fl{flex-wrap:wrap;overflow:visible;padding:0 0 18px}.pk-filt .fl h4{width:100%;margin:0 0 4px}
  .pk-main{grid-column:2;grid-row:4/7}
  .pk-side1{grid-column:3;grid-row:4;border-top:2px solid var(--ink);padding-top:12px}
  .pk-side2{grid-column:3;grid-row:5/7;align-self:stretch}
  .pk-side2 .pickbar{position:sticky;top:88px;margin:0;padding:14px 0;border-top:2px solid var(--ink)}
  .pk-side2 .row{flex-direction:column;align-items:flex-start}
}
@media (min-width:1280px){.pk-main .opts.pl{grid-template-columns:1fr 1fr;border-left:1px solid var(--ink)}.pk-main .opts.pl button::before{border-right:1px solid var(--ink)}}