/* Layout: 한 줄 세로 흐름, 기준표 라벨(스펙 카드) 모티프. 기존 synitart.com/synberry 설문과 같은 토큰 */
:root{
  --bg:#FFF9F7; --surface:#FFFFFF; --ink:#1D1314; --muted:#5A4A4C; --line:#E6D3D3;
  --berry:#B5122B; --berry-ink:#FFFFFF; --leaf:#1E6B3A; --leaf-ink:#FFFFFF; --focus:#0B57D0; --tint:#FBE9EA; --tint2:#E7F3EB; --hold:#5A5F66;
  --bar2:#8C7A7C;
  --f-display:"Black Han Sans","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --s-1:clamp(1.15rem,1.05rem + .4vw,1.3rem); --s-2:clamp(1.55rem,1.25rem + 1.1vw,2.1rem);
  --s-3:clamp(2.1rem,1.4rem + 2.8vw,3.4rem);
  --fs:19px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#150E0F; --surface:#21171A; --ink:#FBEFEF; --muted:#D5BFC1; --line:#4A3438;
  --berry:#FF5C70; --berry-ink:#1A0B0D; --leaf:#6BD493; --leaf-ink:#0B1A10; --focus:#8AB4F8; --tint:#2E1A1E; --tint2:#16261C; --hold:#A9AEB5; --bar2:#9C8A8C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#150E0F; --surface:#21171A; --ink:#FBEFEF; --muted:#D5BFC1; --line:#4A3438;
  --berry:#FF5C70; --berry-ink:#1A0B0D; --leaf:#6BD493; --leaf-ink:#0B1A10; --focus:#8AB4F8; --tint:#2E1A1E; --tint2:#16261C; --hold:#A9AEB5; --bar2:#9C8A8C; color-scheme:dark}
*{box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.7;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1000px;margin:0 auto;display:grid;gap:84px}
main{display:grid;gap:84px}
a{color:var(--berry);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2{font-family:var(--f-display);font-weight:400;line-height:1.25;text-wrap:balance;margin:0}
h1{font-size:var(--s-3)} h2{font-size:var(--s-2)}
h3{margin:0;font-size:1.15rem;line-height:1.4;text-wrap:balance}
p{margin:0;max-width:62ch}
.eyebrow{font-weight:700;letter-spacing:.06em;color:var(--leaf);font-size:.9rem}
.muted{color:var(--muted)} .small{font-size:.9rem}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:30}
.skip:focus{left:16px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:2px solid var(--ink);display:grid;gap:10px;padding-block:14px}
.toprow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
.logo{font-family:"Noto Sans KR",var(--f-body);font-weight:900;font-size:1.45rem;white-space:nowrap;text-decoration:none;color:var(--ink)}
.logo .hold{color:var(--hold);font-weight:700;font-size:.78em}
.logo .syn{color:var(--leaf)} .logo b{color:var(--berry);font-weight:900}
.logo .tm{font-size:.5em;font-weight:700;vertical-align:super;margin-left:1px;color:var(--ink)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status{white-space:nowrap;font-size:.82rem;font-weight:700;border:2px solid var(--ink);padding:3px 12px;border-radius:999px}
.tbtn{font:inherit;font-weight:700;font-size:.85rem;min-height:40px;min-width:44px;padding:4px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
nav.menu{display:flex;gap:4px 18px;flex-wrap:wrap;font-weight:700;font-size:.95rem}
nav.menu a{color:var(--ink);text-decoration:none;padding:2px 0;border-bottom:3px solid transparent}
nav.menu a:hover,nav.menu a[aria-current="page"]{border-bottom-color:var(--berry)}

/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--berry);color:var(--berry-ink);font-weight:700;font-size:1.05rem;
  padding:14px 22px;border-radius:12px;text-decoration:none;border:2px solid var(--berry);font-family:inherit;cursor:pointer}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta.leaf{background:var(--leaf);border-color:var(--leaf);color:var(--leaf-ink)}
.cta:hover{filter:brightness(1.07)}
.cta[disabled]{opacity:.55;cursor:not-allowed;filter:none}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:44px;align-items:center;padding-top:20px}
.hero>div{min-width:0;display:grid;gap:22px}
.lead{font-size:var(--s-1);color:var(--muted)}
.spec{background:var(--surface);border:3px solid var(--ink);border-radius:6px;padding:22px;display:grid;gap:12px;box-shadow:8px 8px 0 var(--berry);font-family:var(--f-mono)}
.spec .cap{font-family:var(--f-body);font-size:.82rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.spec .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1.5px dashed var(--line);padding-bottom:9px;font-size:.98rem}
.spec .row span:first-child{font-family:var(--f-body);color:var(--muted)}
.spec .row span:last-child{text-align:right}

