/* home.css — home page layer on top of site.css. Scoped to body.home. */

/* ---------- wallpaper + sheets ---------- */
body.home{
  background-color:#ebdeca;
  background-image:url(assets/wallpaper.webp);
  background-size:560px auto;
  background-attachment:fixed;
  font-size:calc(1.0625rem * var(--fs));
  line-height:1.8;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.home{background-image:none;background-color:#15130f}}
:root[data-theme="dark"] body.home{background-image:none;background-color:#15130f}
@media (max-width:700px){body.home{background-attachment:scroll;background-size:420px auto}}

body.home .wrap{max-width:68rem;margin:0 auto;padding:0 22px}
body.home .sheet{
  background:var(--paper);
  background-clip:padding-box;
  padding:48px 52px;
  box-shadow:0 1px 0 rgba(28,27,24,.08),0 18px 40px -28px rgba(28,27,24,.35);
}
body.home .framed{
  border:46px solid transparent;
  border-image:url(assets/giwa-frame.webp) 100 / 46px / 0 round;
  padding:28px 40px;
}
@media (max-width:700px){
  body.home .sheet{padding:28px 20px}
  body.home .framed{border-width:30px;border-image-width:30px;padding:14px 10px}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.home .framed{border-image-source:url(assets/giwa-frame.webp);filter:none}}
:root[data-theme="dark"] body.home .framed{opacity:1}

body.home section{border-bottom:0;padding:0;margin:0 0 112px}
body.home .band{margin:0 0 112px}
@media (max-width:700px){body.home section,body.home .band{margin-bottom:64px}}
body.home h2{font-size:calc(1.6em * var(--fs));line-height:1.35;margin:0 0 .9em;letter-spacing:-.005em}
body.home h3{font-size:1.18em}
body.home .prose{max-width:62ch}
body.home p{margin:0 0 1.1em}
body.home .lede{font-size:1.12em;line-height:1.75}

/* ---------- header: sticky, no logo, no name ---------- */
body.home .bar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
body.home .mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
body.home .mark svg{width:40px;height:26px;flex:none}
body.home .mark .t{font-family:"Noto Serif KR",Georgia,serif;font-weight:700;font-size:1.02em;letter-spacing:.01em}
body.home .mark .s{display:block;font-size:.72em;font-weight:500;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}

/* ---------- nav with dropdowns ---------- */
body.home .nav{background:var(--paper);border-bottom:1px solid var(--line)}
body.home .nav ul{position:relative}
body.home .nav li{position:relative}
body.home .nav button{
  background:transparent;border:0;color:var(--muted);font:inherit;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 12px;
}
body.home .nav button:hover,body.home .nav li[data-open] > button{color:var(--ink)}
body.home .nav button .caret{font-size:.7em;transition:transform .2s}
body.home .nav li[data-open] > button .caret{transform:rotate(180deg)}
body.home .nav .sub{
  display:none;position:absolute;left:0;top:100%;min-width:16rem;margin:0;padding:8px 0;list-style:none;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(0,0,0,.4);z-index:70;flex-direction:column;
}
body.home .nav li[data-open] > .sub,body.home .nav li:focus-within > .sub{display:flex}
@media (hover:hover){body.home .nav li.has-sub:hover > .sub{display:flex}}
body.home .nav .sub a{display:flex;min-height:48px;padding:0 18px;white-space:nowrap}
body.home .nav .sub a .n{font-family:"Pretendard Variable","Pretendard",sans-serif;color:var(--faint);margin-right:10px;font-size:.85em}
@media (max-width:700px){
  body.home .nav ul{gap:0 4px}
  body.home .nav a,body.home .nav button{min-height:44px;padding:0 10px}
  body.home .nav li.has-sub{position:static}
  body.home .nav .sub{left:0;right:0;min-width:0;border-left:0;border-right:0;padding:4px 0}
  body.home .nav .sub a{min-height:44px;padding:0 22px}
  body.home .bar .wrap{min-height:56px}
}

/* ---------- hero ---------- */
body.home .hero-art{position:relative;overflow:hidden;min-height:min(86svh,760px);display:grid;align-items:center;margin:0 0 96px;isolation:isolate}
@media (max-width:700px){body.home .hero-art{min-height:0;margin-bottom:56px}}
body.home .layers{position:absolute;inset:0;z-index:-1;pointer-events:none}
body.home .layers img{position:absolute;max-width:none;width:auto;height:auto;will-change:transform}
body.home .layers .far{left:-4%;top:4%;width:88%;opacity:.95;animation:driftx 70s ease-in-out infinite alternate}
body.home .layers .sea{left:-6%;bottom:-2%;width:92%;opacity:.9;animation:driftx 46s ease-in-out infinite alternate-reverse}
body.home .layers .jar{right:5%;bottom:5%;width:min(31vw,360px);animation:floaty 9s ease-in-out infinite}
body.home .mist{
  position:absolute;left:-20%;right:-20%;top:38%;height:22%;
  background:linear-gradient(90deg,transparent,rgba(246,243,236,.75) 30%,rgba(246,243,236,.9) 50%,rgba(246,243,236,.7) 70%,transparent);
  filter:blur(14px);animation:mist 40s linear infinite;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.home .mist{background:linear-gradient(90deg,transparent,rgba(29,26,23,.6) 50%,transparent)}}
:root[data-theme="dark"] body.home .mist{background:linear-gradient(90deg,transparent,rgba(29,26,23,.6) 50%,transparent)}
@media (max-width:700px){
  body.home .layers .far{width:140%;left:-25%;top:0}
  body.home .layers .sea{width:150%;left:-30%;bottom:auto;top:34%}
  body.home .layers .jar{display:none}
}

/* floating jamo */
body.home .jamo{position:absolute;inset:0;font-family:"Noto Serif KR",Georgia,serif;color:var(--ink);opacity:.16}
body.home .jamo span{position:absolute;font-size:var(--sz,3rem);font-weight:700;line-height:1;animation:floatj var(--dur,24s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@media (max-width:700px){body.home .jamo span{font-size:calc(var(--sz,3rem) * .6)}}

body.home .hero-sheet{
  position:relative;max-width:34rem;margin:64px 0;padding:44px 48px;
  background:var(--paper);background-clip:padding-box;
  border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(28,27,24,.45);
}
@media (max-width:700px){body.home .hero-sheet{margin:36px 0;padding:28px 22px;max-width:none}}
body.home .hero-sheet h1{font-size:calc(2.05em * var(--fs));line-height:1.3;margin:0 0 .6em;letter-spacing:-.01em;font-weight:700}
@media (max-width:700px){body.home .hero-sheet h1{font-size:calc(1.6em * var(--fs))}}
body.home .hero-sheet .eyebrow{margin-bottom:18px}
body.home .ctas{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 8px}
body.home .cta{
  display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;text-decoration:none;
  font-family:"Pretendard Variable","Pretendard",sans-serif;font-weight:700;font-size:1.08em;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
}
body.home .cta:hover{background:var(--celadon-deep);border-color:var(--celadon-deep)}
body.home .cta.ghost{background:transparent;color:var(--ink)}
body.home .cta.ghost:hover{background:var(--sunk)}
body.home .cta .num{font-size:1.05em}
body.home .hero-sheet .verify-line{margin:0}
body.home .num,body.home .cta{white-space:nowrap}

/* hero grid: sheet left, portrait right */
body.home .hero-grid{display:grid;grid-template-columns:minmax(0,34rem) minmax(16rem,1fr);gap:40px;align-items:end}
body.home .me{margin:0;position:relative;align-self:end;display:grid;justify-items:center;padding-bottom:0}
body.home .me img{width:min(100%,300px);height:auto;filter:drop-shadow(0 18px 24px rgba(28,27,24,.28))}
body.home .me .say{
  position:relative;margin:-28px 0 48px;max-width:26rem;
  background:var(--paper);background-clip:padding-box;border:1px solid var(--line);padding:18px 22px;
  box-shadow:0 18px 40px -28px rgba(28,27,24,.45);
}
body.home .me .say::before{content:"";position:absolute;left:50%;top:-11px;width:20px;height:20px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
body.home .me .say p{margin:0;font-size:.98em;line-height:1.7}
body.home .me .say .name{font-family:"Noto Serif KR",Georgia,serif;font-weight:700;font-size:1.08em;margin-bottom:6px}
body.home .me .say .name .ui{color:var(--muted);font-weight:500;font-size:.8em;margin-left:6px}
@media (max-width:900px){
  body.home .hero-grid{grid-template-columns:1fr}
  body.home .me{justify-items:start;grid-template-columns:120px 1fr;gap:16px;align-items:end;margin-bottom:40px}
  body.home .me img{width:120px}
  body.home .me .say{margin:0 0 8px}
  body.home .me .say::before{left:-11px;top:24px;transform:rotate(-45deg)}
}

/* motion control */
body.home .motion{
  position:absolute;right:16px;bottom:14px;z-index:2;
  font:inherit;font-size:.85em;font-family:"Pretendard Variable","Pretendard",sans-serif;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);min-height:44px;padding:0 14px;cursor:pointer;
}
body.paused .layers img,body.paused .mist,body.paused .jamo span,body.paused .jamo-band .track{animation-play-state:paused}

/* ---------- jamo band divider ---------- */
body.home .jamo-band{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(246,243,236,.55);margin:0 0 112px;
  font-family:"Noto Serif KR",Georgia,serif;font-weight:500;color:var(--ink);opacity:.9;
}
@media (max-width:700px){body.home .jamo-band{margin-bottom:64px}}
body.home .jamo-band .track{display:flex;width:max-content;animation:marquee 60s linear infinite}
body.home .jamo-band span{display:block;white-space:nowrap;padding:14px 0;font-size:1.5rem;letter-spacing:1.6em;opacity:.45}
body.home .jamo-band span::before{content:attr(data-j)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.home .jamo-band{background:rgba(29,26,23,.6)}}
:root[data-theme="dark"] body.home .jamo-band{background:rgba(29,26,23,.6)}

/* ---------- 기와 strip edge ---------- */
body.home .giwa-top{position:relative;padding-top:64px}
body.home .giwa-top::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:url(assets/giwa-strip.webp) top center / auto 46px repeat-x}
@media (max-width:700px){body.home .giwa-top{padding-top:50px}body.home .giwa-top::before{height:34px;background-size:auto 34px}}

/* ---------- numbers ---------- */
body.home .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 40px;margin:12px 0 0}
body.home .stat .v{font-family:"Pretendard Variable","Pretendard",sans-serif;font-weight:800;font-size:2.2em;line-height:1.1;letter-spacing:-.02em;color:var(--celadon-deep);display:block}
body.home .stat .k{display:block;margin-top:8px;color:var(--muted);font-size:.95em;line-height:1.5}
body.home .stat .src{display:block;margin-top:4px;color:var(--faint);font-size:.8em}

/* ---------- hub cards ---------- */
body.home .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:30px;margin-top:8px}
body.home .card2{
  display:grid;grid-template-columns:84px 1fr;gap:22px;align-items:start;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:28px 26px;
  box-shadow:0 14px 30px -26px rgba(28,27,24,.5);
}
body.home .card2:hover{border-color:var(--celadon-deep)}
body.home .card2:hover h3{text-decoration:underline;text-underline-offset:.15em}
body.home .card2 img{width:84px;height:84px;object-fit:contain;filter:saturate(.75)}
body.home .card2 .n{font-family:"Pretendard Variable","Pretendard",sans-serif;font-size:.8em;color:var(--faint);letter-spacing:.1em}
body.home .card2 h3{margin:4px 0 8px}
body.home .card2 p{margin:0;color:var(--muted);font-size:.97em;line-height:1.65}

/* ---------- identity ---------- */
body.home .who{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:start}
body.home .who img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
body.home .who .name{font-family:"Noto Serif KR",Georgia,serif;font-size:1.5em;font-weight:700;margin:0 0 .4em;line-height:1.3}
body.home .who .name .ui{display:block;font-size:.62em;color:var(--muted);font-weight:500;margin-top:4px}
@media (max-width:700px){body.home .who{grid-template-columns:1fr}body.home .who img{max-width:180px}}

/* ---------- fee + verify (reuse site.css rows inside sheets) ---------- */
body.home .sum{margin:20px 0}
body.home .phone{margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
body.home .verify .kv{padding:12px 0}

/* ---------- footer ---------- */
body.home footer{background:var(--paper);border-top:1px solid var(--line);padding:48px 0 40px}
body.home footer .fine{max-width:70ch}

/* ---------- motion ---------- */
@keyframes driftx{from{transform:translate3d(0,var(--py,0px),0)}to{transform:translate3d(2.5%,var(--py,0px),0)}}
@keyframes floaty{0%,100%{transform:translate3d(0,var(--py,0px),0)}50%{transform:translate3d(0,calc(var(--py,0px) - 6px),0)}}
@keyframes mist{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
@keyframes floatj{from{transform:translate(0,0) rotate(-2deg)}to{transform:translate(14px,-22px) rotate(3deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  body.home .layers img,body.home .mist,body.home .jamo span,body.home .jamo-band .track{animation:none !important}
  body.home .motion{display:none}
}

/* ---------- print ---------- */
@media print{
  body.home{background:#fff}
  body.home .layers,body.home .jamo-band,body.home .motion,body.home .giwa-top{display:none}
  body.home .framed{border:1px solid #999;border-image:none}
  body.home .sheet{box-shadow:none}
}

/* in-page jumps (hero "send a message" link) land below the sticky header */
body.home section[id]{scroll-margin-top:110px}

/* ---------- centring: content column sits in the middle of each sheet ---------- */
body.home .sheet > :not(.stats):not(.cards):not(h2){max-width:38rem;margin-left:auto;margin-right:auto}
body.home .sheet > h2{text-align:center}
body.home .stats{text-align:center}
@media (min-width:1000px){
  body.home .cards{grid-template-columns:repeat(6,1fr)}
  body.home .card2{grid-column:span 2}
  body.home .card2:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
}
body.home footer .wrap{text-align:center}
body.home footer .fine{margin-left:auto;margin-right:auto}
body.home footer .legal{justify-content:center}