/* Hanguljo home: the block builder, the accordion that drives the phone, shelves of features. */

.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(--pink-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(--rose)}
.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}

.jo{background:var(--surface);border:2px solid var(--ink);border-radius:34px;padding:clamp(18px,2.4vw,30px)}
.jo-stage{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px)}
.jo-block{width:clamp(132px,17vw,190px);aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:8px}
.jo-block.v{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.jo-block.t{grid-template-rows:1.3fr .9fr}
.jo-block.v.t{grid-template-rows:1fr 1fr .9fr}
.jo-block i{display:flex;align-items:center;justify-content:center;border-radius:18px;font-family:var(--f-kr);font-style:normal;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;color:#fff;animation:joIn .34s cubic-bezier(.2,.8,.2,1) both}
.jo-block .a{background:var(--pink-deep)}
.jo-block .b{background:var(--blue);animation-delay:.07s}
.jo-block .c{background:var(--green);grid-column:1/-1;animation-delay:.14s}
@keyframes joIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.jo-eq{font-family:var(--f-head);font-weight:800;font-size:2rem;color:var(--sub)}
.jo-syl{width:clamp(132px,17vw,190px);aspect-ratio:1;border-radius:26px;border:0;background:var(--pink-soft);cursor:pointer;font-family:var(--f-kr);font-size:clamp(5.4rem,11vw,8.6rem);line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s}
.jo-syl:hover{background:var(--pink)}
.jo-syl.pop{animation:joPop .3s ease}
@keyframes joPop{50%{transform:scale(1.06)}}
.jo-say{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;margin:18px 0 14px;font-size:1rem;line-height:1.4;color:var(--sub)}
.jo-say b{font-family:var(--f-head);font-size:1.9rem;font-weight:800;color:var(--rose);min-width:3ch;letter-spacing:-.02em}
.jo-rows{display:grid;gap:8px}
.jo-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
.jo-row>span{font-family:var(--f-head);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;width:4.6em;line-height:1.2}
.jo-row.a>span{color:var(--pink-deep)}.jo-row.b>span{color:#4a72cf}.jo-row.c>span{color:#4e8e4d}
.jo-row div{display:flex;gap:5px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.jo-row div::-webkit-scrollbar{display:none}
.jo-row button{flex:none;width:40px;height:40px;border-radius:12px;border:0;background:var(--pink-tint);cursor:pointer;font-family:var(--f-kr);font-size:1.25rem;color:var(--ink);line-height:1}
.jo-row.a button.on{background:var(--pink-deep);color:#fff}
.jo-row.b button.on{background:var(--blue);color:#fff}
.jo-row.c button.on{background:var(--green);color:#fff}
.sut{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-top:clamp(28px,4vw,52px)}
.sut div{border-radius:var(--r);padding:18px 18px 16px;background:var(--pink-soft)}
.sut div:nth-child(2){background:var(--pink)}
.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-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sut div:last-child:nth-child(odd){grid-column:1/-1}
}

/* ---------- sections ---------- */
.kan{padding:clamp(50px,7vw,96px) 0}
.kan-tint{background:var(--pink-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}

/* ---------- accordion + phone ---------- */
.sal{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(24px,4vw,64px);align-items:start}
.sal-phone{position:sticky;top:20px;display:flex;flex-direction:column;align-items:center}
.sal-frame{width:100%;max-width:372px;display:flex;justify-content:center}
.sal-note{font-size:.84rem;line-height:1.45;color:var(--sub);text-align:center;max-width:320px;margin-top:12px}
.try-chips{display:none}
.sal-list{display:grid;gap:8px}
.sal-item{border-radius:22px;background:var(--surface);border:2px solid var(--line);overflow:hidden;transition:background .2s,border-color .2s}
.sal-h{display:flex;align-items:center;gap:14px;width:100%;padding:11px 16px 11px 11px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--f-head);font-weight:700;font-size:1.18rem;color:var(--ink);line-height:1.2}
.sal-h i{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:var(--pink-soft);color:var(--rose);font-family:var(--f-kr);font-style:normal;font-size:1.4rem;transition:background .2s,color .2s}
.sal-h::after{content:"+";margin-left:auto;font-size:1.5rem;font-weight:500;color:var(--sub);transition:transform .2s}
.sal-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.sal-b p{overflow:hidden;min-height:0;padding:0 18px 0 71px;font-size:1.08rem;line-height:1.48;color:var(--ink)}
.sal-b p::after{content:"";display:block;height:16px}
.sal-item:hover{border-color:var(--pink)}
.sal-item.is-on{background:var(--pink);border-color:var(--pink)}
.sal-item.is-on .sal-h i{background:var(--ink);color:#fff}
.sal-item.is-on .sal-h::after{transform:rotate(45deg);color:var(--ink)}
.sal-item.is-on .sal-b{grid-template-rows:1fr}
@media(max-width:1000px){
  .sal{grid-template-columns:minmax(0,1fr)}
  .sal-phone{position:static;order:-1}
  .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(--pink-soft);font-family:var(--f-head);font-size:.92rem;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap}
  .try-chips button i{font-family:var(--f-kr);font-style:normal;color:var(--rose)}
  .try-chips button[aria-selected="true"]{background:var(--ink);color:#fff}
  .try-chips button[aria-selected="true"] i{color:var(--pink)}
}

/* ---------- 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-kr);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(--pink)}
.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(--pink-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(--pink-soft);border-color:var(--pink-soft)}
.seon-life{background:var(--pink-tint);border-color:var(--pink)}
.seon h3{display:flex;align-items:center;gap:10px;font-size:1.36rem;margin-bottom:8px}
.seon h3 b{font-family:var(--f-kr);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(--rose)}
.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-kr);font-style:normal;font-size:1.3rem;line-height:1.2;color:var(--rose)}
.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(--rose);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(--pink);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-kr);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}}

/* ---------- the 60-second tour (Hanguljo): the promo video, with chapters (6 Oct 2026). build_site_css.py stops before this block. ---------- */
.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:#1c0a14;box-shadow:0 0 0 2px var(--ink),0 34px 60px -30px rgba(60,14,36,.55);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(--pink);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(--pink)}
.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(--pink);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(--pink)}
.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(--pink-tint)}
.tour-ch time{flex:none;min-width:2.5em;font-size:.82rem;font-weight:700;color:var(--rose);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(--pink-deep);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:0;transition:opacity .2s}
.tour-ch button.is-on{background:var(--pink-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}}