/* three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.door{border:2px solid var(--ink);border-radius:12px;padding:20px;display:grid;gap:10px;align-content:start;background:var(--surface);min-width:0;text-decoration:none;color:var(--ink)}
.door:hover{box-shadow:6px 6px 0 var(--berry)}
.door .who{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--leaf)}
.door p{color:var(--muted);font-size:.95rem}
.door .go{font-weight:700;color:var(--berry)}

/* section scaffolding */
section{display:grid;gap:28px;scroll-margin-top:150px}
.shead{display:grid;gap:12px;border-top:2px solid var(--ink);padding-top:26px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{border:2px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:6px;align-content:start;min-width:0;background:var(--surface)}
.stat .n{font-family:var(--f-mono);font-weight:600;font-size:2rem;line-height:1.1;color:var(--berry)}
.stat .d{font-size:.95rem}
.stat .s{font-size:.78rem;color:var(--muted)}

/* chart */
.chartbox{border:2px solid var(--line);border-radius:10px;padding:20px;background:var(--surface);display:grid;gap:14px;min-width:0}
.scrollx{overflow-x:auto}
.chartbox svg{display:block;width:100%;min-width:520px;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.92rem}
.key{display:inline-flex;align-items:center;gap:8px}
.sw{width:28px;height:16px;border:2px solid var(--ink);display:inline-block}
.sw.a{background:var(--berry)}
.sw.b{background:repeating-linear-gradient(45deg,var(--bar2) 0 4px,transparent 4px 8px)}
table.mini{border-collapse:collapse;width:100%;font-size:.92rem;min-width:480px}
table.mini th,table.mini td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:right}
table.mini th:first-child,table.mini td:first-child{text-align:left}
table.mini thead th{border-bottom:2px solid var(--ink)}

/* trend list */
.trends{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.trends li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 28px;padding-block:20px;border-bottom:1px solid var(--line)}
.trends h3{font-size:1.1rem}
.trends p{color:var(--muted)}
.trends .ev{display:block;margin-top:6px;font-size:.85rem;color:var(--ink);font-family:var(--f-mono)}

/* news timeline */
.news{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.news li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:8px 22px;border:2px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);scroll-margin-top:160px}
.news li:target{border-color:var(--berry);box-shadow:6px 6px 0 var(--berry)}
.news .date{font-family:var(--f-mono);font-weight:600;font-size:.95rem;display:grid;gap:6px;align-content:start}
.news .src{font-family:var(--f-body);font-size:.8rem;color:var(--muted);font-weight:700}
.news .body{display:grid;gap:10px;min-width:0}
.news .facts{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:.95rem}
.news .mean{background:var(--tint2);border-radius:8px;padding:10px 14px;font-size:.93rem}
.news .mean b{color:var(--leaf)}
.news .links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.75rem;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:0 9px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:10px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* AI flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flow article{border:2px solid var(--ink);border-radius:10px;padding:20px;display:grid;gap:12px;align-content:start;min-width:0;background:var(--surface)}
.flow dl{margin:0;display:grid;gap:8px}
.flow dt{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--leaf)}
.flow dd{margin:0;font-size:.95rem}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:0;padding:0;list-style:none}
.rules li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.97rem}
.rules .tag{font-family:var(--f-mono);font-size:.78rem;border-radius:6px;padding:1px 8px;white-space:nowrap}

