/* GardenAI Labs — site.css
   테마: body.theme-light (홈) / body.theme-dark (DAYDEA 하위 페이지) */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --font:"DM Sans","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  /* spacing */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  /* type */
  --t-xs:.8125rem;--t-sm:.9375rem;--t-md:1.0625rem;--t-lg:1.25rem;--t-xl:1.75rem;--t-2xl:2.5rem;
  --t-hero:clamp(2.75rem,7.2vw,5.5rem);
  --radius-s:12px;--radius-m:20px;--radius-l:28px;
  --wrap:1120px;--narrow:680px;
}
.theme-light{
  --bg:#f5f4ee;--surface:#ffffff;--text:#161714;--muted:#575a51;--line:#dedcd2;
  --accent:#161714;--accent-ink:#f5f4ee;--focus:#161714;--chip:#ebe9e0;
  color-scheme:light;
}
.theme-dark{
  --bg:#0c0d0b;--surface:#181a16;--text:#f1f1ea;--muted:#a3a69c;--line:#33372e;
  --accent:#dbee7c;--accent-ink:#0c0d0b;--focus:#dbee7c;--chip:#23261f;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.1}
p{margin:0}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{letter-spacing:-.02em;word-break:keep-all}
:lang(ko) p,:lang(ko) li{word-break:keep-all}

/* i18n: html[data-lang]에 맞지 않는 언어 블록 숨김 */
html[data-lang="ko"] body [lang="en"],html[data-lang="en"] body [lang="ko"]{display:none!important}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--text);color:var(--bg);padding:var(--s2) var(--s4);border-radius:8px;z-index:10;text-decoration:none}
.skip:focus{top:var(--s4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:var(--narrow)}
@media (min-width:768px){.wrap{padding:0 var(--s7)}}

/* header */
.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--s4)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.03em;text-decoration:none;font-size:var(--t-md)}
.brand img,.brand svg{width:26px;height:26px}
.crumbs{display:flex;align-items:center;gap:var(--s3);min-width:0}
.crumbs .back{color:var(--muted);text-decoration:none;font-size:var(--t-sm);white-space:nowrap}
.crumbs .back:hover{color:var(--text)}
.crumbs .slash{color:var(--line)}
.lang-toggle{font:inherit;font-size:var(--t-xs);font-weight:500;letter-spacing:.04em;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;min-height:44px;padding:0 var(--s4);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.lang-toggle:hover{border-color:var(--text)}
.lang-toggle .on{color:var(--text);font-weight:700}
.lang-toggle .sep{opacity:.5}

/* common */
.eyebrow{font-size:var(--t-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:lang(ko) .eyebrow,.eyebrow:lang(ko){letter-spacing:.02em}
.section{padding:var(--s9) 0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:var(--s4);margin-bottom:var(--s2)}
.section-head h2{font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--muted)}
.count{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}

/* HOME */
.home-hero{padding:var(--s9) 0 var(--s8)}
.home-hero h1{font-size:clamp(2.4rem,6vw,4.5rem);max-width:15ch}
.home-hero h1 span.soft{color:var(--muted)}
.home-hero p.lead{margin-top:var(--s5);max-width:34rem;font-size:var(--t-lg);color:var(--muted);line-height:1.55}
.projects{padding:var(--s7) 0 var(--s9)}
.project-list{list-style:none;margin:0;padding:0}
.project-row{border-bottom:1px solid var(--line)}
.project-link{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:var(--s5);padding:var(--s5) 0;text-decoration:none;border-radius:var(--radius-m)}
.project-link:hover .p-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.project-link:hover .arrow{transform:translateX(4px)}
.project-link img{width:72px;height:72px;border-radius:17px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.35)}
.p-name{font-size:var(--t-xl);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.p-desc{color:var(--muted);margin-top:2px}
.p-meta{display:flex;align-items:center;gap:var(--s4)}
.tag{display:inline-block;font-size:var(--t-xs);padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--text);white-space:nowrap}
.arrow{transition:transform .2s ease;font-size:var(--t-lg)}
@media (max-width:640px){
  .project-link{grid-template-columns:56px 1fr;gap:var(--s4)}
  .project-link img{width:56px;height:56px;border-radius:13px}
  .p-meta{grid-column:2;margin-top:-6px}
  .p-meta .arrow{display:none}
  .p-name{font-size:var(--t-lg)}
}
.about{display:grid;grid-template-columns:1fr;gap:var(--s5);padding:var(--s8) 0 var(--s9);border-top:1px solid var(--line)}
@media (min-width:860px){.about{grid-template-columns:1fr 1.4fr}}
.about h2{font-size:var(--t-sm);color:var(--muted);font-weight:500;letter-spacing:0}
.about p{font-size:var(--t-lg);line-height:1.55;max-width:36rem}
.about .mail{display:inline-block;margin-top:var(--s5);font-size:var(--t-lg)}

/* DAYDEA */
.dd-hero{padding:var(--s8) 0 var(--s7)}
.dd-hero .app-id{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.dd-hero .app-id img{width:64px;height:64px;border-radius:15px;border:1px solid var(--line)}
.dd-hero .app-id b{display:block;font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.dd-hero h1{font-size:var(--t-hero);font-weight:500;letter-spacing:-.05em;line-height:1.02}
.dd-hero h1 em{font-style:normal;color:var(--accent)}
.dd-hero .lead{margin-top:var(--s5);max-width:36rem;font-size:var(--t-lg);color:var(--muted);line-height:1.55}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.store-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--s5);border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;font-size:var(--t-md)}
.store-btn svg{width:20px;height:20px}
.store-btn[aria-disabled="true"]{cursor:default}
.store-btn small{font-weight:500;opacity:.75;font-size:var(--t-xs)}
.text-link{color:var(--muted);font-size:var(--t-sm)}
.text-link:hover{color:var(--text)}
.shots{padding:var(--s6) 0 var(--s8)}
.shot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);list-style:none;margin:0;padding:0}
.shot-row figure{margin:0}
.phone{border-radius:34px;overflow:hidden;border:1px solid var(--line);background:var(--surface);aspect-ratio:393/852;box-shadow:0 30px 60px -30px rgba(219,238,124,.18)}
.phone img{width:100%;height:100%;object-fit:cover}
.shot-row figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);text-align:center}
@media (max-width:760px){
  .shot-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s4);padding-bottom:var(--s3);margin:0 calc(var(--s5)*-1);padding-left:var(--s5);padding-right:var(--s5);scrollbar-width:none}
  .shot-row::-webkit-scrollbar{display:none}
  .shot-row li{flex:0 0 72%;scroll-snap-align:center}
}
.features{padding:var(--s8) 0;border-top:1px solid var(--line)}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:860px){.feature-list{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.feature-list .num{font-size:var(--t-xs);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.feature-list h3{font-size:var(--t-xl);margin:var(--s3) 0 var(--s3)}
.feature-list p{color:var(--muted)}
.words{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.words span{font-size:var(--t-xs);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--text)}
.words span.c{border-style:dashed;color:var(--muted)}
.closing{padding:var(--s9) 0;border-top:1px solid var(--line);text-align:left}
.closing h2{font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-.04em;max-width:18ch}
.closing .links{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6)}

/* doc pages (privacy / support) */
.doc{padding:var(--s8) 0 var(--s9)}
.doc h1{font-size:clamp(2.2rem,5vw,3.25rem);letter-spacing:-.04em}
.doc .meta{margin-top:var(--s3);color:var(--muted);font-size:var(--t-sm)}
.doc h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em;margin:var(--s7) 0 var(--s3)}
.doc p,.doc li{color:var(--text);opacity:.92}
.doc p+p{margin-top:var(--s3)}
.doc ul{padding-left:1.2em;margin:var(--s3) 0}
.doc li+li{margin-top:var(--s2)}
.doc .muted{color:var(--muted)}
.draft-banner{margin-top:var(--s6);border:1px dashed #e7b75a;color:#f3d79c;background:rgba(231,183,90,.08);border-radius:var(--radius-s);padding:var(--s4) var(--s5);font-size:var(--t-sm)}
.draft-banner strong{color:#ffd88a}
mark.todo{background:rgba(231,183,90,.16);color:#ffd88a;border-radius:4px;padding:0 4px;font-size:.92em}
.mail-card{margin-top:var(--s6);border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-m);padding:var(--s6)}
.mail-card .label{font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.mail-card a{display:inline-block;margin-top:var(--s2);font-size:clamp(1.25rem,4.5vw,1.75rem);font-weight:500;letter-spacing:-.02em;color:var(--accent);word-break:break-all}
.toc{margin-top:var(--s6);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-m);font-size:var(--t-sm)}
.toc ol{margin:var(--s2) 0 0;padding-left:1.3em;columns:2;column-gap:var(--s6)}
@media (max-width:560px){.toc ol{columns:1}}
.toc a{color:var(--muted);text-decoration:none}.toc a:hover{color:var(--text);text-decoration:underline}
dl.faq{margin:var(--s3) 0 0}
dl.faq dt{font-weight:600;margin-top:var(--s5)}
dl.faq dd{margin:var(--s2) 0 0;color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s6);font-size:var(--t-sm);color:var(--muted)}
.site-footer .grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:760px){.site-footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h2{font-size:var(--t-xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.site-footer .f-brand{color:var(--text);font-weight:600;font-size:var(--t-md)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li+li{margin-top:var(--s2)}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .legal{margin-top:var(--s7);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font-size:var(--t-xs)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.words>span{display:contents}
.home-crumb,.sub-crumb{display:inline-flex;align-items:center;gap:var(--s3)}
.crumbs{overflow:hidden}
@media (max-width:560px){.home-crumb,.sub-crumb{display:none}}
.toc ol{list-style:none;padding-left:0}
/* 원문 개인정보처리방침 (section > h2 + p 구조) */
.policy section{margin-top:var(--s5)}
.policy section h2{margin-top:var(--s6)}
.policy .policy-mail{margin-top:var(--s7)}
.policy .policy-mail a{color:var(--accent)}
/* 사업자 정보 블록 (BUSINESS_INFO가 채워졌을 때만 렌더링) */
.site-footer .biz{margin:var(--s6) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-xs)}
.site-footer .biz div{display:flex;gap:6px}
.site-footer .biz dt{color:var(--muted)}
.site-footer .biz dd{margin:0;color:var(--text)}
@media (min-width:760px){.site-footer .grid{grid-template-columns:1.4fr 1fr 1fr}}

/* ===== v3 — HOME: TinyWins식 작업 그리드 (밝은 흰 배경) ===== */
.theme-light{--bg:#ffffff;--surface:#ffffff;--muted:#5c5f57;--line:#e6e5df;--chip:#f1f0ea}
.intro{padding:var(--s9) 0 var(--s8)}
.intro h1{font-size:clamp(2rem,4.4vw,3.5rem);max-width:20ch;letter-spacing:-.04em;line-height:1.08}
.intro .lead{margin-top:var(--s5);max-width:34rem;font-size:var(--t-lg);color:var(--muted);line-height:1.55}
.work{padding:0 0 var(--s9)}
.work-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--line)}
.work-head h2{font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--muted)}
.work-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s5)}
.work-grid.is-solo .work-card{grid-column:span 2}
.work-card a{display:block;text-decoration:none;border-radius:10px}
.cover{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#e9ece6}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work-card a:hover .cover img{transform:scale(1.025)}
.work-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-top:var(--s3)}
.w-name{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}
.w-line{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.work-card a:hover .w-name{text-decoration:underline;text-underline-offset:3px}
.more-soon{margin-top:var(--s6);font-size:var(--t-sm);color:var(--muted)}
@media (max-width:860px){.work-grid{grid-template-columns:1fr}.work-grid.is-solo .work-card{grid-column:auto}}

/* ===== v3 — DAYDEA: Affinity 무드(블랙, 큰 헤드라인, 진한 컬러 포인트) + Monologue 구조 ===== */
.page-daydea{--bg:#000000}
.page-daydea .site-header{background:color-mix(in srgb,#000 82%,transparent)}
.dd-hero2{padding:var(--s9) 0 0;text-align:center;overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;font-size:var(--t-xs);color:var(--muted);background:#0e0f0d}
.pill img{width:22px;height:22px;border-radius:6px}
.dd-hero2 h1{margin:var(--s6) auto 0;font-size:clamp(3rem,9.5vw,8.5rem);font-weight:700;letter-spacing:-.06em;line-height:.95}
.dd-hero2 h1:lang(ko),:lang(ko) .dd-hero2 h1{letter-spacing:-.045em;line-height:1.02}
.dd-hero2 h1 em{font-style:normal;color:var(--accent)}
.dd-hero2 .lead{margin:var(--s5) auto 0;max-width:30rem;font-size:var(--t-lg);color:var(--muted);line-height:1.5}
.cta-row.center{justify-content:center}
.avail{margin-top:var(--s3);font-size:var(--t-xs);color:var(--muted)}
.stage{position:relative;max-width:1000px;height:clamp(420px,58vw,700px);margin:var(--s8) auto 0;padding:0 var(--s5)}
.stage .tile{position:absolute;border-radius:28px}
.stage .t1{left:6%;top:16%;width:30%;height:58%;background:#dbee7c;transform:rotate(-7deg)}
.stage .t2{right:6%;top:10%;width:30%;height:62%;background:linear-gradient(140deg,#d2a17b,#e8b8a0);transform:rotate(6deg)}
.stage .t3{left:32%;top:4%;width:36%;height:96%;background:radial-gradient(ellipse at 100% 105%,#d2a17b,transparent 60%),linear-gradient(130deg,#294d51,#4d7375 70%,#919283)}
.stage-phone{position:absolute;margin:0;width:clamp(150px,24vw,270px)}
.stage-phone .phone{box-shadow:0 40px 80px -30px rgba(0,0,0,.8);border:6px solid #0c0d0b;border-radius:36px}
.stage-phone.center{left:50%;top:9%;transform:translateX(-50%);z-index:3}
.stage-phone.left{left:12%;top:26%;transform:rotate(-7deg);z-index:2}
.stage-phone.right{right:12%;top:22%;transform:rotate(6deg);z-index:2}
@media (max-width:640px){
  .stage{height:132vw;margin-top:var(--s7)}
  .stage-phone{width:46vw}
  .stage-phone.left{left:2%;top:24%}.stage-phone.right{right:2%;top:20%}
  .stage .t1{left:0;width:40%}.stage .t2{right:0;width:40%}.stage .t3{left:24%;width:52%}
}
.features2{padding:var(--s9) 0 var(--s8);border-top:1px solid var(--line);margin-top:calc(var(--s8)*-1);position:relative;z-index:4;background:var(--bg)}
.closing2{padding:var(--s9) 0 0;border-top:1px solid var(--line);text-align:center;overflow:hidden}
.closing2 h2{font-size:clamp(2rem,5vw,3.75rem);font-weight:700;letter-spacing:-.045em;max-width:16ch;margin:0 auto}
.closing2 .links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5)}
.giant{margin-top:var(--s8);font-size:clamp(5rem,22vw,20rem);font-weight:700;letter-spacing:-.07em;line-height:.8;color:#141612;user-select:none;transform:translateY(12%)}
.intro h1{max-width:none}
.work-note{display:flex;align-items:flex-end;padding-bottom:calc(var(--s7) + 4px);border-left:1px solid var(--line);padding-left:var(--s5)}
.work-note .more-soon{margin:0;line-height:1.6}
@media (max-width:860px){.work-note{border-left:0;padding:0}}
/* v4 — 예시 프로젝트 미리보기 */
.work-grid .is-featured{grid-column:span 2}
.work-grid .is-featured .cover{aspect-ratio:auto;height:calc(100% - 64px)}
.work-grid .is-featured a{height:100%;display:flex;flex-direction:column}
.work-grid .is-featured .cover{flex:1;min-height:0}
.card-static{display:block;cursor:default}
.tag-example{background:transparent;border:1px dashed #b9b7ad;color:var(--muted)}
@media (max-width:860px){.work-grid .is-featured{grid-column:auto}.work-grid .is-featured .cover{aspect-ratio:16/10;height:auto}}
.cover picture{display:block;width:100%;height:100%}
.work-grid .is-featured .cover{height:auto}
/* 대표 카드 커버 높이 = 1칸 커버 높이 (2칸 폭 - gap)/2 × 10/16 */
@media (min-width:861px){
  .work-grid .is-featured{container-type:inline-size}
  .work-grid .is-featured a{height:auto}
  .work-grid .is-featured .cover{flex:none;aspect-ratio:auto;height:calc((100cqw - var(--s5)) / 2 * .625)}
}