/* Kanjijo home. Generated by tools/web_redesign/build_site_css.py from the shared block system + kanjijo_home_extra.css. */

.anchor{position:relative;top:-30px;display:block;height:0}

/* ---------- opening ---------- */
.meori{padding:clamp(34px,5vw,70px) 0 clamp(30px,4vw,54px);background:linear-gradient(180deg,var(--brand-tint),var(--bg))}
.meori-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.meori h1{font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:.96;letter-spacing:-.045em}
.meori h1 em{display:block;font-style:normal;color:var(--accent)}
.lede{font-size:clamp(1.14rem,1.5vw,1.34rem);line-height:1.5;margin-top:22px;max-width:52ch}
.meori-cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:28px}

.sut{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(28px,4vw,52px)}
.sut div{border-radius:var(--r);padding:18px 18px 16px;background:var(--brand-soft)}
.sut div:nth-child(2){background:var(--brand)}
.sut div:nth-child(4){background:var(--surface);outline:2px solid var(--ink);outline-offset:-2px}
.sut div:nth-child(5){background:var(--ink)}
.sut div:nth-child(5) dd,.sut div:nth-child(5) dt{color:#fff}
.sut dd{font-family:var(--f-head);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.sut dt{font-size:.94rem;font-weight:500;color:var(--ink);margin-top:6px;line-height:1.25}
@media(max-width:900px){
  .meori-grid{grid-template-columns:1fr}
  .sut{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sut div:last-child{grid-column:1/-1}
}

/* ---------- sections ---------- */
.kan{padding:clamp(50px,7vw,96px) 0}
.kan-tint{background:var(--brand-tint)}
.kan-head{max-width:880px;margin-bottom:clamp(26px,3.5vw,44px)}
.kan-head h2{font-size:clamp(2rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.04em}
.kan-head h2+p{font-size:1.2rem;margin-top:14px;max-width:62ch}
.kan-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px;font-size:1.14rem}

/* ---------- widgets mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px}
.mosaic li{position:relative;border-radius:30px;padding:24px 26px;overflow:hidden}
.mosaic i{position:absolute;right:22px;top:16px;font-family:var(--f-cjk);font-style:normal;font-size:3.6rem;line-height:1;opacity:.3;color:var(--ink)}
.mosaic h3{font-size:1.46rem;margin-bottom:8px;position:relative;padding-right:74px}
.mosaic p{font-size:1.08rem;line-height:1.45;color:var(--ink);max-width:36ch;position:relative}
.mosaic .m1{grid-column:span 4;background:var(--brand)}
.mosaic .m2{grid-column:span 2;background:var(--surface);outline:2px solid var(--ink);outline-offset:-2px}
.mosaic .m3{grid-column:span 2;background:var(--ink)}
.mosaic .m3 h3,.mosaic .m3 p{color:#fff}
.mosaic .m3 i{color:#fff}
.mosaic .m4{grid-column:span 4;background:var(--brand-soft)}
@media(max-width:820px){.mosaic{grid-template-columns:1fr}.mosaic li{grid-column:auto!important}}

/* ---------- shelves ---------- */
.seonban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.seon{border-radius:30px;padding:22px 20px 14px;background:var(--surface);border:2px solid var(--line)}
.seon-learn{background:var(--brand-soft);border-color:var(--brand-soft)}
.seon-life{background:var(--brand-tint);border-color:var(--brand)}
.seon h3{display:flex;align-items:center;gap:10px;font-size:1.36rem;margin-bottom:8px}
.seon h3 b{font-family:var(--f-cjk);font-weight:400;font-size:1.2rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:var(--ink);color:#fff}
.seon h3 small{margin-left:auto;font-size:.86rem;font-weight:700;color:var(--accent)}
.seon li{position:relative;padding:14px 0 14px 34px;border-top:1px solid rgba(59,46,53,.12)}
.seon li i{position:absolute;left:0;top:13px;font-family:var(--f-cjk);font-style:normal;font-size:1.3rem;line-height:1.2;color:var(--accent)}
.seon h4{font-size:1.1rem;line-height:1.2;margin-bottom:4px}
.seon li p{font-size:1.02rem;line-height:1.42;color:var(--text)}
.new{display:inline-block;font-family:var(--f-head);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;padding:2px 7px;border-radius:7px;vertical-align:.2em}
@media(max-width:1200px){.seonban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.seonban{grid-template-columns:1fr}}

/* ---------- start ---------- */
.sijak{position:relative;border-radius:40px;background:var(--brand);padding:clamp(34px,5vw,64px);overflow:hidden}
.sijak-kr{position:absolute;right:clamp(10px,3vw,40px);top:50%;transform:translateY(-50%);font-family:var(--f-cjk);font-size:clamp(5rem,15vw,12rem);line-height:1;color:var(--ink);opacity:.14;white-space:nowrap}
.sijak h2{position:relative;font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:-.04em;max-width:14ch}
.sijak h2+p{position:relative;font-size:1.2rem;color:var(--ink);margin-top:14px}
.store-badges{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sijak .store-btn-soon{color:var(--ink);outline-color:rgba(59,46,53,.4)}
.sijak .store-btn-soon strong{color:var(--ink)}
.jamae{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.jamae-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px 18px;align-items:start;border-radius:30px;padding:24px 26px;background:var(--surface);border:2px solid var(--line)}
.jamae-kanjijo{background:#f0fdf4;border-color:#c8e6c9}
.jamae-hanzijo{background:#fff7e4;border-color:#f0dfa8}
.jamae-row img{border-radius:16px}
.jamae-row h3{font-size:1.24rem;line-height:1.2}
.jamae-kanjijo h3 a{color:#2f7d2f}.jamae-hanzijo h3 a{color:#765b00}
.jamae-row p{font-size:1.02rem;line-height:1.45;margin-top:6px}
.jamae-row .btn{grid-column:2;justify-self:start;padding:9px 16px;font-size:.92rem}
@media(max-width:820px){.jamae{grid-template-columns:1fr}}

/* ===================== Kanjijo home: site rules ===================== */
.kan-tint{background:#f8fafc}
.kan-head h2{font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.06;letter-spacing:-.035em}
.kan-head h2+p{font-size:1.08rem}
.kan-foot{font-size:1.02rem}

/* ---------- opening: one board of interlocking blocks ---------- */
.meori{padding:clamp(16px,2.4vw,30px) 0 clamp(30px,4vw,54px);background:none}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;gap:12px}
.b-head{grid-column:1/8;grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between;gap:22px;border-radius:40px;background:var(--brand);padding:clamp(24px,3.2vw,46px)}
.b-head .mal{color:var(--ink);margin-bottom:0}
.b-head .mal b{background:var(--ink);color:var(--brand)}
.meori h1{font-size:clamp(2.2rem,4.3vw,3.7rem);line-height:1.14;letter-spacing:-.04em;font-weight:800}
.meori h1 em{display:inline;font-style:normal;color:var(--ink);background:#fff;border-radius:.2em;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.b-head .lede{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.55;color:var(--ink);margin-top:0;max-width:50ch}
.b-head .meori-cta{margin-top:0}
.b-write{grid-column:8/13;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:12px;align-items:start;border:2px solid var(--ink);border-radius:36px;background:var(--surface);padding:16px}
.kaki-sq{position:relative;aspect-ratio:1;border-radius:24px;background:var(--brand-tint);cursor:pointer;--brush-ink:var(--ink);--brush-now:var(--brand-d)}
.kaki-sq::before{content:"";position:absolute;inset:14px;pointer-events:none;opacity:.55;background:
  repeating-linear-gradient(180deg,var(--brand) 0 7px,transparent 7px 14px) 50% 0/2px 100% no-repeat,
  repeating-linear-gradient(90deg,var(--brand) 0 7px,transparent 7px 14px) 0 50%/100% 2px no-repeat}
.kaki-sq svg{position:absolute;inset:8%;width:84%;height:84%}
.kaki-sq .brush .bg-line{display:none}
.kaki-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-cjk);font-weight:900;font-size:clamp(7rem,16vw,12rem);line-height:1;color:rgba(26,26,46,.1)}
.kaki-sq.is-live .kaki-fb{display:none}
.kaki-pick{display:flex;flex-direction:column;gap:6px;height:100%}
#hbPick{display:flex;flex-direction:column;gap:6px}
#hbPick button{width:50px;height:50px;border-radius:15px;border:0;background:var(--brand-tint);font-family:var(--f-cjk);font-weight:900;font-size:1.4rem;line-height:1;color:var(--ink);cursor:pointer}
#hbPick button:hover{background:var(--brand-soft)}
#hbPick button[aria-pressed="true"]{background:var(--brand)}
#hbReplay{width:50px;height:50px;margin-top:auto;border-radius:15px;border:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
#hbReplay:hover{background:var(--accent)}
.b-info{grid-column:8/13;grid-row:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-content:center;align-items:center;border-radius:36px;background:var(--ink);padding:22px 26px}
.b-info>b{font-family:var(--f-cjk);font-weight:900;font-size:clamp(3rem,5vw,4.2rem);line-height:1;color:var(--brand)}
.b-info-r span{display:block;font-size:1.02rem;font-weight:500;color:#fff}
.b-info-r i{display:inline-block;font-style:normal;font-weight:600;font-size:.92rem;background:var(--brand);color:var(--ink);border-radius:10px;padding:3px 10px;margin-top:8px}
.b-info p{grid-column:1/-1;font-size:.95rem;line-height:1.5;color:#cfd6e0;min-height:4.4em}
.bento .sut{display:contents}
.bento .sut div{grid-column:span 2;grid-row:3;margin:0;border-radius:28px;background:var(--brand-soft);outline:0}
.bento .sut div:nth-child(1),.bento .sut div:nth-child(5){grid-column:span 3}
.bento .sut div:nth-child(2){background:var(--ink)}
.bento .sut div:nth-child(2) dd,.bento .sut div:nth-child(2) dt{color:#fff}
.bento .sut div:nth-child(4){background:var(--brand)}
.bento .sut div:nth-child(5){background:var(--surface);outline:2px solid var(--ink);outline-offset:-2px}
.bento .sut div:nth-child(5) dd,.bento .sut div:nth-child(5) dt{color:var(--ink)}
.sut dt{font-size:.86rem}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .b-head,.b-write,.b-info{grid-column:1/-1;grid-row:auto}
  .b-head{border-radius:32px}
  .bento .sut div,.bento .sut div:nth-child(1){grid-column:span 1;grid-row:auto}
  .bento .sut div:nth-child(5){grid-column:1/-1}
  .b-info p{min-height:0}
}
@media(max-width:560px){
  .b-write{grid-template-columns:minmax(0,1fr);border-radius:30px}
  .kaki-pick,#hbPick{flex-direction:row}
  .kaki-pick{height:auto}
  #hbPick button,#hbReplay{width:46px;height:46px}
  #hbReplay{margin:0 0 0 auto}
}

/* ---------- the phone and its launcher ---------- */
.tameshi{display:grid;grid-template-columns:372px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.tameshi-phone{display:flex;flex-direction:column;align-items:center}
.tameshi-frame{width:100%;max-width:372px;display:flex;justify-content:center}
.tameshi-note{font-size:.8rem;line-height:1.45;color:var(--sub);text-align:center;max-width:320px;margin-top:12px}
.tameshi-side{position:sticky;top:20px}
.koma{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.koma-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:112px;padding:10px 6px;border-radius:24px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:.9rem;line-height:1.2;color:var(--ink);text-align:center;transition:background .15s,border-color .15s,transform .15s}
.koma-b i{font-family:var(--f-cjk);font-weight:900;font-style:normal;font-size:2rem;line-height:1;color:var(--accent)}
.koma-b:hover{border-color:var(--brand);transform:translateY(-2px)}
.koma-b[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
.koma-b[aria-pressed="true"] i{color:var(--ink)}
.koma-panels{margin-bottom:10px}
.koma-p{display:none;border-radius:28px;background:var(--ink);padding:22px 26px;min-height:150px}
.koma-p.is-on{display:block}
.koma-p h3{color:var(--brand);font-size:1.3rem;margin-bottom:8px}
.koma-p p{color:#e3e8ef;font-size:1rem;line-height:1.55}
.try-chips{display:none}
@media(max-width:1000px){
  .tameshi{grid-template-columns:minmax(0,1fr);gap:16px}
  .tameshi-side{position:static}
  .koma{display:none}
  .koma-panels{margin:0}
  .koma-p{min-height:0}
  .try-chips{display:flex;gap:6px;overflow-x:auto;width:100vw;margin:0 calc(var(--gut) * -1) 14px;padding:2px var(--gut) 8px;scrollbar-width:none}
  .try-chips::-webkit-scrollbar{display:none}
  .try-chips button{flex:none;display:flex;align-items:center;gap:6px;padding:8px 14px;border:0;border-radius:14px;background:var(--brand-soft);font-family:var(--f-head);font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
  .try-chips button i{font-family:var(--f-cjk);font-weight:900;font-style:normal;color:var(--accent)}
  .try-chips button[aria-selected="true"]{background:var(--ink);color:#fff}
  .try-chips button[aria-selected="true"] i{color:var(--brand)}
}

/* ---------- seven steps: stations on one line ---------- */
.eki-line{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;margin-bottom:22px}
.eki-line::before{content:"";position:absolute;left:0;right:0;top:22px;height:12px;border-radius:6px;background:var(--brand)}
.eki-line li{position:relative;display:flex;justify-content:center}
.eki-line button{display:flex;flex-direction:column;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:0 4px;font-family:var(--f-head);font-weight:600;font-size:.92rem;line-height:1.25;color:var(--sub);text-align:center}
.eki-line b{width:56px;height:56px;border-radius:50%;background:var(--surface);border:5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:var(--ink);transition:transform .2s,background .2s,color .2s}
.eki-line button:hover b{background:var(--brand-soft)}
.eki-line button[aria-pressed="true"]{color:var(--ink)}
.eki-line button[aria-pressed="true"] b{background:var(--ink);color:var(--brand);transform:scale(1.16)}
.eki-signs{border:2px solid var(--ink);border-radius:30px;background:var(--surface);overflow:hidden}
.eki-sign{display:none;grid-template-columns:auto minmax(0,1fr);gap:8px 26px;align-items:center;padding:26px 30px;min-height:150px}
.eki-sign.is-on{display:grid}
.eki-no{display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border-radius:20px;border:6px solid var(--brand);font-family:var(--f-head);font-weight:800;font-size:2.3rem;line-height:1;color:var(--ink)}
.eki-no small{font-size:.86rem;letter-spacing:.08em;margin-bottom:3px}
.eki-sign h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:6px}
.eki-sign div p{font-size:1.04rem;line-height:1.55;max-width:70ch}
.eki-bar{display:flex;justify-content:space-between;gap:12px;background:var(--brand);padding:6px 10px}
.eki-bar button{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:8px 12px;border-radius:12px;font-family:var(--f-head);font-weight:600;font-size:.92rem;color:var(--ink);text-align:left}
.eki-bar button:hover{background:rgba(255,255,255,.5)}
.eki-bar i{font-style:normal;font-weight:800;font-size:1.1rem}
@media(max-width:820px){
  .eki-line span{display:none}
  .eki-line b{width:40px;height:40px;border-width:4px;font-size:.8rem}
  .eki-line::before{top:15px;height:10px}
  .eki-sign{grid-template-columns:1fr;padding:20px}
  .eki-no{width:70px;height:70px;font-size:1.7rem;border-width:5px}
  .eki-no small{font-size:.7rem}
  .eki-bar{gap:6px;padding:6px}
  .eki-bar button{flex:1 1 0;min-width:0;gap:6px;padding:8px;font-size:.84rem;line-height:1.25}
  .eki-bar button[data-step="1"]{justify-content:flex-end;text-align:right}
  .eki-bar button span{white-space:normal}
}

/* ---------- every tool: four bands of chips ---------- */
.kai{display:grid;gap:12px}
.kai-f{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;border-radius:34px;padding:16px;background:var(--brand-soft)}
.kai-f:nth-child(even){grid-template-columns:minmax(0,1fr) 168px}
.kai-f:nth-child(even) header{order:2}
.kai-f header{display:flex;flex-direction:column;border-radius:24px;background:var(--surface);padding:16px 18px;min-height:132px}
.kai-f header b{font-family:var(--f-cjk);font-weight:900;font-size:3rem;line-height:1;color:var(--accent)}
.kai-f header h3{font-size:1.24rem;margin-top:auto;padding-top:12px}
.kai-f header small{font-size:.8rem;font-weight:600;color:var(--sub)}
.kai-main{align-self:center;padding:6px 4px}
.kai-f ul{display:flex;flex-wrap:wrap;gap:8px}
.kai-f li button{display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:16px;border:0;background:var(--surface);font-family:var(--f-head);font-weight:600;font-size:.96rem;line-height:1.2;color:var(--ink);cursor:pointer;text-align:left;transition:background .15s,color .15s}
.kai-f li button i{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--brand-tint);font-family:var(--f-cjk);font-weight:900;font-style:normal;font-size:1.06rem;color:var(--accent)}
.kai-f li button .new{margin-left:2px}
.kai-f li button:hover{background:var(--ink);color:#fff}
.kai-f li button[aria-expanded="true"]{background:var(--ink);color:#fff}
.kai-f li button[aria-expanded="true"] i{background:var(--brand);color:var(--ink)}
.kai-d p{margin-top:12px;font-size:1rem;line-height:1.55;color:var(--ink);max-width:80ch}
.kai-d strong{font-weight:700}
.kai.is-js .kai-d p{display:none}
.kai.is-js .kai-d p.is-on{display:block}
.kai-practise{background:var(--surface);outline:2px solid var(--ink);outline-offset:-2px}
.kai-practise header{background:var(--brand)}
.kai-practise header b{color:var(--ink)}
.kai-practise header small{color:var(--ink)}
.kai-practise li button{background:var(--brand-tint)}
.kai-practise li button i{background:var(--surface)}
.kai-life{background:var(--brand)}
.kai-track{background:var(--ink)}
.kai-track header{background:var(--brand)}
.kai-track header b,.kai-track header small{color:var(--ink)}
.kai-track li button{background:#2c2c46;color:#fff}
.kai-track li button i{background:#3c3c5a;color:var(--brand)}
.kai-track li button:hover,.kai-track li button[aria-expanded="true"]{background:var(--brand);color:var(--ink)}
.kai-track li button[aria-expanded="true"] i{background:var(--ink);color:var(--brand)}
.kai-track .kai-d p{color:#e3e8ef}
.kai-track .kai-d strong{color:#fff}
@media(max-width:760px){
  .kai-f,.kai-f:nth-child(even){grid-template-columns:1fr;gap:12px;border-radius:28px;padding:12px}
  .kai-f:nth-child(even) header{order:0}
  .kai-f header{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 16px;border-radius:18px}
  .kai-f header b{font-size:2rem}
  .kai-f header h3{margin:0;padding:0}
  .kai-f header small{margin-left:auto}
  .kai-f li button{font-size:.9rem;padding:5px 12px 5px 5px}
  .kai-f li button i{width:32px;height:32px}
}

/* ---------- tools: blocks that link out ---------- */
.mosaic>a{position:relative;display:flex;flex-direction:column;border-radius:30px;padding:24px 26px;overflow:hidden;color:var(--ink);min-height:200px;transition:transform .15s}
.mosaic>a:hover{transform:translateY(-3px)}
.mosaic>a i{font-family:var(--f-cjk);font-weight:900}
.mosaic h3{font-size:1.3rem}
.mosaic>a p{flex:1;font-size:1rem}
.mosaic>a span{font-weight:700;font-size:.94rem;margin-top:14px;position:relative}
.mosaic>a span::after{content:" \2192"}
.mosaic>a.m3 span{color:var(--brand)}
@media(max-width:820px){.mosaic>a{grid-column:auto!important;min-height:0}}

/* ---------- reading: one lead block, three rows ---------- */
.yomi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
.yomi a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;border-radius:26px;padding:20px 24px;background:var(--surface);border:2px solid var(--line);color:var(--ink);overflow:hidden;transition:border-color .15s}
.yomi a:hover{border-color:var(--ink)}
.yomi-tag{grid-column:1/-1;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.yomi h3{font-size:1.12rem;line-height:1.25;font-weight:600}
.yomi-read{font-size:.84rem;color:var(--sub);white-space:nowrap}
.yomi a:first-child{grid-row:1/4;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;min-height:320px;background:var(--brand);border-color:var(--brand);padding:30px 32px;border-radius:36px}
.yomi a:first-child:hover{border-color:var(--ink)}
.yomi a:first-child i{position:absolute;right:20px;top:6px;font-family:var(--f-cjk);font-weight:900;font-style:normal;font-size:clamp(7rem,14vw,11rem);line-height:1;color:var(--ink);opacity:.14}
.yomi a:first-child .yomi-tag{color:var(--ink);background:#fff;border-radius:9px;padding:4px 10px}
.yomi a:first-child h3{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;max-width:16ch}
.yomi a:first-child .yomi-read{color:var(--ink)}
@media(max-width:820px){.yomi{grid-template-columns:1fr}.yomi a:first-child{grid-row:auto;min-height:240px}}

/* ---------- questions: heading beside the list ---------- */
.kan-split{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.kan-split .kan-head{position:sticky;top:24px;margin:0}
.kan-split .kan-head p{margin-top:20px}
@media(max-width:1000px){.kan-split{grid-template-columns:1fr}.kan-split .kan-head{position:static}}

/* ---------- start ---------- */
.sijak-kr{font-family:var(--f-cjk);font-weight:900;font-size:clamp(4rem,11vw,9rem);opacity:.1}
.sijak h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.sijak h2+p{font-size:1.08rem}
.jamae-hanguljo{background:#fff4f9;border-color:#f3dde6}
.jamae-hanguljo h3 a{color:#c2386c}
.jamae-row h3{font-size:1.14rem}
.jamae-row p{font-size:.96rem}
.credit{font-size:.8rem;color:var(--sub);margin-top:18px}
.credit a{text-decoration:underline}
/* the newest feature gets a full-width key under the 4x4 board */
.koma .koma-wide{grid-column:1/-1}
.koma .koma-wide .koma-b{flex-direction:row;min-height:64px;gap:12px;justify-content:center}
.koma .koma-wide .koma-b i{font-size:1.6rem}
.koma .koma-wide .new{margin-left:2px}

/* ---------- the 60-second tour: the promo video, with chapters (6 Oct 2026) ---------- */
.tour{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"head film" "ch film";grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,72px);row-gap:20px;align-items:start}
.tour>.kan-head{grid-area:head;margin-bottom:0}
.tour-film{grid-area:film;position:relative;margin:0;width:100%;max-width:360px;justify-self:end;align-self:center}
.tour-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:34px;background:#0e2416;box-shadow:0 0 0 2px var(--ink),0 34px 60px -30px rgba(14,36,22,.6);cursor:pointer;object-fit:cover}
.tour-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;background:var(--brand);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .2s,transform .2s}
.tour-play svg{margin-left:4px}
.tour-film.is-paused .tour-play{opacity:1;pointer-events:auto;transform:none}
.tour-play:hover{transform:scale(1.06)}
.tour-sound{position:absolute;left:16px;bottom:34px;display:flex;align-items:center;gap:7px;padding:9px 15px 9px 12px;border-radius:999px;border:0;background:rgba(255,255,255,.94);color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:.86rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);transition:background .15s}
.tour-sound:hover{background:#fff}
.tour-sound .on{display:none}
.tour-sound[aria-pressed="true"]{background:var(--brand)}
.tour-sound[aria-pressed="true"] .on{display:inline}
.tour-sound[aria-pressed="true"] .off{display:none}
.tour-prog{position:absolute;left:16px;right:16px;bottom:2px;height:30px;cursor:pointer;touch-action:none;border-radius:15px;outline:0}
.tour-prog::before,.tour-prog i{content:"";position:absolute;left:10px;right:10px;top:13px;height:4px;border-radius:2px;transition:height .15s,top .15s}
.tour-prog::before{background:rgba(255,255,255,.25)}
.tour-prog i{background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--k,0))}
.tour-prog b{position:absolute;top:9px;left:calc(10px + (100% - 20px) * var(--k,0));width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}
.tour-prog:hover::before,.tour-prog:hover i,.tour-prog.is-drag::before,.tour-prog.is-drag i{top:12px;height:6px;border-radius:3px}
.tour-prog:hover b,.tour-prog.is-drag b,.tour-prog:focus-visible b{opacity:1}
.tour-prog:focus-visible::before{box-shadow:0 0 0 2px var(--brand)}
.tour-ch{grid-area:ch;list-style:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;border-radius:30px;background:var(--surface);border:2px solid var(--line);padding:12px}
.tour-ch li{margin:0;min-width:0}
.tour-ch button{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px 12px;border-radius:16px;border:0;background:none;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:.95rem;line-height:1.2;color:var(--ink);text-align:left;transition:background .15s}
.tour-ch button:hover{background:var(--brand-tint)}
.tour-ch time{flex:none;min-width:2.5em;font-size:.82rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.tour-ch span{min-width:0}
.tour-ch button::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:2px;background:var(--brand-d);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:0;transition:opacity .2s}
.tour-ch button.is-on{background:var(--brand-soft)}
.tour-ch button.is-on::after{opacity:1}
.tour-ch button.is-done time{color:var(--sub)}
@media(max-width:1000px){
  .tour{grid-template-columns:minmax(0,1fr) 300px}
  .tour-film{max-width:300px}
  .tour-ch{grid-template-columns:minmax(0,1fr)}
  .tour-ch button{padding:8px 12px 10px}
}
@media(max-width:760px){
  .tour{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "film" "ch";grid-template-rows:auto;row-gap:18px}
  .tour-film{justify-self:center;max-width:min(320px,82vw)}
  .tour-ch{display:flex;overflow-x:auto;gap:6px;padding:8px;border-radius:22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tour-ch::-webkit-scrollbar{display:none}
  .tour-ch li{flex:none}
  .tour-ch button{white-space:nowrap;padding:9px 13px 11px;gap:8px}
}
@media(prefers-reduced-motion:reduce){.tour-play,.tour-ch button::after{transition:none}}