/* 2026-11-07 3기법 검토본: 아이디어북 · 무료 진단 · 소개 리워드 (A안 색·글꼴 그대로) */

/* 홈: 세 기법 입구 */
.growth-trio{padding:0 0 clamp(100px,13vw,200px)}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.trio-card{display:flex;flex-direction:column;gap:18px;min-height:340px;padding:clamp(26px,2.6vw,40px);background:var(--white);border:1px solid var(--line);transition:background .25s,color .25s,transform .25s}
.trio-card .num{font:12px/1.4 monospace;color:var(--sage-dark);letter-spacing:.04em}
.trio-card h3{margin:0;font-size:clamp(24px,2.3vw,36px);line-height:1.25;letter-spacing:-.03em;font-weight:600}
.trio-card p{margin:0;color:#4d504b;line-height:1.75;font-size:15px}
.trio-cta{margin-top:auto;display:inline-flex;align-items:center;gap:14px;font-size:14px;border-bottom:1px solid;align-self:flex-start;padding-bottom:6px}
.trio-cta:after{content:"↗"}
.trio-card:hover{background:var(--ink);color:var(--paper);transform:translateY(-3px)}
.trio-card:hover p,.trio-card:hover .num{color:#cfd1c8}
.trio-card:nth-child(2){background:var(--sage);color:var(--white);border-color:var(--sage)}
.trio-card:nth-child(2) p,.trio-card:nth-child(2) .num{color:#eef0e8}
.trio-card:nth-child(2):hover{background:var(--sage-dark)}
.cta-links{display:flex;flex-wrap:wrap;gap:12px 36px}
.cta-field .cta-links .arrow-link{margin-top:30px}

/* 사업분야: 사진 반영 예정 표시와 아이디어북 연결 */
.pending-note{display:inline-block;margin:6px 0 18px!important;padding:6px 11px;border:1px dashed var(--sage-dark);color:var(--sage-dark)!important;font-size:12px!important}
.chapter-links{display:flex;flex-wrap:wrap;gap:14px 34px}

/* 공통: 상태 표시 */
.status-chip{display:inline-block;margin:0;padding:8px 13px;border:1px dashed var(--sage-dark);color:var(--sage-dark);font-size:12px;letter-spacing:.01em}
.pending-button{display:inline-flex;align-items:center;padding:15px 20px;border:1px dashed var(--line);color:var(--muted);font-size:13px;cursor:not-allowed}
.ref-banner{margin:0 0 28px;padding:14px 18px;background:var(--white);border-left:3px solid var(--sage);font-size:14px}
.share-status{min-height:1.4em;margin:12px 0 0;font-size:13px;color:var(--sage-dark)}

/* 3단계 줄 */
.howto-line{list-style:none;margin:0 0 clamp(60px,7vw,110px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.howto-line li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 22px 28px;display:flex;flex-direction:column;gap:10px}
.howto-line span{font:12px monospace;color:var(--sage-dark)}
.howto-line strong{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;font-weight:600}
.howto-line p{margin:0;color:#4d504b;font-size:14px;line-height:1.7}

/* ① 아이디어북 */
.curation-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.curation-toolbar .filters{padding-bottom:20px}
.saved-count{margin:8px 0 0;font-size:13px;color:var(--muted)}
.saved-count a{border-bottom:1px solid;color:var(--ink)}
.collections{display:flex;flex-direction:column;gap:clamp(70px,8vw,130px);padding:30px 0 clamp(90px,10vw,160px)}
.collection[hidden]{display:none}
.collection-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,70px);align-items:end;padding-bottom:34px;border-bottom:1px solid}
.collection-figure{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;background:#c9ccc5}
.collection-figure img{height:100%;object-fit:cover}
.collection-copy h2{margin:16px 0 12px;font-size:clamp(30px,3.4vw,54px);line-height:1.18;letter-spacing:-.03em;font-weight:580}
.collection-for{margin:0 0 26px;color:var(--muted);font-size:14px}
.collection-actions{display:flex;flex-wrap:wrap;gap:10px}
.collection-actions .ghost-link{background:transparent;cursor:pointer}
.save-button{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:12px 19px;font-size:13px;transition:.2s}
.save-button:before{content:"＋ "}
.save-button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.save-button[aria-pressed=true]:before{content:"✓ "}
.pick-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line)}
.pick{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 24px 30px;display:flex;flex-direction:column;gap:12px;min-height:250px}
.pick-num{font:12px monospace;color:var(--sage-dark)}
.pick h3{margin:0;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;line-height:1.3;font-weight:600}
.pick p{margin:0;color:#4d504b;line-height:1.75;font-size:15px}
.pick-check{margin-top:auto!important;padding-top:14px;border-top:1px dashed var(--line);font-size:13px!important;color:#5c5f58!important}
.pick-check span{display:block;font-size:11px;font-weight:700;color:var(--sage-dark);margin-bottom:4px;letter-spacing:.02em}
.pick.ours{background:var(--ink);color:var(--paper)}
.pick.ours .pick-num{color:#b4c3a3}
.pick.ours p{color:#d4d4cc}
.pick.ours .arrow-link{margin-top:auto;align-self:flex-start;color:var(--paper)}
.growth-cta{min-height:52vh}

/* ② 무료 진단 */
.diag-wrap{padding-bottom:clamp(90px,10vw,160px)}
.diag-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);align-items:start}
.diag-card{background:var(--white);border:1px solid var(--line);padding:clamp(24px,3.4vw,54px);min-height:520px;display:flex;flex-direction:column}
.diag-progress{height:4px;background:var(--paper-2);overflow:hidden}
.diag-progress span{display:block;height:100%;width:0;background:var(--sage);transition:width .35s var(--ease)}
.diag-count{margin:14px 0 26px;font:12px monospace;color:var(--sage-dark)}
.diag-step{border:0;margin:0;padding:0}
.diag-step legend{padding:0;margin-bottom:26px}
.diag-q{display:block;font-size:clamp(28px,3vw,46px);line-height:1.22;letter-spacing:-.03em;font-weight:600}
.diag-step legend small{display:block;margin-top:10px;color:var(--muted);font-size:14px}
.diag-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.diag-option{position:relative;display:block}
.diag-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.diag-option span{display:flex;align-items:center;min-height:64px;padding:16px 20px 16px 52px;border:1px solid var(--line);background:var(--paper);font-size:16px;line-height:1.4;position:relative;transition:.18s}
.diag-option span:before{content:"";position:absolute;left:20px;top:50%;width:18px;height:18px;margin-top:-9px;border:1.5px solid var(--muted);border-radius:50%}
.diag-option input[type=checkbox]+span:before{border-radius:3px}
.diag-option input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.diag-option input:checked+span:before{border-color:var(--paper);background:radial-gradient(circle,var(--paper) 0 38%,transparent 42%)}
.diag-option input[type=checkbox]:checked+span:before{background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink)}
.diag-option input:focus-visible+span{outline:3px solid var(--sage);outline-offset:2px}
.diag-option:hover span{border-color:var(--ink)}
.diag-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:34px}
.diag-nav .ghost-link{background:transparent;cursor:pointer}
.diag-nav .download-button{min-width:140px;cursor:pointer}
.diag-nav .download-button:disabled{opacity:.35;cursor:not-allowed}
.diag-side{position:sticky;top:20px;background:var(--ink);color:var(--paper);padding:clamp(24px,2.6vw,40px)}
.diag-side .eyebrow{color:#b4c3a3}
.diag-side h2{margin:12px 0 6px;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;font-weight:600}
.diag-side .check-list li{border-bottom-color:rgba(242,240,233,.18);color:#e2e2da}
.diag-side .check-list li:before{border-color:#b4c3a3}
.diag-side .body-copy.small{font-size:14px;color:#cfd1c8;margin:0 0 12px}
.diag-side .story-note{color:#a9aca3;font-size:12px;margin:0}
.diag-result h2{margin:14px 0 30px;font-size:clamp(26px,2.8vw,42px);line-height:1.25;letter-spacing:-.03em;font-weight:600}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.result-grid h3{margin:0 0 12px;font-size:14px;letter-spacing:.01em;color:var(--sage-dark)}
.result-cols{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.result-cols a{display:block;padding:14px 16px;border:1px solid var(--line);background:var(--paper);transition:.2s}
.result-cols a:hover{background:var(--ink);color:var(--paper)}
.result-cols span{display:block;font-size:11px;font-weight:700;color:var(--sage-dark);margin-bottom:4px}
.result-cols a:hover span{color:#b4c3a3}
.result-cols strong{font-size:15px;font-weight:600;line-height:1.45}
.result-grid .check-list{margin:0}
.result-grid .check-list li{font-size:14px;line-height:1.6}
.prep-list{margin:0;padding-left:18px;font-size:14px;line-height:1.8;color:#4d504b}
.diag-lead{margin-top:42px;padding-top:30px;border-top:1px solid}
.lead-head h3{margin:10px 0 8px;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.lead-head p{margin:0 0 6px;color:#4d504b;font-size:14px;line-height:1.7}
.saved-attach{margin:18px 0 0;font-size:13px;color:var(--sage-dark)}
.diag-lead .consent-box{margin-top:22px}
.diag-lead .form-actions{margin-top:24px}
.restart-line{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.restart-line .ghost-link{background:transparent;cursor:pointer}

/* ③ 소개 리워드 */
.ref-intro{display:flex;flex-direction:column;gap:30px;padding-bottom:clamp(40px,5vw,70px)}
.ref-who ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ref-who li{border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:14px;background:var(--white)}
.ref-ladder-wrap{padding-bottom:clamp(70px,8vw,120px)}
.ladder-state{margin:0;font-size:13px;color:var(--sage-dark);max-width:320px;text-align:right}
.ladder-bar{height:6px;margin-top:34px;background:var(--paper-2);overflow:hidden}
.ladder-bar span{display:block;height:100%;width:0;background:var(--sage);transition:width .5s var(--ease)}
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--line)}
.rung{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 20px 30px;display:flex;flex-direction:column;gap:14px;min-height:210px;background:var(--white)}
.rung-label{font:12px/1.4 monospace;color:var(--sage-dark)}
.rung strong{font-size:clamp(16px,1.3vw,19px);line-height:1.5;font-weight:600;letter-spacing:-.01em}
.rung.start{background:var(--paper)}
.rung.is-done{background:var(--sage);color:var(--white)}
.rung.is-done .rung-label{color:#eef0e8}
.rung.is-done .rung-label:after{content:" ✓"}
.rung.big{background:var(--ink);color:var(--paper);position:relative}
.rung.big .rung-label{color:#e4bd6b;font-weight:700}
.rung.big strong{font-size:clamp(18px,1.6vw,23px)}
.ref-make{padding-bottom:clamp(70px,8vw,120px)}
.ref-make-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
.ref-form h2{margin:12px 0 10px;font-size:clamp(28px,3vw,46px);line-height:1.2;letter-spacing:-.03em;font-weight:580}
.ref-form .form-actions{margin-top:24px}
.ref-result{background:var(--ink);color:var(--paper);padding:clamp(26px,3vw,46px)}
.ref-result[hidden]{display:none}
.ref-result .eyebrow{color:#b4c3a3}
.ref-code{margin:14px 0 8px;font:600 clamp(40px,5vw,72px)/1.1 monospace;letter-spacing:.06em;color:#fff}
.ref-link{margin:0 0 22px;font-size:13px;color:#cfd1c8;word-break:break-all}
.ref-result .solid-button{background:var(--sage);border:0;cursor:pointer}
.ref-result .solid-button:hover{background:var(--sage-dark)}
.ref-result .ghost-link{background:transparent;border-color:rgba(242,240,233,.35);color:var(--paper);cursor:pointer}
.ref-result .share-status{color:#b4c3a3}
.ref-result .story-note{color:#a9aca3;font-size:12px;margin:12px 0 0}
.ref-friend,.ref-rules{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,80px);padding:clamp(40px,5vw,70px) var(--pad);border-top:1px solid var(--line)}
.ref-friend h2,.ref-rules h2{margin:12px 0 0;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;font-weight:580}
.ref-friend .lead{margin:0}
.ref-rules .check-list{margin:0}
.ref-rules{margin-bottom:clamp(60px,7vw,110px)}
.cta-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-field .pending-button{border-color:rgba(250,249,245,.5);color:#eef0e8}

/* 디자인 검토: 이 기기 기록 */
.metric-list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.metric-list div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.metric-list dt{color:#4d504b}
.metric-list dd{margin:0;font:600 15px monospace}

@media(max-width:1100px){
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pick-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .trio-grid,.howto-line{grid-template-columns:1fr}
  .trio-card{min-height:0}
  .collection-head,.diag-layout,.ref-make-grid,.ref-friend,.ref-rules{grid-template-columns:1fr}
  .diag-side{position:static}
  .result-grid{grid-template-columns:1fr}
  .ladder-state{text-align:left}
  .ref-ladder-wrap .section-top{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:600px){
  .pick-grid{grid-template-columns:1fr}
  .pick{min-height:0}
  .diag-options{grid-template-columns:1fr}
  .diag-card{min-height:0;padding:22px 18px}
  .diag-option span{min-height:56px;font-size:15px}
  .ladder{grid-template-columns:1fr}
  .rung{min-height:0;padding:18px 18px 22px}
  .metric-list{grid-template-columns:1fr}
  .curation-toolbar .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:14px;margin-right:calc(var(--pad) * -1)}
  .curation-toolbar .filter-button{flex:0 0 auto}
  .collection-copy h2{font-size:30px}
}

/* 메뉴가 8개라 901~1240px에서는 간격을 줄임 */
@media(min-width:901px) and (max-width:1240px){.site-nav{gap:16px;font-size:13px}.nav-inquiry{padding:9px 14px}}

/* 한글이 섞인 작은 라벨은 고정폭 글꼴 대신 본문 글꼴 */
.trio-card .num,.rung-label,.diag-count{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* 3기법 페이지는 머리 높이를 줄여 첫 화면에 기능이 보이게 */
.page-head.growth-head{padding:clamp(56px,6vw,96px) 0 clamp(36px,4vw,60px)}
.page-head.growth-head .display.medium{font-size:clamp(46px,5.6vw,92px)}
.diag-nav[hidden],.diag-nav [hidden]{display:none!important}
@media(max-width:900px){.page-head.growth-head p{margin-top:28px}}

/* 진단 결과는 넓게 */
.diag-layout.is-result{grid-template-columns:1fr}
.diag-layout.is-result .diag-side{display:none}

.ref-intro .status-chip{align-self:flex-start}

/* 휴대폰 메뉴: 머리글의 흐림 효과(backdrop-filter)가 고정 메뉴를 머리글 안에 가둬 메뉴가 안 보이던 문제 수정 */
@media(max-width:900px){
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
  .site-nav{overflow-y:auto}
}
/* 분류 칩 가로 스크롤 막대 숨김 */
.curation-toolbar .filters{scrollbar-width:none}
.curation-toolbar .filters::-webkit-scrollbar{display:none}