/* 기본 리셋 (원본 페이지와 동일) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: 구조는 토스 브랜드 리소스 센터(왼쪽 그룹 목차, 카테고리 → 하위 섹션 → 자산 카드), 스타일은 오후두시랩 홈페이지(PC_Home)의 글자·색·버튼. 라이트 단일 테마. */
:root{
  /* 색: Figma AI-Test 변수 */
  --white:#ffffff; --black:#000000;
  --grey-100:#f8f9fa; --grey-200:#eff1f3; --grey-300:#e3e6e9; --grey-500:#c0c4ca;
  --grey-1000:#5b6068; --grey-1200:#2d3237; --grey-1300:#1a1d1f;
  --green-100:#e8f8f0;
  --green-label:#3d851d;   /* 홈페이지 라벨·번호 초록 (변수 미등록) */
  --pill:#f3f7f3;          /* 홈페이지 GNB 버튼 바탕 */
  /* 글자: 홈페이지 텍스트 스타일 */
  --font:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --fs-h1:40px;      --lh-h1:1.2;         /* Bold */
  --fs-h2:24px;      --lh-h2:1.28;        /* Bold */
  --fs-lead:20px;    --lh-lead:1.6;       /* Regular */
  --fs-title:20px;   --lh-title:1.28;     /* Bold */
  --fs-body:16px;    --lh-body:1.6;       /* Regular / Medium / Bold */
  --fs-sm:14px;                            /* Medium */
  --fs-cap:12px;                           /* Regular */
  --container:1140px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--white);color:var(--grey-1200);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green-label);outline-offset:3px;border-radius:6px}
.c{max-width:calc(var(--container) + 48px);margin:0 auto;padding-inline:24px}

/* top bar (토스 구조) */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--white);border-bottom:1px solid var(--grey-200)}
.top .in{height:64px;display:flex;align-items:center;max-width:1320px;margin:0 auto;padding-inline:40px}
.top .logo{font-size:20px;font-weight:800;color:var(--black);letter-spacing:-0.02em}

/* shell: 왼쪽 그룹 목차 + 본문 */
.shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:64px;max-width:1320px;margin:0 auto;padding-inline:40px;padding-block:40px 120px}
.side{position:sticky;top:calc(64px + 40px + env(safe-area-inset-top,0px));align-self:start;display:flex;flex-direction:column;gap:32px}
.grp{display:flex;flex-direction:column;gap:4px}
.grp>a{font-size:var(--fs-sm);font-weight:700;color:var(--black);padding:4px 0;letter-spacing:.02em}
.grp ul{list-style:none;margin:0;padding:0 0 0 12px;display:flex;flex-direction:column}
.grp ul a{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--grey-1000);padding:5px 0}
.grp ul a:hover,.grp ul a.on{color:var(--black)}
.grp:not(.cur) ul a{color:var(--grey-500)}
.shell main{min-width:0}

/* type */
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--black);margin:0;letter-spacing:-0.01em}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--black);margin:0}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--grey-1200);margin:0}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--grey-1000);margin:0}
.eyebrow{font-size:var(--fs-body);font-weight:500;color:var(--green-label)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);font-weight:500;line-height:1.5;color:var(--grey-1000);background:var(--grey-100);border-radius:6px;padding:2px 8px;vertical-align:middle;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grey-500)}
.tag.ok::before{background:var(--green-label)}

/* buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font:inherit;font-size:var(--fs-sm);font-weight:700;height:52px;padding:0 24px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--grey-300);background:var(--white);color:var(--grey-1300);line-height:1}
.btn.pri{background:var(--grey-1300);border-color:var(--grey-1300);color:var(--white)}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{border-color:var(--grey-1300)}
.btn.sm{height:44px;padding:0 16px}

/* 카테고리 → 하위 섹션 (토스 구조) */
.banner{background:var(--grey-100);border-radius:16px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;margin-bottom:96px}
.banner .btns{margin-top:8px}
.orbit{position:relative;width:240px;aspect-ratio:1}
.orbit::before,.orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--grey-300)}
.orbit::before{inset:0}
.orbit::after{inset:22%}
.orbit .sym{position:absolute;inset:0;display:grid;place-items:center}
.orbit .sym svg{width:28%;height:auto}
.cat-h{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.sub{margin-top:80px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:96px}
.sub:first-of-type{margin-top:56px}
.sub>.body{max-width:44em}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}

