/* 먀 스튜디오
   파운데이션: 토스 디자인 시스템(Grey 10단 · Typography 7단 · Radius 5단)
   톤: 광고 제작소(단색 지배면 + 초대형 워드마크 + [클라이언트] 목록)
   토스 블루·토스 서체는 쓰지 않음. 무채색 기준 유지. */

:root{
  /* Grey 10단 — 청기 섞인 무채색 */
  --g50:#F9FAFB;  --g100:#F2F4F6; --g200:#E5E8EB; --g300:#D1D6DB; --g400:#B0B8C1;
  --g500:#8B95A1; --g600:#6B7684; --g700:#4E5968; --g800:#333D4B; --g900:#191F28;

  /* 역할 토큰 */
  --bg:#FFFFFF;
  --bg-2:var(--g100);
  --ink:var(--g900);
  --ink-2:var(--g700);
  --grey:var(--g600);
  --grey-2:var(--g500);
  --line:var(--g200);
  --line-2:var(--g100);
  --on-dark:#F2F4F6;
  --stage:#0B0B0C;        /* 어두운 지배면 — 푸른기 없는 먹색 */
  --stage-2:#141415;
  --maxw:1000px;

  /* Typography — 크기/행간 쌍 */
  --t1:30px; --t1l:40px;
  --t2:26px; --t2l:35px;
  --t3:22px; --t3l:31px;
  --t4:20px; --t4l:29px;
  --t5:17px; --t5l:25.5px;
  --t6:15px; --t6l:22.5px;
  --t7:13px; --t7l:19.5px;
  /* Display — 웹 전용 확장(같은 리듬) */
  --d1:clamp(34px,5.4vw,56px);
  --d2:clamp(28px,3.6vw,42px);
  --d3:clamp(22px,2.4vw,30px);

  /* 메인 컬러 — 실버 */
  --silver-50:#F4F6F7;
  --silver-100:#E7EAED;
  --silver-200:#D3D8DD;
  --silver:#B6BCC4;      /* 코어 */
  --silver-600:#949BA4;
  --silver-700:#767D87;
  --silver-sheen:linear-gradient(104deg,
    #E8EBEE 0%, #FDFDFE 9%, #CDD3DA 20%, #9AA3AD 32%,
    #E4E8EC 44%, #FFFFFF 52%, #D6DBE1 62%,
    #A7B0BA 74%, #EDEFF2 88%, #C9CFD6 100%);
  --silver-edge:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%,rgba(11,11,12,.10));

  /* Radius 5단 */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px; --r-2xl:20px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17181C; --bg-2:#202226; --ink:#F2F4F6; --ink-2:#C4CAD2; --grey:#9AA3AE; --grey-2:#7C8792;
  --line:#2C2F35; --line-2:#212429; --on-dark:#F2F4F6; --stage:#000; --stage-2:#0B0B0C;
}}
:root[data-theme="dark"]{
  --bg:#17181C; --bg-2:#202226; --ink:#F2F4F6; --ink-2:#C4CAD2; --grey:#9AA3AE; --grey-2:#7C8792;
  --line:#2C2F35; --line-2:#212429; --on-dark:#F2F4F6; --stage:#000; --stage-2:#0B0B0C;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px; line-height:24px; letter-spacing:normal; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:700; letter-spacing:normal; line-height:1.33; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}

/* 헤더 */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bg); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; gap:26px; height:60px; max-width:var(--maxw); margin:0 auto; padding-inline:24px}
.logo{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:17px; letter-spacing:normal}
.logomark{width:26px; height:26px; border-radius:7px; background:var(--stage); color:var(--bg); display:grid; place-items:center; font-size:13px; font-weight:700; letter-spacing:normal; flex:none}
.nav-links{display:flex; gap:20px; margin-left:auto; font-size:15px; color:var(--grey); font-weight:500}
.nav-links a:hover{color:var(--ink)}

/* 버튼 */
.btn{display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 24px;
  background:var(--stage); color:var(--bg); font-size:16px; font-weight:700; letter-spacing:normal;
  border:0; border-radius:var(--r-sm); cursor:pointer; font-family:inherit; transition:opacity .15s ease}
.btn:hover{opacity:.84}
.btn.sm{height:38px; font-size:14px; padding:0 15px}
.btn.lg{height:56px; font-size:17px; width:100%}
.btn.pill{border-radius:var(--r-sm)}
.btn.line{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}

/* 섹션 */
section{padding-block:clamp(64px,7.4vw,100px); border-top:1px solid var(--line-2)}
section:first-of-type{border-top:0}
.soft,.t-sand,.t-sage,.t-clay,.t-mist{background:var(--bg-2)}
.eyebrow{font-size:13px; font-weight:700; color:var(--grey); letter-spacing:normal; margin-bottom:18px}
h1.display,.hero h1,.hero-center h1,.svc-hero h1{font-size:var(--d1); letter-spacing:normal; line-height:1.3}
h2.title{font-size:clamp(26px,3.6vw,40px)}
.lead{font-size:17px; line-height:26px; color:var(--ink-2); margin-top:18px; max-width:33em}
.sub{font-size:15px; line-height:24px; color:var(--grey); margin-top:10px}

/* 히어로 */
.hero,.hero-center{padding-block:clamp(72px,10vw,136px) clamp(56px,7vw,96px); border-top:0}
.hero-center{text-align:center}
.hero-center .lead{margin-inline:auto}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,6vw,80px); align-items:start}
.stat-row{display:flex; gap:40px; margin-top:44px; flex-wrap:wrap}
.stat b{display:block; font-size:32px; font-weight:700; color:var(--ink); letter-spacing:normal; line-height:1.2}
.stat span{font-size:14px; color:var(--grey)}
.scrollcue,.callout,.callouts-m,.stage .c1,.stage .c2,.stage .c3{display:none}

/* 슬랙 보고 화면 (유일하게 남기는 시각 요소) */
.stage{margin-top:clamp(44px,6vw,72px); position:static}
.screen{max-width:600px; margin:0 auto; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; text-align:left; box-shadow:none}
.screen-top{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line-2); background:var(--bg-2)}
.screen-top i{width:8px; height:8px; border-radius:50%; background:var(--line); display:block}
.screen-top b{margin-left:6px; font-size:13px; color:var(--grey); font-weight:600}
.screen-body{padding:20px 22px 22px}
.msg{display:flex; gap:12px; align-items:flex-start}
.msg .av{width:32px; height:32px; border-radius:var(--r-md); background:var(--stage); color:var(--bg); display:grid; place-items:center; flex:none}
.msg .who{font-size:13.5px; font-weight:700; color:var(--ink)}
.msg .who span{font-weight:400; color:var(--grey); font-size:12.5px; margin-left:7px}
.msg h4{font-size:16px; margin-top:3px}
.tasklist{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:7px}
.tasklist li{display:flex; gap:9px; font-size:14.5px; color:var(--ink-2)}
.tasklist li::before{content:"·"; color:var(--grey)}
.tasklist li.warn::before{content:"!"; color:var(--ink); font-weight:700}
.screen-foot{margin-top:16px; padding-top:13px; border-top:1px solid var(--line-2); display:flex; gap:14px; flex-wrap:wrap}
.pillnote{font-size:12.5px; color:var(--grey)}