/* roadmap */
.road{list-style:none;padding:0;display:grid;border-left:3px solid var(--ink);margin:0 0 0 8px}
.road li{position:relative;padding:0 0 26px 26px;display:grid;gap:6px}
.road li::before{content:"";position:absolute;left:-11px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--ink)}
.road li.now::before{background:var(--berry);border-color:var(--berry)}
.road .when{font-family:var(--f-mono);font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{font-family:var(--f-body);font-size:.78rem;font-weight:700;padding:1px 10px;border-radius:999px;border:2px solid var(--ink)}
.chip.now{background:var(--berry);color:var(--berry-ink);border-color:var(--berry)}
.road p{color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.principles div{background:var(--tint);border-radius:10px;padding:18px;display:grid;gap:6px;min-width:0}
.principles p{font-size:.95rem;color:var(--muted)}

/* programs */
.notice{font-weight:700;background:var(--tint);border-radius:10px;padding:14px 18px;border:2px solid var(--berry)}
.progs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.prog{border:2px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:10px;align-content:start;min-width:0;background:var(--surface)}
.prog .when{font-size:.8rem;font-weight:700;color:var(--leaf);letter-spacing:.03em}
.prog p{font-size:.97rem;color:var(--muted)}
.prog ul{margin:0;padding-left:1.1em;font-size:.93rem;display:grid;gap:2px}

/* supply */
.supply{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.rings{position:relative;width:min(280px,70vw);aspect-ratio:1;max-width:100%}
.rings div{position:absolute;border-radius:50%;border:3px solid var(--berry);display:grid;place-items:start center;font-family:var(--f-mono);font-weight:600;font-size:.85rem;padding-top:6px}
.r60{inset:0;background:var(--tint)} .r40{inset:17%;background:var(--bg)} .r20{inset:34%;background:var(--tint)}
.rings .core{inset:45%;background:var(--berry)}
.zlist{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.zlist li{display:grid;grid-template-columns:5rem 1fr;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.zlist b{font-family:var(--f-mono);color:var(--berry)}

/* forms & tools */
.panel{background:var(--surface);border:3px solid var(--ink);border-radius:14px;padding:clamp(18px,4vw,36px);display:grid;gap:22px;min-width:0}
fieldset{border:none;margin:0;padding:0;display:grid;gap:16px;min-width:0}
legend{font-weight:700;font-size:1.05rem;padding:0;margin-bottom:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;min-width:0}
label,.lbl{font-weight:700;font-size:1rem}
.hint{font-size:.88rem;color:var(--muted);font-weight:400}
input[type=text],input[type=tel],input[type=number],select{font:inherit;font-size:1.05rem;padding:11px 14px;border:2px solid var(--muted);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{display:flex;align-items:center;gap:8px;border:2px solid var(--line);padding:9px 14px;border-radius:10px;font-weight:500;cursor:pointer}
.choices input,.consent input,.check input{width:22px;height:22px;accent-color:var(--berry);flex:none}
.consent{border:2px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px;font-size:.95rem}
.consent label{display:flex;gap:10px;align-items:flex-start}
.consent dl{display:grid;grid-template-columns:6.5rem 1fr;gap:4px 12px;margin:0;color:var(--muted)}
.consent dt{font-weight:700;color:var(--ink)} .consent dd{margin:0}
.error{color:var(--berry);font-weight:700;min-height:1.4em}
.done{border:3px solid var(--leaf);border-radius:12px;padding:20px;display:grid;gap:8px}
.done h3{color:var(--leaf)}

.checklist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.checklist li{border-bottom:1px solid var(--line);padding-block:12px}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:500;cursor:pointer}
.check .why{display:block;font-size:.88rem;color:var(--muted);font-weight:400;margin-top:2px}
.groupname{font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--leaf);padding-top:14px;display:block}
.result{border:3px solid var(--ink);border-radius:12px;padding:20px;display:grid;gap:12px;background:var(--bg)}
.meter{height:22px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--surface)}
.meter span{display:block;height:100%;background:var(--leaf);width:0}
@media (prefers-reduced-motion: no-preference){.meter span{transition:width .35s}}
.todo{margin:0;padding-left:1.2em;display:grid;gap:8px}
.outgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.out{border:2px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:4px;min-width:0}
.out .k{font-size:.85rem;color:var(--muted);font-weight:700}
.out .v{font-family:var(--f-mono);font-weight:600;font-size:1.5rem;line-height:1.2}
.out.neg .v{color:var(--berry)}
.out.pos .v{color:var(--leaf)}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.about>div{display:grid;gap:12px;align-content:start;min-width:0}
.quote{font-family:var(--f-display);font-size:var(--s-2);line-height:1.3}
.creds{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.creds li{display:flex;justify-content:space-between;gap:12px;border-bottom:1.5px dashed var(--line);padding-bottom:8px}
.creds .mono{white-space:nowrap}

/* share */
.sharebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:2px dashed var(--ink);border-radius:12px;padding:14px 18px}
.copy{font:inherit;font-weight:700;border:2px solid var(--ink);background:var(--bg);color:var(--ink);border-radius:8px;padding:4px 12px;cursor:pointer}

/* sources + footer */
details.src{border-top:1px solid var(--line);padding-top:12px}
details.src summary{font-weight:700;cursor:pointer}
details.src ol{font-size:.85rem;color:var(--muted);display:grid;gap:4px;margin:10px 0 0;padding-left:1.4em}
details.src a{color:var(--muted)}
footer{border-top:2px solid var(--ink);padding-top:20px;display:grid;gap:10px;font-size:.92rem;color:var(--muted)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer a{color:var(--muted)}
.prose{display:grid;gap:14px}
.prose h2{margin-top:10px}

@media (max-width:820px){
  .hero,.supply,.about{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .doors,.flow,.progs,.principles,.rules,.grid2,.outgrid{grid-template-columns:1fr}
  .trends li,.news li{grid-template-columns:1fr}
  .rings{justify-self:center}
  section{scroll-margin-top:190px}
}
@media (max-width:420px){.stats{grid-template-columns:1fr}}

/* 기사 카드 벽: 책상 위에 던진 스크랩 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.press{display:grid;gap:18px;padding-top:22px}
.presshead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.clips{list-style:none;margin:0;padding:8px 4px 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}
.clips li{transform:rotate(var(--r));min-width:0}
.clips a{display:grid;gap:8px;height:100%;padding:18px 18px 20px;text-decoration:none;color:var(--ink);background:var(--surface);
  border:2px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--line)}
.clips a:hover{box-shadow:8px 8px 0 var(--berry)}
.clips .meta{font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--muted);border-bottom:1.5px dashed var(--line);padding-bottom:6px}
.clips .big{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3.1rem);line-height:1;color:var(--berry)}
.clips .hl{font-weight:700;font-size:1.02rem;line-height:1.45;text-wrap:balance}
@media (prefers-reduced-motion: no-preference){
  .clips.toss li{animation:toss .6s cubic-bezier(.2,1.4,.4,1) var(--d) both}
  @keyframes toss{from{transform:translate(18px,-46px) rotate(calc(var(--r) * -4)) scale(1.18)}to{transform:rotate(var(--r))}}
}

/* 휴대폰 하단 고정 신청 버튼 */
.mbar{display:none}
@media (max-width:820px){
  .clips{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(78vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:6px}
  .clips li{scroll-snap-align:center}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:10px;align-items:center;justify-content:center;background:var(--bg);
    border-top:2px solid var(--ink);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .mbar .cta{flex:1;justify-content:center;max-width:480px;padding:12px 16px}
  body.has-mbar{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* 첫 화면: v5의 움직이는 딸기하우스 장면 위로 기사 카드가 던져진다. 이 띠는 밝기 설정과 관계없이 밤 장면 한 가지 색으로 고정 */
html,body{overflow-x:clip}
.hero3d{position:relative;isolation:isolate;overflow:hidden;width:100vw;margin-inline:calc(50% - 50vw);background:#0B1220;color:#F3F5F8;
  min-height:min(100svh,920px);display:grid;align-content:end}
.hero3d canvas.scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2}
.hero3d canvas.scene3d{opacity:0;transition:opacity 1.8s ease}
.hero3d canvas.scene3d.on{opacity:1}
.hero3d .plate{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(11 18 32 / .92) 0%,rgb(11 18 32 / .82) 36%,rgb(11 18 32 / .25) 60%,rgb(11 18 32 / .1) 75%),linear-gradient(0deg,rgb(11 18 32 / .96) 0%,rgb(11 18 32 / .6) 34%,rgb(11 18 32 / 0) 58%)}
.hin{position:relative;max-width:1000px;width:100%;margin:0 auto;display:grid;gap:22px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(56px,10vh,120px) 36px}
.hcopy{display:grid;gap:18px;max-width:34rem}
.heye{font-weight:700;letter-spacing:.06em;font-size:.9rem;color:#6BD493}
.hero3d h1{color:#FFFFFF;text-shadow:0 2px 28px rgb(0 0 0 / .5)}
.hlead{font-size:var(--s-1);color:#D6DCE5;max-width:34rem}
.hlead b{color:#FFFFFF}
.hero3d .cta{background:#FF5C70;border-color:#FF5C70;color:#1A0B0D}
.hero3d .cta.hghost{background:rgb(11 18 32 / .55);color:#FFFFFF;border-color:#FFFFFF}
.hero3d :focus-visible{outline-color:#8AB4F8}
.presshead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;border-top:2px solid rgb(255 255 255 / .35);padding-top:16px}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
.hbtn{font:inherit;font-weight:700;font-size:.85rem;min-height:40px;padding:4px 14px;border-radius:999px;border:2px solid #C9D1DC;background:rgb(11 18 32 / .75);color:#F3F5F8;cursor:pointer}
.hnote{font-size:.85rem;color:#C9D1DC}
/* 카드는 신문 스크랩처럼 흰 종이 한 가지 색 */
.hero3d .clips a{background:#FFFEFB;color:#1D1314;border-color:#1D1314;box-shadow:6px 6px 0 rgb(0 0 0 / .45)}
.hero3d .clips a:hover{box-shadow:8px 8px 0 #FF5C70}
.hero3d .clips .meta{color:#5A4A4C;border-bottom-color:#E6D3D3}
.hero3d .clips .big{color:#B5122B}
.farmtop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}
@media (max-width:820px){
  .hero3d{min-height:auto}
  .hero3d .plate{background:linear-gradient(180deg,rgb(11 18 32 / .35) 0,rgb(11 18 32 / .55) 40%,rgb(11 18 32 / .92) 70%)}
  .hin{padding-block:150px 28px}
  .farmtop{grid-template-columns:1fr}
}

/* 한글은 낱말 단위로 줄바꿈 (긴 주소는 칸 안에서 끊김) */
body{word-break:keep-all;overflow-wrap:break-word}
.mono,#shareUrl{overflow-wrap:anywhere}

/* 균형 보정: 장면은 v5와 같은 가로 비율(최대 900px 높이)로 고정, 카드는 장면 아래 어두워지는 곳에 걸친다.
   띠 폭은 스크롤바를 뺀 실제 화면 폭(--vw, site.js가 계산) */
.hero3d{width:var(--vw,100vw);margin-inline:calc(50% - var(--vw,100vw) / 2);min-height:0;align-content:start}
.hero3d canvas.scene{inset:0 0 auto 0;height:min(100svh,900px)}
.hero3d .plate{inset:0 0 auto 0;height:min(100svh,900px);
  background:linear-gradient(90deg,rgb(11 18 32 / .9) 0%,rgb(11 18 32 / .8) 34%,rgb(11 18 32 / .3) 54%,rgb(11 18 32 / .08) 72%),linear-gradient(0deg,#0B1220 0%,rgb(11 18 32 / .75) 18%,rgb(11 18 32 / 0) 42%)}
.hin{padding-block:clamp(88px,16vh,170px) 40px}
.hcopy{min-height:calc(min(100svh,900px) - clamp(88px,16vh,170px) - 210px);align-content:start}
@media (max-width:820px){
  .hero3d canvas.scene,.hero3d .plate{height:min(100svh,760px)}
  .hero3d .plate{background:linear-gradient(180deg,rgb(11 18 32 / .3) 0,rgb(11 18 32 / .55) 40%,rgb(11 18 32 / .9) 75%,#0B1220 100%)}
  .hin{padding-block:120px 28px}
  .hcopy{min-height:0}
}