/* steps (홈페이지 5 Agent 행 문법) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border:1px solid var(--grey-200);border-radius:16px;padding:32px 0}
.step{padding:0 28px;border-left:1px solid var(--grey-200);display:flex;flex-direction:column;gap:12px}
.step:first-child{border-left:0}
.num{width:24px;height:24px;border-radius:50%;background:var(--green-label);color:var(--white);font-size:var(--fs-cap);font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.step .t{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:700;color:var(--black);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.step p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--grey-1000)}

/* list rows (홈페이지 COLLECT·CALCULATE 문법) */
.rows{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--grey-200)}
.rows li{display:grid;grid-template-columns:40px 120px minmax(0,1fr);gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--grey-200);font-size:var(--fs-body)}
.rows .i{color:var(--grey-1000);font-variant-numeric:tabular-nums}
.rows b{color:var(--black);font-weight:700}
.rows .d{color:var(--grey-1200)}
.rows.kv li{grid-template-columns:120px minmax(0,1fr);padding:14px 0;font-size:var(--fs-sm)}
.rows.kv b{font-weight:500;color:var(--grey-1000)}
.rows.kv .d{color:var(--black);font-weight:500;font-variant-numeric:tabular-nums}

/* mint box */
.mint{background:var(--green-100);border-radius:16px;padding:60px;display:flex;flex-direction:column;gap:16px}
.mint .q{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--grey-1200);margin:0;max-width:36em}

/* asset card (토스 구조: 라벨 왼쪽 위, 자산 가운데, 액션 오른쪽 아래) */
.stage{margin-top:8px;background:var(--stage,var(--grey-100));border-radius:16px;min-height:380px;display:flex;flex-direction:column;transition:background .2s;border:1px solid var(--edge,transparent)}
.stage .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px 0;flex-wrap:wrap}
.stage .lb{font-size:var(--fs-sm);font-weight:500;color:var(--grey-1000)}
.stage.dark .lb{color:var(--grey-500)}
.stage .art{flex:1;display:grid;place-items:center;padding:48px 32px}
.stage .art svg{max-width:100%;height:auto}
.stage .bar{display:flex;justify-content:flex-end;padding:0 24px 24px}
.stage .bar .btns{gap:8px}
.specs{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:16px}
.specs h4{margin:0 0 4px;font-size:var(--fs-sm);font-weight:700;color:var(--black)}
.specs .no h4{color:var(--grey-1000)}
.specs ul.dl{margin:0;padding-left:18px;font-size:var(--fs-sm);line-height:1.8;color:var(--grey-1200)}
.bgs{display:flex;gap:8px;align-items:center}
.bgs span{font-size:var(--fs-cap);color:var(--grey-1000)}
.bgs button{width:20px;height:20px;border-radius:50%;cursor:pointer;padding:0;border:1px solid var(--grey-500)}
.bgs button[aria-pressed="true"]{outline:2px solid var(--grey-1300);outline-offset:2px}
.fine{font-size:var(--fs-cap);color:var(--grey-1000);margin:0}