/* 목록 (카드 아님) */
.rows{display:grid; margin-top:32px}
.frow{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:24px; align-items:baseline;
  padding:24px 0; border-bottom:1px solid var(--line-2); background:none; box-shadow:none; border-radius:0}
.frow:first-child{border-top:1px solid var(--line)}
.frow .ico{width:auto; height:auto; background:none; color:var(--grey); font-size:13px; font-weight:700; border-radius:0; display:block}
.frow h3{font-size:18px}
.frow p{font-size:15px; color:var(--grey); margin-top:6px}
.frow .go{font-size:14px; color:var(--grey); white-space:nowrap}
a.frow:hover h3,a.frow:hover .go{color:var(--ink)}

/* 2단 그리드 */
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:36px; background:var(--line-2); border-block:1px solid var(--line-2)}
.fcell{background:var(--bg); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:10px}
.fcell h3{font-size:19px}
.fcell p{font-size:15px; color:var(--grey)}
.fcell .spec{font-size:13px; color:var(--grey); font-weight:600; margin-top:auto; padding-top:14px}
a.fcell:hover{background:var(--bg-2)}
.mock,.m-img,.m-reel,.m-copy,.m-cal,.m-ads,.m-wave,.m-proto,.m-plie,.m-title{display:none}

/* 자체 서비스 */
.works{display:grid; margin-top:36px; border-top:1px solid var(--line)}
.work{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(24px,5vw,64px);
  padding:clamp(28px,4vw,44px) 0; border-bottom:1px solid var(--line-2);
  background:none; border-radius:0; box-shadow:none; align-items:start; direction:ltr}
.work:hover{transform:none}
.work h3{font-size:26px; margin-top:10px}
.work p{font-size:15.5px; color:var(--grey); margin-top:12px}
.work .facts{display:flex; gap:32px; margin-top:20px; flex-wrap:wrap}
.work .facts b{display:block; font-size:22px; color:var(--ink); font-weight:700; letter-spacing:normal}
.work .facts span{font-size:13px; color:var(--grey)}
.work .more{margin-top:20px}

/* 상태 라벨 */
.svc-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.svc-head .state{font-size:12.5px; font-weight:700; color:var(--ink); border:1px solid var(--ink); border-radius:var(--r-sm); padding:2px 8px}
.svc-head .state.prep{color:var(--grey); border-color:var(--line)}
.svc-head .kind{font-size:13px; color:var(--grey)}
.linkout{font-weight:700; color:var(--ink); font-size:15px; border-bottom:1px solid var(--ink); padding-bottom:1px}
.linkout:hover{border-bottom-width:2px}

/* 단계 */
.steps{display:grid; gap:0; margin-top:28px; position:relative}
.stp{display:grid; grid-template-columns:26px minmax(0,1fr); gap:0 14px;
  padding:0 0 22px; position:relative; align-items:start}
.stp:last-child{padding-bottom:0}
/* 번호를 잇는 세로선 */
.stp::before{content:""; position:absolute; left:12.5px; top:26px; bottom:0; width:1px; background:var(--line)}
.stp:last-child::before{display:none}
.stp b{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--silver-100); color:var(--silver-700);
  font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.stp h3{font-size:var(--t5); line-height:26px; font-weight:700; margin:0}
.stp p{grid-column:2; font-size:var(--t6); line-height:var(--t6l); color:var(--grey); margin:4px 0 0}
.stp > div{display:contents}
.rule-note{margin-top:28px; padding:20px 0 0; border-top:1px solid var(--line); font-size:15px; color:var(--grey); background:none}
.rule-note b{color:var(--ink)}

/* 가격 */
.price{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; margin-top:36px; background:var(--line-2); border-block:1px solid var(--line-2)}
.price article{background:var(--bg); padding:clamp(24px,3vw,32px); box-shadow:none; border-radius:0}
.price article.mark{outline:0; background:var(--bg-2)}
.price h3{font-size:17px}
.price .amt{font-size:28px; font-weight:700; color:var(--ink); letter-spacing:normal; margin-top:10px}
.price .amt small{font-size:14px; font-weight:600; color:var(--grey); letter-spacing:normal}
.price ul{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px}
.price li{font-size:14.5px; color:var(--grey); padding-left:14px; position:relative}
.price li::before{content:"·"; position:absolute; left:0; color:var(--line)}

/* KPI */
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:32px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line)}
.kpi div{background:none; box-shadow:none; border-radius:0; padding:0}
.kpi b{display:block; font-size:30px; font-weight:700; color:var(--ink); letter-spacing:normal}
.kpi span{font-size:13.5px; color:var(--grey)}

/* 상담 폼 */
.card{background:var(--bg-2); border-radius:var(--r-sm); padding:clamp(24px,3vw,32px); box-shadow:none}
.card h3{font-size:19px}
.field{display:flex; flex-direction:column; gap:7px; margin-top:16px}
.field label{font-size:13.5px; font-weight:700; color:var(--ink)}
.field input,.field select,.field textarea{font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; width:100%; letter-spacing:normal}
.field textarea{min-height:96px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--grey)}
.consent{display:flex; gap:9px; align-items:flex-start; margin-top:18px; font-size:13px; color:var(--grey)}
.consent input{margin-top:4px; accent-color:var(--ink); width:16px; height:16px; flex:none}
.form-foot{margin-top:20px}
.form-note{font-size:12.5px; color:var(--grey); margin-top:10px; text-align:center}

/* 먹색 밴드 */
.band{background:var(--stage); color:var(--on-dark); border-top:0}
.band h2,.band h3{color:var(--on-dark)}
.band p{color:#A7ADB1}
.band .btn{background:var(--on-dark); color:var(--ink)}

/* FAQ */
.faq{margin-top:32px; border-top:1px solid var(--line)}
.faq details{background:none; box-shadow:none; border-radius:0; border-bottom:1px solid var(--line-2); padding:18px 0}
.faq summary{cursor:pointer; font-weight:700; color:var(--ink); font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:16px; letter-spacing:normal}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--grey); font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:12px; font-size:15px; color:var(--grey)}

/* 비교/숫자 */
.compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin-top:36px}
.compare h3{font-size:16px; margin-bottom:8px}
.compare ul{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.compare li{font-size:15px; padding:12px 0; border-bottom:1px solid var(--line-2); color:var(--ink-2)}
.compare .bad li{color:var(--grey)}
.numbers{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px; margin-top:36px; border-top:1px solid var(--line); padding-top:28px}
.numbers div b{display:block; font-size:30px; font-weight:700; color:var(--ink); letter-spacing:normal}
.numbers div span{font-size:13.5px; color:var(--grey)}

/* 푸터 */
footer{border-top:1px solid var(--line); padding-block:36px 64px; font-size:14px; color:var(--grey)}
.foot-in{display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between}
.foot-in b{color:var(--ink); font-size:15px; letter-spacing:normal}
.foot-in a:hover{color:var(--ink)}

/* 모바일 */
.mcta{display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--bg);
  border-top:1px solid var(--line); padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px))}
@media (max-width:860px){
  .nav-links{display:none}
  .hero-grid,.fgrid,.work,.compare{grid-template-columns:1fr}
  .fgrid{gap:1px}
  .work{gap:20px}
  .frow{grid-template-columns:1fr; gap:4px}
  .frow .go{grid-column:1}
  .mcta{display:block}
  body{padding-bottom:80px}
  .stat-row{gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ══ 토스플레이스 구조 ══════════════════ */
/* 1. 사진 히어로 */
.photo-hero{position:relative; min-height:min(88vh,760px); display:grid; place-items:center;
  text-align:center; padding:0; border-top:0; overflow:hidden}
.photo-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.photo-hero .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.42),rgba(10,10,10,.58))}
.photo-hero .inner{position:relative; z-index:1; padding:120px 24px}
.photo-hero h1{color:#fff; font-size:var(--d1); letter-spacing:normal; line-height:1.22; text-shadow:0 2px 24px rgba(0,0,0,.28)}
.photo-hero p{color:rgba(255,255,255,.88); font-size:clamp(15px,1.7vw,19px); margin-top:20px; max-width:30em; margin-inline:auto}
.hero-btns{display:flex; gap:10px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.hero-btns .btn{border-radius:999px; height:52px; padding:0 28px}
.hero-btns .btn.on-photo{background:#fff; color:#111315}
.hero-btns .btn.ghost-photo{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px)}
.scroll-hint{margin-top:40px; display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.82);
  font-size:14px; font-weight:600; background:rgba(255,255,255,.14); border-radius:999px; padding:10px 20px; backdrop-filter:blur(6px)}

/* 2. 분야 선택 칩 */
.picker{text-align:center}
.picker h2{font-size:clamp(22px,3vw,30px)}
.chips-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px}
.chip-btn{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px;
  padding:13px 22px; font-size:15.5px; font-weight:600; font-family:inherit; cursor:pointer; letter-spacing:normal;
  transition:border-color .15s ease, background .15s ease}
.chip-btn:hover{border-color:var(--ink)}

.picker .go-row{margin-top:24px}
.picker .go-row .btn{border-radius:999px; height:54px; padding:0 34px}

/* 3. 2열 큰 카드 */
.bigcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px}
.bigcard{border-radius:var(--r-2xl); padding:22px; display:flex; flex-direction:column; gap:0;
  background:var(--bg-2); color:var(--ink-2); overflow:hidden; position:relative}