/* Brand: 가이드 원문 + 원본 */
.gd{color:var(--grey-1200);max-width:44em}
.stage{background:var(--white);border:1px solid var(--grey-200)}
.stage .art svg{width:min(100%,var(--w,320px));height:auto}
.fig{margin:8px 0 0;border:1px solid var(--grey-200);border-radius:16px;overflow:hidden;background:#fdfdfd}
.fig img{display:block;width:100%;height:auto}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.grid2 .fig,.grid2 .stage,.grid3 .stage{margin-top:0}
.grid2 .stage,.grid3 .stage{min-height:260px}
.grid3 .stage .bar{justify-content:center;padding-inline:12px}
.grid3 .stage .btn.sm{padding:0 12px}
@media (max-width:960px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}


/* 화면 플로팅 컨트롤 (Brand 전체 적용, 오른쪽 아래) */
.page[data-page="brand"]{padding-bottom:40px}
.shell main{padding-right:0}
.fabs{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab{display:flex;align-items:center;gap:4px;background:var(--white);border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(26,29,31,.18),0 0 0 1px rgba(26,29,31,.06)}
.fab.sym{flex-direction:row;height:56px}
.fab.sym.collapsed{width:172px}
.fab.sym.collapsed .open-btn{width:100%}
.fab.sym.collapsed .sy,.fab.sym.collapsed .fold{display:none}
.fab.sym:not(.collapsed) .open-btn{display:none}
.open-btn{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--grey-1300);height:44px;padding:0 16px 0 6px;border:0;border-radius:999px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.open-btn:hover{background:var(--grey-100)}
.cur-thumb{width:32px;height:32px;border-radius:50%;background:var(--grey-100);display:grid;place-items:center}
.cur-thumb svg{width:auto;height:20px}
.fab .fold{width:32px;height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;color:var(--grey-1000);display:grid;place-items:center}
.fab .fold svg{width:16px;height:16px}
.fab .fold:hover{background:var(--grey-100)}
.fab .sy{width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.fab .sy span{display:grid;place-items:center}
.fab .sy svg{width:auto;height:26px}
.fab .sy:hover{background:var(--grey-100)}
.fab .sy[aria-pressed="true"]{background:var(--grey-100);box-shadow:inset 0 0 0 1.5px var(--grey-1300)}
.fab.tg{border:0;cursor:pointer;font:inherit;height:56px;width:172px;padding:6px 14px 6px 22px;gap:10px;justify-content:space-between}
.fab.tg .tl{font-size:var(--fs-sm);font-weight:600;color:var(--grey-1300)}
.track{position:relative;width:44px;height:26px;border-radius:999px;background:var(--grey-300);transition:background .2s}
.knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.fab.tg[aria-checked="true"] .track{background:var(--grey-1300)}
.fab.tg[aria-checked="true"] .knob{transform:translateX(18px)}
@media (max-width:960px){.fabs{right:16px;bottom:16px}.fab .sy{width:38px;height:38px}.fab .sy svg{height:22px}}
.grid-sl{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;margin-top:8px}
.grid-sl.wide-first{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.grid-sl .stage,.stack1 .stage{margin-top:0}
.stack1{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.stage.rev{background:var(--black);border-color:var(--black)}
.stage.rev .lb{color:var(--grey-500)}
@media (max-width:960px){.grid-sl,.grid-sl.wide-first{grid-template-columns:minmax(0,1fr)}}


/* About 키비주얼: 대형 Grounded + 히트맵 인터랙션 */
.kv{background:transparent;border-radius:0;padding:0 0 8px;display:flex;flex-direction:column;gap:8px;scroll-margin-top:96px}
.kv-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:12px;font-weight:600;color:var(--black);text-transform:uppercase}
.kv-bar span:nth-child(2){text-align:center}
.kv-bar span:last-child{text-align:right}
.kv{container-type:inline-size}
.kv-word{margin:0;font-family:var(--font);font-weight:800;color:var(--black);font-size:calc(100cqw / 4.7);line-height:1;letter-spacing:0;white-space:nowrap;margin-left:-0.04em}
.kv-lead{margin:0;max-width:none;text-align:left;white-space:nowrap;font-size:16px;line-height:1.6;color:var(--grey-1200)}
.sr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:8px;align-items:stretch}
.sr-col{display:flex;flex-direction:column;gap:12px}
.sr-h{display:flex;align-items:center;gap:10px}
.sr-h b{font-size:var(--fs-title);font-weight:700;color:var(--black)}
.rows.kv2 li{grid-template-columns:150px minmax(0,1fr);padding:14px 0;font-size:var(--fs-sm)}
.mint .ask{margin:auto 0 0;font-size:var(--fs-h2);font-weight:800;color:var(--green-label);letter-spacing:-0.01em}
@media (max-width:960px){.kv{padding:0 0 8px}.kv-lead{white-space:normal}.kv-bar{font-size:10px}.sr{grid-template-columns:minmax(0,1fr)}.rows.kv2 li{grid-template-columns:minmax(0,1fr);gap:2px}.rows.kv2 li .d{grid-column:auto}}

/* footer */
.foot{border-top:1px solid var(--grey-200);margin-top:120px;padding-top:24px}
.foot .in{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;font-size:var(--fs-sm);font-weight:500;color:var(--grey-1000)}
.foot b{color:var(--black);font-weight:800;font-size:18px}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:40;transform:translate(-50%,16px);background:var(--grey-1300);color:var(--white);font-size:var(--fs-sm);font-weight:600;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:960px){
  :root{--fs-h1:28px;--fs-h2:20px;--fs-lead:17px;--fs-title:18px}
  .top .in{height:56px;padding-inline:16px}
  .shell{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:16px;padding-block:0 80px}
  .side{top:calc(56px + env(safe-area-inset-top,0px));z-index:9;background:var(--white);flex-direction:row;overflow-x:auto;gap:20px;padding-block:12px;border-bottom:1px solid var(--grey-200);margin:0 -16px 24px;padding-inline:16px;scrollbar-width:none}
  .grp{flex-direction:row;align-items:center;gap:14px}
  .grp ul{flex-direction:row;gap:14px;padding:0}
  .grp a,.grp ul a{white-space:nowrap}
  .banner{grid-template-columns:minmax(0,1fr);padding:32px 24px;margin-bottom:64px}
  .orbit{display:none}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px}
  .step{padding:0;border-left:0}
  .rows li{grid-template-columns:32px minmax(0,1fr)}
  .rows li .d{grid-column:2}
  .rows.kv li{grid-template-columns:minmax(0,1fr);gap:2px}
  .rows.kv li .d{grid-column:auto}
  .mint{padding:32px 24px}
  .stage{min-height:260px}
  .specs{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ===== 편집 다듬기: 간격 위계 & 밀도 ===== */
.sub{margin-top:104px;gap:12px}
.sub>.steps,.sub>.sr,.sub>.grid-sl,.sub>.grid2,.sub>.stack1,.sub>.fig,.sub>.rows{margin-top:20px}
.cat-h{gap:12px;margin-bottom:0}
.cat-h .lead{max-width:36em}
.sr{gap:20px}
.mint{padding:40px;gap:12px}
.sr-col{gap:10px;padding:8px 0}
.steps{padding:28px 0}
.step{gap:10px}
.step .sh{display:flex;align-items:center;justify-content:space-between}
/* Brand 카드 밀도 */
.stage{min-height:0}
.stage .art{padding:24px 32px 32px;min-height:200px}
.grid-sl .stage .art{min-height:240px}
.stack1{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stack1 .stage .art{min-height:160px}
.grid2 .stage{min-height:0}
.grid2 .stage .art{min-height:120px;padding:16px 24px 24px}
.stage .bar{padding:0 20px 20px}
/* Sub-brand: 한 줄 카드 (로고 왼쪽, 버튼 오른쪽) */
.hlist{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.hlist .stage{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;margin-top:0}
.hlist .stage .hd{padding:0 0 0 24px}
.hlist .stage .art{min-height:0;padding:28px 24px;place-items:center start}
.hlist .stage .bar{padding:0 20px 0 0}
.hlist .stage .art svg{height:44px!important;width:auto!important;max-width:100%}
@media (max-width:960px){.hlist .stage{grid-template-columns:minmax(0,1fr)}.hlist .stage .hd{padding:16px 20px 0}.hlist .stage .bar{padding:0 20px 20px}}
/* Guide 도면 */
.fig{display:grid;place-items:center;padding:24px}
.fig img{width:auto;max-width:100%;max-height:440px}
.fig.wide img{max-height:none;width:100%;max-width:760px}
.grid2 .fig img{max-height:360px}
@media (max-width:960px){.sub{margin-top:72px}.stack1{grid-template-columns:minmax(0,1fr)}.kv{padding:32px 24px}.mint{padding:28px 24px}}

/* ===== GDS 타입 시스템 (홈페이지가 쓰는 원격 라이브러리 텍스트 스타일 그대로) =====
   Display 1   ExtraBold 68 / 115%      Display 3   Bold 40 / 120%
   Title 2     Bold 24 / 128%           Title 3     Bold 20 / 128%
   Highlight   Regular 20 / 160%        Heading 1   Bold 16 / 128%      Heading 2  Bold 14 / 128%
   Body 1/Paragraph Regular 16 / 160%   Body 1/UI   Regular 16 / auto   Body 2/UI  Regular 14 / auto
   Label 1     Medium 16 / auto         Label 2     Medium 14 / auto    Caption 2/UI Regular 12 / auto
   자간은 모두 0 */
:root{--gds-auto:normal}
body,body *{letter-spacing:0}
body{font-synthesis:none;overflow-anchor:none}
body{font-size:16px;line-height:1.6}
.h1{font-size:40px;line-height:1.2;font-weight:700}                                /* Display 3 */
.h2{font-size:24px;line-height:1.28;font-weight:700}                               /* Title 2 */
.step .t,.sr-h b,.top .logo,.foot b{font-size:20px;line-height:1.28;font-weight:700} /* Title 3 */
.lead,.mint .q{font-size:20px;line-height:1.6;font-weight:400}                      /* Highlight */
.body,.gd,.step p{font-size:16px;line-height:1.6;font-weight:400}                   /* Body 1/Paragraph */
.rows li,.rows .d{font-size:16px;line-height:var(--gds-auto);font-weight:400}        /* Body 1/UI */
.rows.kv li,.rows.kv2 li,.specs ul.dl,.dd ul{font-size:14px;line-height:var(--gds-auto)} /* Body 2/UI */
.eyebrow{font-size:16px;line-height:var(--gds-auto);font-weight:500}                  /* Label 1 */
.grp ul a,.stage .lb,.fab.tg .tl,.open-btn,.rows.kv b,.rows.kv .d,.foot .in{font-size:14px;line-height:var(--gds-auto);font-weight:500} /* Label 2 */
.grp>a,.btn,.specs h4,.rows b{font-size:14px;line-height:1.28;font-weight:700}       /* Heading 2 */
.rows b{font-size:16px}                                                              /* Heading 1 */
.tag,.fine,.num,.dd-menu button em{font-size:12px;line-height:var(--gds-auto);font-weight:400} /* Caption 2/UI */
.num{font-weight:700}
@media (max-width:960px){
  .kv-title{font-size:40px;line-height:1.2;font-weight:700}   /* Display 3 */
  .h1{font-size:24px;line-height:1.28}                         /* Title 2 */
  .h2{font-size:20px;line-height:1.28}                         /* Title 3 */
  .lead,.mint .q{font-size:16px;line-height:1.6}              /* Body 1/Paragraph */
  .step .t{font-size:16px}                                     /* Heading 1 */
}