.bigcard.ink{background:var(--stage); color:#B8B8B8}
.bigcard.ink h3,.bigcard.ink .quote{color:#fff}

/* 이미지 → 배지 → 이름 → 한 줄 → 설명 → 지표 → 링크 : 간격을 단계로 */
.bigcard .shot{margin:0 0 18px; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:var(--bg)}
.bigcard .shot img{width:100%; height:100%; object-fit:cover; display:block}
.bigcard .svc-head{margin:0 0 10px}
.bigcard h3{margin:0; font-size:var(--t3); line-height:var(--t3l); font-weight:700}
.bigcard .quote{margin:6px 0 0; font-size:var(--t6); line-height:var(--t6l); font-weight:600; color:var(--ink-2)}
.bigcard.ink .quote{color:#D6D6D6}
.bigcard .desc{margin:10px 0 0; font-size:var(--t6); line-height:var(--t6l); color:var(--grey)}
.bigcard.ink .desc{color:#8E8E8E}
.bigcard .metrics{display:flex; gap:28px; margin:18px 0 0}
.bigcard .metrics b{display:block; font-size:var(--t4); line-height:1.2; font-weight:700; color:var(--ink)}
.bigcard.ink .metrics b{color:#fff}
.bigcard .metrics span{display:block; margin-top:3px; font-size:var(--t7); line-height:1.4; color:var(--grey)}
.bigcard.ink .metrics span{color:#7E7E7E}
.bigcard .more{margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:var(--t6); font-weight:600}

/* 4. 하단 고정 상담 바 */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:70; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.stickybar .in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:14px; justify-content:space-between}
.stickybar .txt{font-size:15px; font-weight:700; color:var(--ink); letter-spacing:normal}
.stickybar .btn{border-radius:999px; height:44px; padding:0 22px; font-size:15px}
body{padding-bottom:78px}
.mcta{display:none!important}

@media (max-width:860px){
  .bigcards{grid-template-columns:1fr}
  .photo-hero{min-height:74vh}
  .stickybar .txt{display:none}
  .stickybar .btn{width:100%}
}

/* ── 서비스 브랜드 락업 ── */
.brandlock{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.brandlock .bsym{flex:none; display:grid; place-items:center}
.brandlock .bname{font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:normal; color:var(--ink); line-height:1}
.brandlock .bname.thin{font-weight:300; letter-spacing:.02em; color:#4E5A68}
.brandlock .btag{font-size:13.5px; color:var(--grey); margin-top:6px; letter-spacing:normal}
.spec-table{width:100%; border-collapse:collapse; margin-top:26px; font-size:14.5px}
.spec-table th,.spec-table td{text-align:left; padding:13px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
.spec-table th{width:132px; color:var(--grey); font-weight:600}
.spec-table td{color:var(--ink-2)}
.swatches{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.swatches i{display:block; width:34px; height:34px; border-radius:var(--r-md); border:1px solid var(--line)}
.note-inline{font-size:13px; color:var(--grey); margin-top:8px}

/* ── 카드 상단 비주얼 패널 ── */
.cardvis{aspect-ratio:16/9; border-radius:var(--r-lg); background:var(--bg-2); display:grid; place-items:center;
  margin:-4px 0 4px; overflow:hidden; border:1px solid var(--line-2)}
.bigcard.ink .cardvis{background:#141415; border-color:#262627}
.cv-word{font-size:34px; font-weight:300; letter-spacing:.06em; color:var(--grey)}
.cv-sym svg{display:block}
.cv-chips{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:86%}
.cv-chips i{font-style:normal; font-size:10.5px; color:#9AA0A4; border:1px solid #33373A; border-radius:999px; padding:3px 8px}

/* ── 서비스 화면 목업 ── */
.ch{background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column}
.ch .thumb{flex:1; min-height:46px; background:linear-gradient(160deg,#DFE2E4,#C9CDD0)}
.ch .meta{padding:6px 7px; display:grid; gap:3px}
.ch .nm{font-size:10.5px; font-weight:700; color:var(--ink); letter-spacing:normal}
.ch .qt{font-size:9px; color:var(--grey); line-height:1.35}
.ch .tags{display:flex; gap:3px}
.ch .tags i{font-style:normal; font-size:8px; color:var(--grey); border:1px solid var(--line); border-radius:999px; padding:1px 5px}
.ch .prod{display:flex; align-items:center; gap:5px; border-top:1px solid var(--line-2); padding:5px 7px}
.ch .prod span{width:16px; height:16px; border-radius:var(--r-sm); background:var(--line); display:block}
.ch .prod em{font-style:normal; font-size:8.5px; color:var(--ink-2)}

/* 스샷 플리 목업 */

/* 은밀한연구소 · 위키 묶음 목업 */

/* ── 약력 리스트 ───────────────────────────── */
.frow .bio{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.frow .bio li{position:relative; padding-left:15px; font-size:14.5px; color:var(--grey); line-height:1.6}
.frow .bio li::before{content:""; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--line)}
.frow .bio b{color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums}

/* ── 비용 계산 ─────────────────────────────── */
.calc{margin-top:38px; display:grid; grid-template-columns:1fr 1.15fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.calc-in{padding:30px 28px; background:var(--bg-2)}
.calc-in label{display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 10px;
  padding:13px 0; border-bottom:1px solid var(--line)}
.calc-in label span{font-size:14.5px; color:var(--ink-2); font-weight:600}
.calc-in label i{order:3; font-style:normal; font-size:13px; color:var(--grey)}
.calc-in input{grid-column:1/2; grid-row:2; width:100%; border:0; background:transparent; padding:6px 0 0;
  font:inherit; font-size:26px; font-weight:700; letter-spacing:normal; color:var(--ink);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.calc-in input::-webkit-outer-spin-button,.calc-in input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calc-in input:focus{outline:none}
.calc-in label:focus-within{border-bottom-color:var(--ink)}
.calc-note{margin:16px 0 0; font-size:12.5px; color:var(--grey); line-height:1.6}

.calc-out{display:grid; grid-template-rows:auto auto}
.co-a{padding:30px 28px 26px; border-bottom:1px solid var(--line)}
.co-b{padding:28px; background:var(--stage)}
.calc-out .k{display:block; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--grey)}
.co-b .k{color:#8F959A}
.calc-out b{display:inline-block; margin-top:8px; font-size:clamp(32px,4.4vw,42px); font-weight:700;
  letter-spacing:normal; color:var(--ink); font-variant-numeric:tabular-nums}
.co-b b{color:#fff}
.calc-out em{font-style:normal; font-size:14px; color:var(--grey); margin-left:6px}
.co-b em{color:#8F959A}
.co-a ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px}
.co-a li{font-size:13.5px; color:var(--grey)}
.co-a li span{color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums}
.co-a li i{font-style:normal; color:var(--grey)}
.co-b p{margin:12px 0 0; font-size:13.5px; color:#9BA1A5; line-height:1.68}
.co-b p b{display:inline; font-size:inherit; color:#fff; letter-spacing:0}

@media (max-width:820px){
  .calc{grid-template-columns:1fr}
  .calc-in{border-bottom:1px solid var(--line)}
}

/* ══════════════════════════════════════════════════════════
   광고 제작소 레이어 — 단색 지배면 · 초대형 워드마크 · 작업 목록
   ══════════════════════════════════════════════════════════ */

/* 워드마크: STUDIO(작게) + 먀(크게) */
.wm{display:inline-flex; align-items:flex-end; gap:.14em; line-height:.82}
.wm em{font-style:normal; font-weight:700; font-size:.235em; letter-spacing:.24em;
  text-transform:uppercase; padding-bottom:.28em; opacity:.72}
.wm b{font-weight:700; font-size:1em; letter-spacing:-.01em}
.wm .dot{width:.12em; height:.12em; border-radius:50%; background:currentColor;
  margin-bottom:.16em; flex:none}

/* 지배면 히어로 */
.stagehero{background:var(--stage); color:var(--on-dark); padding:clamp(56px,9vw,104px) 0 0}
.stagehero .wrap{max-width:var(--maxw)}
.stagehero .wm{font-size:clamp(84px,17vw,190px); color:#fff; display:flex}
.stagehero .tagline{margin-top:26px; font-size:var(--d3); line-height:1.4; font-weight:700; color:#fff}
.stagehero .sub{margin-top:14px; font-size:var(--t5); line-height:var(--t5l); color:#9A9A9A; max-width:38em}
.stagehero .meta{margin-top:40px; display:flex; flex-wrap:wrap; gap:8px 10px}
.stagehero .meta span{font-size:var(--t7); line-height:1; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--g400); border:1px solid #2E2E30;
  border-radius:999px; padding:9px 13px}
.stagehero .rule{margin-top:44px; height:1px; background:#262627}

/* 작업 목록 — [클라이언트] 캠페인 */
.worklist{margin:0; padding:0; list-style:none}
.worklist li{border-bottom:1px solid #242425}
.worklist a,.worklist .row{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:16px; padding:22px 0; color:inherit}
.worklist .cli{font-size:var(--t6); font-weight:700; color:var(--g500); white-space:nowrap}
.worklist .cli::before{content:"["} .worklist .cli::after{content:"]"}
.worklist .ttl{font-size:clamp(19px,2.2vw,26px); font-weight:700; color:#fff; line-height:1.3}
.worklist .yr{font-size:var(--t7); font-weight:700; letter-spacing:.06em; color:var(--g600);
  font-variant-numeric:tabular-nums}
.worklist a:hover .ttl{text-decoration:underline; text-underline-offset:4px}
.stage-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding:26px 0 clamp(40px,6vw,64px); font-size:var(--t7); color:var(--g500)}

@media (max-width:640px){
  .worklist a,.worklist .row{grid-template-columns:1fr auto; gap:4px 12px}
  .worklist .cli{grid-column:1/-1}
}

/* ── Button 4크기 (TDS 32/38/48/56 · 8/10/14/16) ───────────── */
.btn{display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 22px; border-radius:var(--r-lg);
  font-size:var(--t5); font-weight:600; letter-spacing:normal;
  background:var(--stage); color:var(--bg); border:0; cursor:pointer}
.btn.xs{height:32px; padding:0 13px; border-radius:var(--r-sm); font-size:var(--t7)}
.btn.sm{height:38px; padding:0 16px; border-radius:var(--r-md); font-size:var(--t6)}
.btn.lg{height:56px; padding:0 26px; border-radius:var(--r-xl)}
.btn.weak{background:var(--g100); color:var(--ink-2)}
.btn.line{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.onstage{background:#fff; color:var(--g900)}
.btn.onstage.weak{background:#1D1D1E; color:#fff}
.btn:active{filter:brightness(.94)}

/* ── ListRow (left / contents / right) ─────────────────────── */
.lrow{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  min-height:72px; padding:14px 0; border-bottom:1px solid var(--line-2); color:inherit}
.lrow:last-child{border-bottom:0}
.lrow .lr-l{width:44px; height:44px; border-radius:var(--r-lg); background:var(--g100);
  display:grid; place-items:center; font-size:var(--t7); font-weight:700; color:var(--g600); flex:none}
.lrow .lr-t{font-size:var(--t5); line-height:var(--t5l); font-weight:600; color:var(--ink)}
.lrow .lr-b{margin-top:2px; font-size:var(--t6); line-height:var(--t6l); color:var(--grey)}
.lrow .lr-r{font-size:var(--t6); font-weight:600; color:var(--grey-2); white-space:nowrap}

/* ── Badge ─────────────────────────────────────────────────── */
.badge-t{display:inline-flex; align-items:center; height:24px; padding:0 8px;
  border-radius:var(--r-sm); font-size:var(--t7); font-weight:700; letter-spacing:normal}
.badge-t.solid{background:var(--stage); color:#fff}
.badge-t.weak{background:var(--g100); color:var(--g700)}
.badge-t.line{border:1px solid var(--line); color:var(--grey)}

/* ── 선택 카드 (상담 1단계) ────────────────────────────────── */
.choices{display:grid; gap:12px; margin-top:28px}
.choice{display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
  min-height:72px; padding:16px 20px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-2xl); cursor:pointer; text-align:left; width:100%;
  font:inherit; color:inherit; transition:border-color .12s, background .12s}
.choice:hover{border-color:var(--g400)}
.choice[aria-pressed="true"]{border-color:var(--g900); background:var(--g50)}
.choice .ch-t{display:block; font-size:var(--t5); line-height:var(--t5l); font-weight:700; color:var(--ink)}
.choice .ch-b{display:block; margin-top:3px; font-size:var(--t6); line-height:var(--t6l); color:var(--grey)}
.choice .ch-go{font-size:20px; color:var(--g400); line-height:1}
.choice[aria-pressed="true"] .ch-go{color:var(--g900)}

/* ── Progress Stepper ──────────────────────────────────────── */
.pstep{display:flex; gap:6px; margin-top:8px}
.pstep i{height:3px; flex:1; border-radius:2px; background:var(--g200)}
.pstep i.on{background:var(--stage)}

/* ── Fixed Bottom CTA (TDS 규격) ───────────────────────────── */
.stickybar .btn{height:56px; border-radius:var(--r-xl); font-size:var(--t5); font-weight:600}

/* 워드마크 보정 */
.nav .wm{font-size:27px; color:var(--ink)}
.nav .wm em{font-size:10px; letter-spacing:.18em; padding-bottom:.4em; opacity:.6}
.nav .wm .dot{width:5px; height:5px; margin-bottom:4px}
.stagehero .wm{align-items:baseline}
.stagehero .wm em{padding-bottom:0; opacity:.62; letter-spacing:.3em}
.stagehero .wm .dot{width:.1em; height:.1em; margin-bottom:.02em}
.stagehero .tagline{font-size:var(--d2); line-height:1.3; margin-top:clamp(20px,2.6vw,34px)}
.stagehero .eyebrow{color:var(--g500)}
.stagehero{padding:clamp(52px,7vw,84px) 0 0; margin-block:0}

/* 로고 락업 */
.logo{display:inline-flex; align-items:center; gap:9px; color:var(--ink);
  font-size:15px; font-weight:700; letter-spacing:.01em}
.logo svg{flex:none}

/* 목업: 스켈레톤 제거하고 실제 텍스트로 */

/* ── 워드마크 먀 / AI STUDIO ──────────────────────────────── */
.mk{display:inline-flex; align-items:baseline; gap:.30em; line-height:1; white-space:nowrap}
.mk .k{font-size:1em; font-weight:900; letter-spacing:-.01em}
.mk .sl{font-size:.62em; font-weight:400; opacity:.32; transform:translateY(-.02em)}
.mk .l{font-size:.345em; font-weight:700; letter-spacing:.17em; text-transform:uppercase}
.nav .logo{font-size:26px; color:var(--ink); display:inline-flex; align-items:baseline; gap:0}
.nav .logo .mk{font-size:26px}
.av{display:grid; place-items:center; font-weight:900; font-size:13px; letter-spacing:-.01em}
.cardvis.shot{padding:0; background:var(--g100); border-color:var(--line); overflow:hidden}
.cardvis.shot img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.bigcard.ink .cardvis.shot{background:#0B0B0C; border-color:#262627}


/* ══ 메인 컬러: 실버 ══════════════════════════════════════ */
.eyebrow{color:var(--silver-700)}
.mk .sl{color:var(--silver); opacity:1}
.logo .sl{color:var(--silver)}

/* 실버 버튼 — 보조 액션 */
.btn.silver{background:var(--silver-sheen); color:var(--g900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(11,11,12,.12)}
.btn.silver:hover{filter:brightness(1.03)}

/* 배지 */
.badge-t.brand{background:var(--silver-100); color:var(--silver-700)}
.state{border-color:var(--silver-200); color:var(--silver-700)}

/* 구분 규칙선에 실버 한 줄 */
.stagehero .rule{background:linear-gradient(90deg,var(--silver-700),#262627 60%)}

/* 링크 밑줄 */
.linkout{border-bottom-color:var(--silver)}
.linkout:hover{border-bottom-color:var(--g900)}

/* 선택 카드 선택 상태 */
.choice[aria-pressed="true"]{border-color:var(--silver-600); background:var(--silver-50)}
.choice:hover{border-color:var(--silver)}
.choice .ch-go{color:var(--silver)}

/* 진행 바 */
.pstep i.on{background:var(--silver-700)}

/* 칩 */
.chip-btn:hover{border-color:var(--silver); color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--silver-sheen); border-color:transparent; color:var(--g900)}

/* ══ 모션 — 토스식 스크롤 등장 ════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1; transform:none}
  .reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s}
  .reveal.d3{transition-delay:.18s} .reveal.d4{transition-delay:.24s}
}
.btn,.chip-btn,.choice,.frow,.lrow,.linkout{transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s cubic-bezier(.16,1,.3,1)}
.btn:active,.chip-btn:active,.choice:active{transform:scale(.985)}
.bigcard{transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1)}
.bigcard:hover{transform:translateY(-3px)}
.worklist a{transition:padding-left .25s cubic-bezier(.16,1,.3,1)}
.worklist a:hover{padding-left:8px}


/* 카드 배지 — TDS Badge 규격 */
.bigcard .svc-head{display:flex; align-items:center; gap:8px}
.bigcard .state{display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:var(--t7); line-height:1; font-weight:700; color:var(--silver-700)}
.bigcard .kind{font-size:var(--t7); line-height:1; color:var(--grey-2)}
.bigcard .linkout{border-bottom-width:1px; padding-bottom:1px}
@media (min-width:861px){ .bigcard{padding:26px} }


/* ── 토스 실측 맞춤 (1024px 기준) ─────────────────────── */
/* 행간 상속으로 15px 글자에 25.5px가 붙던 문제 정리 */
.frow p, .lrow .lr-b, .bigcard .desc, .quad span, .toc a{line-height:1.5}
.nav-links a{font-size:15px; font-weight:600; line-height:60px}
.hero-center .lead{font-size:17px; line-height:27px}
.title{line-height:1.3}
h2.title{font-size:var(--d2)}
/* 토스 주요 CTA: 높이 56 · pill · 19/600 */
.hero-btns .btn{height:56px; font-size:18px; padding:0 26px}
.stickybar .btn{height:48px; font-size:16px}

/* 슬랙 화면 헤더 — 창 장식 대신 출처 표기 */
.screen-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.screen-top .ch-meta{font-size:var(--t7); color:var(--grey-2); font-weight:400}
/* 키보드 포커스 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
.choice:focus-visible,.chip-btn:focus-visible{outline:2px solid var(--g900); outline-offset:2px; border-radius:var(--r-sm)}
.bigcard.ink a:focus-visible{outline-color:#fff}
/* 법적 문서 링크 */
.need + .need{margin-left:6px}

/* ── 카드 하단 액션: 버튼 2개로 위계 분리 ───────────────── */
.bigcard .more{margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.bigcard .more .btn{height:38px; padding:0 15px; border-radius:var(--r-md);
  font-size:var(--t6); font-weight:600}
.bigcard .more .btn.weak{background:var(--g200); color:var(--g900); border:0}
.bigcard .more .btn.weak:hover{background:var(--g300)}
.bigcard .more .btn.line{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.bigcard .more .btn.line:hover{border-color:var(--g400); color:var(--ink)}
.bigcard .more .btn.ext{display:inline-flex; align-items:center; gap:5px}
.bigcard .more .btn.ext i{font-style:normal; font-size:12px; opacity:.6}

/* 먹색 카드 위 */
.bigcard.ink .more .btn.weak{background:#23242A; color:#fff}
.bigcard.ink .more .btn.weak:hover{background:#2E3037}
.bigcard.ink .more .btn.line{color:#C9C9C9; border-color:#33343A}
.bigcard.ink .more .btn.line:hover{border-color:#54565E; color:#fff}

/* 아직 열 수 없는 액션 — 자리는 유지하되 누를 수 없게 */
.bigcard .more .btn.is-off{cursor:default; opacity:.55; pointer-events:none}
.bigcard .more .btn.is-off i{display:none}

/* ══ 히어로 2단 ═══════════════════════════════════════════ */
.hero-split{padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,96px)}
.hs-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.hs-copy h1{font-size:clamp(30px,3.9vw,46px); line-height:1.32; margin-top:18px}
.hs-copy .lead{margin-top:22px; max-width:30em; text-align:left}
.hs-copy .hero-btns{justify-content:flex-start; margin-top:30px}
.hs-visual .screen{width:100%}
.vis-cap{margin-top:12px; font-size:var(--t7); color:var(--grey-2)}
@media (max-width:900px){
  .hs-grid{grid-template-columns:1fr; gap:34px}
  .hero-split .hero-btns{flex-wrap:wrap}
}

/* 라벨 앞 짧은 선 */
.eyebrow .rule{display:inline-block; width:26px; height:1px; background:var(--silver);
  vertical-align:middle; margin-right:10px; margin-bottom:2px}

/* 섹션 머리 — 제목 좌 / 설명 우 */
.sec-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:start; margin-top:16px}
.sec-head .title{margin:0}
.sec-head .lead{margin:6px 0 0; max-width:34em}
@media (max-width:820px){ .sec-head{grid-template-columns:1fr; gap:14px} }

/* ══ 자체 서비스 — 풀폭 2단 ═══════════════════════════════ */
.svc-rows{display:flex; flex-direction:column; gap:clamp(40px,5.5vw,72px); margin-top:clamp(36px,4.6vw,60px)}
.svc-row{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(26px,4vw,52px); align-items:center;
  border-top:1px solid var(--line-2); padding-top:clamp(28px,3.6vw,48px)}
.svc-row:first-child{border-top:0; padding-top:0}
.sr-vis{margin:0}
.sr-vis img{width:100%; height:auto; display:block; border-radius:var(--r-lg); background:var(--stage)}
.sr-vis figcaption{margin-top:10px; font-size:var(--t7); color:var(--grey-2)}
.sr-meta{display:flex; align-items:center; gap:10px; font-size:var(--t7); color:var(--grey-2)}
.sr-meta .state{margin-left:auto}
.sr-body h3{margin-top:10px; font-size:clamp(24px,2.8vw,32px); line-height:1.25}
.sr-line{margin-top:10px; font-size:var(--t4); line-height:var(--t4l); font-weight:600; color:var(--ink-2)}
.sr-desc{margin-top:12px; font-size:var(--t6); line-height:1.6; color:var(--grey); max-width:32em}
.sr-nums{display:flex; gap:36px; margin-top:22px}
.sr-nums b{font-size:26px; font-weight:700; color:var(--ink); letter-spacing:normal; font-variant-numeric:tabular-nums}
.sr-nums i{font-style:normal; font-size:14px; font-weight:600; color:var(--ink-2); margin-left:2px}
.sr-nums span{display:block; margin-top:4px; font-size:var(--t7); color:var(--grey)}
.sr-note{margin-top:14px; font-size:var(--t7); color:var(--grey-2)}
.sr-go{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:22px; font-size:var(--t6); font-weight:600}
@media (max-width:820px){
  .svc-row{grid-template-columns:1fr; gap:20px}
  .sr-nums{gap:28px}
}

/* ══ 맡는 일 — 표 ═════════════════════════════════════════ */
.wtable{margin-top:clamp(30px,3.8vw,48px); border-top:1px solid var(--line)}
.wrow{display:grid; grid-template-columns:76px 190px minmax(0,1fr) 108px 112px;
  gap:20px; align-items:start; padding:22px 0; border-bottom:1px solid var(--line-2); color:inherit}
.wrow.wr-head{padding:10px 0; border-bottom:1px solid var(--line)}
.wr-head span{font-size:var(--t7); color:var(--grey-2); font-weight:600}
.w-tag{font-size:var(--t7); color:var(--grey-2); padding-top:3px}
.w-name{font-size:var(--t5); font-weight:700; color:var(--ink)}
.w-desc{font-size:var(--t6); line-height:1.6; color:var(--grey)}
.w-term{font-size:var(--t6); color:var(--ink-2); font-variant-numeric:tabular-nums}
.w-go{font-size:var(--t6); font-weight:600; color:var(--ink-2); white-space:nowrap;
  border-bottom:1px solid var(--silver); padding-bottom:2px; justify-self:start}
.w-go i{font-style:normal; font-size:12px; opacity:.6}
a.wrow:hover .w-name{text-decoration:underline; text-underline-offset:4px}
a.wrow:hover .w-go{border-bottom-color:var(--g900); color:var(--ink)}
@media (max-width:900px){
  .wrow{grid-template-columns:70px minmax(0,1fr); gap:6px 16px; padding:20px 0}
  .wrow.wr-head{display:none}
  .w-name{grid-column:2}
  .w-desc{grid-column:2}
  .w-term{grid-column:2; font-size:var(--t7); color:var(--grey-2)}
  .w-go{grid-column:2; margin-top:6px}
}


/* ══ 실버 — 글로시 마감 ═══════════════════════════════════ */
.btn.silver,
.chip-btn[aria-pressed="true"]{
  background:var(--silver-sheen);
  background-size:140% 100%;
  background-position:18% 0;
  color:#101216;
  border:1px solid rgba(11,11,12,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(11,11,12,.10),
             0 1px 2px rgba(11,11,12,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  transition:background-position .45s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.btn.silver:hover,
.chip-btn[aria-pressed="true"]:hover{
  background-position:62% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),
             inset 0 -1px 0 rgba(11,11,12,.12),
             0 2px 6px rgba(11,11,12,.20);
  filter:none;
}
.btn.silver:active,
.chip-btn[aria-pressed="true"]:active{
  box-shadow:inset 0 2px 4px rgba(11,11,12,.22);
}

/* 실버 선 — 금속 광택 */
.eyebrow .rule{
  width:30px; height:2px; border-radius:1px;
  background:var(--silver-sheen); background-size:200% 100%;
}
.stagehero .rule{
  height:2px;
  background:linear-gradient(90deg,#FFFFFF 0%,#C9CFD6 10%,#767D87 32%,#2A2B2E 70%,#1A1B1E 100%);
}

/* 실버 배지 */
.badge-t.brand{
  background:var(--silver-sheen); background-size:170% 100%;
  color:#101216; border:1px solid rgba(11,11,12,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ══ 작은 글자 키우기 ═════════════════════════════════════ */
.eyebrow{font-size:15px; line-height:1.5; font-weight:700; margin-bottom:20px}
.eyebrow .rule{width:32px; margin-right:12px}
.sr-meta{font-size:14px}
.sr-vis figcaption{font-size:14px}
.vis-cap{font-size:14px}
.sr-note{font-size:13.5px}
.sr-nums span{font-size:13.5px}
.w-tag{font-size:13.5px}
.wr-head span{font-size:13.5px}
.sub{font-size:16px; line-height:25px}
.note-inline{font-size:14px; line-height:1.65}
.bigcard .metrics span{font-size:13.5px}
.lrow .lr-b{font-size:14.5px}
.stagehero .meta span{font-size:13px}
.worklist .cli{font-size:14px}
.worklist .yr{font-size:13.5px}
.stage-foot{font-size:14px}
.calc-note{font-size:13.5px}
.co-a li{font-size:14.5px}
.co-b p{font-size:14.5px}
.stp p{font-size:15px}
.choice .ch-b{font-size:15px}
.form-note{font-size:13.5px}

/* ══ 팀 2단 ═══════════════════════════════════════════════ */
.team-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,3.6vw,46px) clamp(32px,4vw,58px);
  margin-top:36px; border-top:1px solid var(--line); padding-top:clamp(28px,3.4vw,40px)}
.tmem{display:grid; align-content:start}
.tmem .role{justify-self:start; font-size:12.5px; font-weight:700; line-height:1;
  color:var(--silver-700); border:1px solid var(--silver-200); border-radius:var(--r-sm);
  padding:5px 9px; margin-bottom:14px}
.tmem h3{font-size:19px; line-height:1.35; margin:0}
.tmem p{font-size:15px; line-height:1.6; color:var(--grey); margin:8px 0 0}
.tmem .bio{list-style:none; margin:15px 0 0; padding:0; display:grid; gap:7px}
.tmem .bio li{position:relative; padding-left:15px; font-size:14.5px; color:var(--grey); line-height:1.6}
.tmem .bio li::before{content:""; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--line)}
.tmem .bio b{color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .team-grid{grid-template-columns:1fr; gap:0}
  .tmem{border-bottom:1px solid var(--line-2); padding-bottom:26px; margin-bottom:26px}
  .tmem:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0}
}

/* ══ 타입 스케일 상향 — 전체 한 단계 ═════════════════════ */
:root{
  --t1:34px; --t1l:45px;
  --t2:28px; --t2l:38px;
  --t3:24px; --t3l:34px;
  --t4:21px; --t4l:31px;
  --t5:18px; --t5l:27px;
  --t6:16px; --t6l:24px;
  --t7:14px; --t7l:21px;
}
body{font-size:17px; line-height:27px}
.lead{font-size:19px; line-height:30px}
.sub{font-size:16.5px; line-height:26px}
.eyebrow{font-size:15.5px}
.nav-links{font-size:16px}
.btn{font-size:17px; height:52px; padding:0 26px}
.btn.sm{height:40px; font-size:15px; padding:0 16px}
.btn.lg{height:58px; font-size:18px}
.btn.xs{font-size:14px}

/* 본문 블록 */
.frow h3{font-size:19.5px}
.frow p{font-size:16.5px}
.frow .ico{font-size:14px}
.frow .go{font-size:15px}
.frow .bio li{font-size:15.5px}
.fcell h3{font-size:20px}
.fcell p{font-size:16.5px}
.fcell .spec{font-size:14px}
.stp h3{font-size:19px; line-height:28px}
.stp p{font-size:16.5px; line-height:26px}
.stp b{width:28px; height:28px; font-size:13px}
.stp{grid-template-columns:28px minmax(0,1fr)}
.stp::before{left:13.5px; top:28px}
.rule-note{font-size:16.5px}
.note-inline{font-size:16px}
.linkout{font-size:16.5px}

/* 팀 */
.tmem h3{font-size:20.5px}
.tmem p{font-size:16.5px; line-height:27px}
.tmem .bio li{font-size:15.5px; line-height:26px}
.tmem .role{font-size:13.5px}

/* 자체 서비스 행 */
.sr-meta{font-size:15px}
.sr-line{font-size:19px}
.sr-desc{font-size:16.5px; line-height:27px}
.sr-note{font-size:14.5px}
.sr-nums span{font-size:14.5px}
.sr-vis figcaption{font-size:15px}
.vis-cap{font-size:15px}

/* 맡는 일 표 */
.w-tag{font-size:14.5px}
.w-name{font-size:17.5px}
.w-desc{font-size:16px; line-height:26px}
.w-term{font-size:15px}
.w-go{font-size:15px}

/* 지표 · 계산기 */
.kpi b{font-size:34px}
.kpi span{font-size:15px}
.stat b{font-size:34px}
.stat span{font-size:15px}
.calc-in label span{font-size:16px}
.calc-note{font-size:14.5px}
.co-a .k,.co-b .k{font-size:15px}
.co-a li,.co-b p{font-size:15.5px}

/* 슬랙 화면 */
.msg h4{font-size:17px}
.msg .who{font-size:14.5px}
.tasklist li{font-size:15.5px}
.pillnote{font-size:13.5px}
.screen-top b{font-size:14px}

/* 상담 */
.choice .ch-t{font-size:17.5px}
.choice .ch-b{font-size:15px}
.chip-btn{font-size:15.5px}
.field label{font-size:15.5px}
.field input,.field textarea{font-size:16.5px}
.consent span{font-size:15px}
.form-note{font-size:14.5px}

/* 상태 라벨 · 배지 */
.state,.svc-head .state{font-size:13.5px}
.svc-head .kind{font-size:14.5px}
.badge-t{font-size:13.5px}

/* 작업 이력 */
.worklist .cli{font-size:15px}
.worklist .ttl{font-size:17px}
.worklist .yr{font-size:14.5px}
.stagehero .sub{font-size:16.5px}
.stagehero .meta span{font-size:14px}
.stage-foot span{font-size:15px}

/* 푸터 · 고정바 */
footer{font-size:15.5px}
.foot-in b{font-size:16.5px}
.stickybar .txt{font-size:15.5px}

/* ══ 워드마크 — 실버 베이스 ═══════════════════════════════ */
/* 「먀」는 먹색 글자에 금속 광택을 얹고, 슬래시와 AI STUDIO는 실버 */
.mk .k{
  background:linear-gradient(160deg,
    #2E3237 0%, #0E1013 18%, #4A5058 34%, #17191D 48%,
    #6B727B 62%, #101317 76%, #3A4046 92%, #0B0B0C 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.mk .sl{
  color:var(--silver-600); opacity:1; font-weight:300;
  transform:translateY(-.02em) scaleY(1.18);
}
.mk .l{
  background:var(--silver-sheen); background-size:170% 100%; background-position:14% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:brightness(.82) saturate(0);   /* 흰 배경에서 읽히도록 한 단계 눌러줌 */
  transition:background-position .5s cubic-bezier(.16,1,.3,1), filter .25s ease;
}
.logo:hover .l{ background-position:70% 0; filter:brightness(.72) }
.logo:hover .k{ filter:brightness(1.25) }

/* 먹색 면 위에서는 반전 — 글자 자체가 실버 */
.stagehero .mk .k, footer .mk .k, .band .mk .k, .co-b .mk .k{
  background:var(--silver-sheen); background-size:150% 100%;
  -webkit-background-clip:text; background-clip:text; filter:none;
}
.stagehero .mk .l, footer .mk .l, .band .mk .l{ filter:brightness(1) }
.stagehero .mk .sl, footer .mk .sl, .band .mk .sl{ color:var(--silver-200) }

/* 배경 클립 미지원 브라우저 대비 */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mk .k{color:var(--ink); -webkit-text-fill-color:var(--ink)}
  .mk .l{color:var(--silver-700); -webkit-text-fill-color:var(--silver-700); filter:none}
}

/* 파비콘용 사각 마크도 실버 테두리 */
.logomark{
  background:var(--stage); color:var(--silver-100);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(11,11,12,.10);
}

/* ══ 기업 · 기관 페이지 ═══════════════════════════════════ */
.ent-hero{padding-block:clamp(84px,11vw,150px) clamp(60px,7vw,96px)}
.ent-hero h1{max-width:16em}
.ent-hero .lead{max-width:36em}

.entgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,44px) clamp(32px,4vw,58px);
  margin-top:40px; border-top:1px solid var(--line); padding-top:clamp(28px,3.4vw,40px)}
.entcell .n{display:block; font-size:13.5px; font-weight:700; color:var(--silver-700);
  letter-spacing:.06em; margin-bottom:10px}
.entcell h3{font-size:21px; line-height:1.35}
.entcell p{font-size:16.5px; line-height:27px; color:var(--grey); margin-top:9px}

.ent-spec{width:100%; border-collapse:collapse; margin-top:34px}
.ent-spec th,.ent-spec td{text-align:left; vertical-align:top;
  padding:18px 0; border-bottom:1px solid var(--line-2); font-size:16.5px; line-height:27px}
.ent-spec th{width:170px; padding-right:26px; color:var(--ink); font-weight:700; white-space:nowrap}
.ent-spec td{color:var(--grey)}
.ent-spec td.need{color:var(--silver-700); font-weight:700}
.ent-spec tr:first-child th,.ent-spec tr:first-child td{border-top:1px solid var(--line)}

@media (max-width:760px){
  .entgrid{grid-template-columns:1fr; gap:0}
  .entcell{border-bottom:1px solid var(--line-2); padding-bottom:24px; margin-bottom:24px}
  .entcell:last-child{border-bottom:0; padding-bottom:0; margin-bottom:0}
  .ent-spec th,.ent-spec td{display:block; width:auto; padding-right:0}
  .ent-spec th{border-bottom:0; padding-bottom:4px}
  .ent-spec td{padding-top:0}
}

/* 히어로 기업 진입로 */
.hero-ent{margin-top:22px; font-size:15.5px; color:var(--grey)}
.hero-ent .linkout{font-size:15.5px}

/* 비용 계산기 규모 프리셋 */
.calc-preset{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px}
.calc-preset span{font-size:14px; color:var(--grey-2); font-weight:700; margin-right:2px}
.calc-preset button{font-family:inherit; font-size:14px; font-weight:700; color:var(--grey);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 12px; cursor:pointer; transition:border-color .15s ease, color .15s ease}
.calc-preset button:hover{border-color:var(--silver); color:var(--ink)}
.calc-preset button[aria-pressed="true"]{background:var(--silver-sheen); background-size:170% 100%;
  border-color:transparent; color:#101216; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

/* ══ 다크 모드 버튼 대비 보정 ══════════════════════════════
   기본 버튼(먹색 면 + --bg 글자)이 다크에서 검정 위 검정이 되던 문제.
   다크에서는 메인 컬러인 실버 면 + 먹색 글자로 뒤집어요. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn:not(.silver):not(.weak):not(.line):not(.onstage){background:var(--silver-sheen); color:var(--g900)}
  :root:not([data-theme="light"]) .btn.weak{background:#2A2D33; color:#F2F4F6}
}
:root[data-theme="dark"] .btn:not(.silver):not(.weak):not(.line):not(.onstage){background:var(--silver-sheen); color:var(--g900)}
:root[data-theme="dark"] .btn.weak{background:#2A2D33; color:#F2F4F6}
/* 다크 모드에서는 워드마크 「먀」도 '먹색 면 위 반전' 규칙을 따름 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mk .k{background:var(--silver-sheen); background-size:150% 100%; -webkit-background-clip:text; background-clip:text; filter:none}
  :root:not([data-theme="light"]) .mk .l{filter:brightness(1)}
}
:root[data-theme="dark"] .mk .k{background:var(--silver-sheen); background-size:150% 100%; -webkit-background-clip:text; background-clip:text; filter:none}
:root[data-theme="dark"] .mk .l{filter:brightness(1)}

/* 서비스 상세 페이지 캡처 — height 속성 때문에 세로로 늘어나던 문제 */
.shotfig{margin:clamp(28px,4vw,48px) 0 0}
.shotfig img{width:100%; height:auto; border-radius:var(--r-lg); background:var(--stage)}
.shotfig figcaption{margin-top:10px; font-size:14px; color:var(--grey-2)}
.tmem .role.out{color:var(--grey-2); border-color:var(--line); border-style:dashed}

/* 앵커 이동 시 고정 헤더에 가리지 않게 */
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}

/* 은연 브랜드마크 */
.brandmark{margin:clamp(28px,3.4vw,40px) 0 0}
.brandmark img{width:min(360px,72vw); height:auto}
.brandmark figcaption{margin-top:12px; font-size:14px; color:var(--grey-2)}
.mk-mean{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(26px,3vw,36px); padding-top:26px; border-top:1px solid var(--line-2)}
.mk-mean div{display:grid; align-content:start; gap:4px}
.mk-mean img{width:44px; height:auto; margin-bottom:8px}
.mk-mean b{font-size:16px; color:var(--ink); font-weight:700}
.mk-mean span{font-size:15px; color:var(--grey); line-height:1.5}
@media (max-width:700px){ .mk-mean{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══ 먀 시그니처 — aiaiaiaiaiai먀 ════════════════════════ */
/* 사방에서 들리는 AI 소음이 이름으로 무너진다. 설명하지 않는다. */
.sig{display:flex; align-items:baseline; gap:0; margin-bottom:22px;
  font-weight:700; line-height:1; letter-spacing:-.01em; user-select:none}
.sig-noise{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px; letter-spacing:-.04em; color:var(--grey-2); opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%)}
.sig-name{font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-left:2px}
@media (prefers-reduced-motion:no-preference){
  .sig-noise{animation:sigIn 1.1s cubic-bezier(.16,1,.3,1) both}
  .sig-name{animation:sigPop .5s cubic-bezier(.16,1,.3,1) .55s both}
}
@keyframes sigIn{from{opacity:0; letter-spacing:.22em}to{opacity:1; letter-spacing:-.04em}}
@keyframes sigPop{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
@media (max-width:560px){ .sig-noise{font-size:16px} .sig-name{font-size:22px} }
/* 먹색 히어로(fx-hero) 위에서는 고정 밝은색 — 테마 토큰이 아니라 */
.fx-hero .sig-noise{color:#8B95A1; opacity:.5}
.fx-hero .sig-name{color:#fff}
.tmem .bio-note{font-size:14px; color:var(--grey-2); margin-top:10px; padding-left:11px; border-left:2px solid var(--line)}
.sec-note{margin-top:16px; font-size:15px; line-height:1.6; color:var(--grey-2);
  padding-left:13px; border-left:2px solid var(--line)}