/* ============================================================ 도움말 센터 · 시작 체크리스트 · 질문 하나씩 · 예제 갤러리 (2026-11-11)
   원칙: 앱 본문 15px 이상, 도움말 · 따라 하며 만들기 본문 17px 이상, 누르는 곳 44px 이상, 높은 명암 대비 */

.linkish{font:inherit;font-weight:700;color:var(--brand);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--text)}

/* ---- 계정 메뉴 '개발자 도구' */
.menu .tn-mesec{padding:6px 10px 2px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.menu .tn-mesec small{font-weight:600;margin-left:4px}
.menu a.on{background:var(--bg-2)}
.menu a,.menu button{min-height:40px;font-size:14.5px}
.dn .dn-dev>summary small{display:block}
.dn .dn-ob{margin-top:8px}

/* ---- 시작 체크리스트(대시보드 · 처음 시작) */
.sck-host{margin:0 0 20px}
.sck{padding:20px 22px 18px;border-radius:var(--r-lg,14px);border:1.5px solid color-mix(in srgb,var(--brand) 38%,var(--line));background:var(--panel);box-shadow:var(--shadow);margin:0 0 20px}
.sck-host .sck{margin:0}
.sck.all{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.sck-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 14px}
.sck-ht h2{margin:0;font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.sck-ht p{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--text-2);max-width:720px}
.sck-hr{display:flex;align-items:center;gap:12px}
.sck-prog{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sck-prog i{display:block;width:90px;height:8px;border-radius:99px;background:var(--tint-2,var(--bg-2));overflow:hidden}
.sck-prog i em{display:block;height:100%;border-radius:99px;background:var(--ok)}
.sck-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sck-list>li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2)}
.sck-list>li.now{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--bg-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.sck-list>li.done{opacity:.92}
.sck-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:800;border:2px solid var(--line-2);color:var(--text-2);background:var(--panel)}
.sck-n svg{width:18px;height:18px}
li.done .sck-n{background:var(--ok);border-color:var(--ok);color:#fff}
li.now .sck-n{background:var(--brand);border-color:var(--brand);color:#fff}
.sck-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sck-t b{font-size:17px;font-weight:800;color:var(--text)}
li.done .sck-t b{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--ok) 70%,transparent)}
.sck-t em{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);padding:2px 9px;border-radius:99px;border:1px solid var(--line)}
.sck-badge{font-size:12.5px;font-weight:800;color:#fff;background:var(--brand);padding:2px 9px;border-radius:99px}
.sck-b p{margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--text-2)}
.sck-by{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.sck-a{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.sck-a .btn{min-height:44px;font-size:15px;justify-content:center;white-space:nowrap}
.sck-foot{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.sck .help{position:relative}
@media (max-width:700px){
  .sck{padding:16px 14px}
  .sck-list>li{grid-template-columns:36px minmax(0,1fr);gap:10px 12px}
  .sck-a{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .sck-a .btn{flex:1 1 auto}
}

/* ---- 도움말 센터 공통: 본문 17px 이상 */
#view:has(> .hc-wrap) .page{font-size:17px}
#view:has(> .hc-wrap) .ph-d{font-size:17px;line-height:1.7}
#view:has(> .hc-wrap) p,#view:has(> .hc-wrap) li,#view:has(> .hc-wrap) td,#view:has(> .hc-wrap) th{font-size:17px;line-height:1.7}
#view:has(> .hc-wrap) small{font-size:15px}
#view:has(> .hc-wrap) .btn{min-height:44px;font-size:15.5px}
.hc-tabs a{min-height:52px;align-content:center}
.hc-tabs a b{font-size:15.5px}
@media (max-width:900px){.hc-tabs a{padding:10px 14px}}

/* 설명 탭(/guide) */
.gd2 .gd2-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.gd2 .gd2-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:700;text-decoration:none}
.gd2 .gd2-toc a:hover{border-color:var(--brand)}
.gd2-sec{margin:0 0 var(--ui-gap,16px);padding:20px 22px;border-radius:var(--r-lg,14px);border:1px solid var(--line);background:var(--panel)}
.gd2-sec h2{margin:0 0 10px;font-size:20px;font-weight:800;color:var(--text)}
.gd2-sec h3{margin:18px 0 8px;font-size:18px;color:var(--text)}
.gd2-sec>p{margin:0 0 12px;color:var(--text-2)}
.gd2-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.gd2-four>div{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
.gd2-four b{font-size:17px;color:var(--brand)}.gd2-four p{margin:4px 0 0;color:var(--text-2)}
.gd2-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd2-steps li{display:flex;gap:12px;align-items:flex-start}
.gd2-steps i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff;background:var(--brand)}
.gd2-steps b{font-size:17.5px;color:var(--text)}.gd2-steps p{margin:2px 0 0;color:var(--text-2)}
.gd2-ul{margin:0;padding-left:22px;display:grid;gap:6px;color:var(--text-2)}
.gd2-search{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--panel);margin:0 0 8px}
.gd2-search svg{flex:none;color:var(--muted)}
.gd2-search .input{border:0;background:none;min-height:52px;font-size:17px;box-shadow:none;padding-left:0}
.gd2-hit{margin:0 0 12px;font-size:15px;color:var(--muted)}
.gd2-tg{margin:0 0 var(--sp-5,24px)}
.gd2-tg>h2{margin:0 0 var(--sp-2,8px);font-size:15px;font-weight:800;color:var(--gold-2,var(--gold));letter-spacing:.02em}
.gd2-dl{margin:0;border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--panel);overflow:hidden}
.gd2-term{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 20px;padding:14px 18px;border-top:1px solid var(--line)}
.gd2-term:first-child{border-top:0}
.gd2-term dt{display:grid;gap:2px;align-content:start}
.gd2-term dt b{font-size:17.5px;color:var(--text)}
.gd2-term dt small{font-size:13.5px!important;font-weight:600;color:var(--muted)}
.gd2-term dd{margin:0}
.gd2-term p{margin:0 0 4px;color:var(--text-2)}
#view:has(> .hc-wrap) .gd2-term dd span{font-size:14.5px;color:var(--muted)}
@media (max-width:640px){.gd2-term{grid-template-columns:1fr;padding:12px 14px}}
.gd2-faq{display:grid;gap:10px}
.gd2-faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.gd2-faq summary{cursor:pointer;list-style:none;padding:16px 18px;min-height:52px;font-size:17.5px;font-weight:750;color:var(--text);display:flex;justify-content:space-between;gap:12px;align-items:center}
.gd2-faq summary::-webkit-details-marker{display:none}
.gd2-faq summary::after{content:"+";font-size:22px;color:var(--muted)}
.gd2-faq details[open] summary::after{content:"−"}
.gd2-faq .a{padding:0 18px 16px;font-size:17px;line-height:1.7;color:var(--text-2)}
.gd2-more{margin-top:var(--sp-5,24px);padding:16px 18px;border-radius:var(--r-lg,14px);border:1px dashed var(--line-2);background:var(--bg-2)}
.gd2-more b{font-size:17px;color:var(--text)}.gd2-more p{margin:4px 0 0;color:var(--text-2)}
.sf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-two>div{padding:16px 18px;border-radius:14px;border:1.5px solid var(--line)}
.sf-can{border-color:color-mix(in srgb,var(--ok) 50%,var(--line))!important;background:color-mix(in srgb,var(--ok) 6%,var(--panel))}
.sf-cant{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))!important;background:color-mix(in srgb,var(--bad) 5%,var(--panel))}
.sf-two h2{font-size:19px}
.sf-two ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf-two li{display:grid;gap:2px}.sf-two li b{font-size:17px;color:var(--text)}.sf-two li span{font-size:15.5px;color:var(--text-2);line-height:1.6}
.sf-can li b::before{content:"✓ ";color:var(--ok)}.sf-cant li b::before{content:"✕ ";color:var(--bad)}
.sf-risk{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.sf-risk>div{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2)}
.sf-risk b{font-size:16.5px;color:var(--text)}.sf-risk p{margin:6px 0 0;color:var(--text-2)}
@media (max-width:760px){.gd2-four,.sf-two{grid-template-columns:1fr}.gd2-sec{padding:16px 14px}}

/* 처음 시작(/start) */
.sg-flow{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-flow li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.sg-flow i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:var(--bg-2);border:1.5px solid var(--line-2);color:var(--text)}
.sg-flow b{font-size:17.5px;color:var(--text)}.sg-flow p{margin:2px 0 0;color:var(--text-2)}
.sg-menu{display:grid;gap:8px}
.sg-mg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.sg-mg b{font-size:16.5px;color:var(--text)}.sg-mg span{font-size:16px;color:var(--text-2)}
@media (max-width:700px){.sg-flow li{grid-template-columns:34px minmax(0,1fr)}.sg-flow li .btn{grid-column:1/-1}.sg-mg{grid-template-columns:1fr}}

/* 따라 하며 만들기(/learn) 본문 */
#view:has(> .hc-wrap) .tu-body{font-size:17px}
#view:has(> .hc-wrap) .tu-lead{font-size:17.5px}
.tu-note .linkish{font-weight:800}

/* ---- 예제 갤러리 */
.gal-f{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.gal-f button{min-height:44px;padding:0 18px;border-radius:99px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);font:inherit;font-size:15.5px;font-weight:700;cursor:pointer}
.gal-f button.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--panel));color:var(--text)}
.gal-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px}
.gal-c{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.gal-c:hover{border-color:var(--line-2)}
.gal-k{display:flex;justify-content:space-between;gap:8px;align-items:center}
.gal-k span{font-size:13.5px;font-weight:800;color:var(--brand);padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--brand) 12%,transparent)}
.gal-k small{font-size:13px;color:var(--muted)}
.gal-c>b{font-size:17.5px;line-height:1.4;color:var(--text)}
.gal-c>p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2);flex:1}
.gal-req summary{cursor:pointer;font-size:14.5px;font-weight:700;color:var(--muted);min-height:32px;display:flex;align-items:center}
.gal-req pre{margin:6px 0 0;white-space:pre-wrap;font-family:var(--sans);font-size:14.5px;line-height:1.6;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-2);max-height:260px;overflow:auto}
.gal-a{display:flex;gap:8px;flex-wrap:wrap}
.gal-a .btn{flex:1 1 auto;min-height:44px;justify-content:center;font-size:15px}
.gal-note{margin:14px 0 0;font-size:14.5px;color:var(--muted)}

/* ---- 요구사항: 질문 하나씩 */
.qa{max-width:760px;margin:0 auto 16px;padding:26px 28px 22px;border-radius:18px;border:1.5px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.qa-prog{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:700;color:var(--muted);margin:0 0 14px}
.qa-prog i{flex:1;height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.qa-prog em{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .25s}
.qa-q{margin:0;font-size:25px;line-height:1.35;color:var(--text);letter-spacing:-.01em}
.qa-d{margin:8px 0 16px;font-size:16px;line-height:1.65;color:var(--text-2)}
.qa .input{width:100%;min-height:54px;font-size:17px;padding:12px 14px}
.qa textarea.input{min-height:150px;line-height:1.6}
.qa-chips{display:flex;flex-wrap:wrap;gap:10px}
.qa-chips button{min-height:52px;padding:0 20px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;font-size:16.5px;font-weight:700;cursor:pointer}
.qa-chips button:hover{border-color:var(--brand)}
.qa-chips button.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--panel))}
.qa-ex{display:inline-block;margin-top:10px;font-size:15px}
.qa-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.qa-nav .btn{min-height:48px;font-size:16px;padding:0 20px}
.qa-skipw{display:inline-flex;align-items:center;gap:4px}
.qa-skipw .help{position:relative}
@media (max-width:640px){.qa{padding:18px 16px}.qa-q{font-size:21px}.qa-nav .grow{display:none}.qa-nav .btn{flex:1 1 40%}.qa-skipw{flex:1 1 40%}.qa-skipw .btn{flex:1}}

/* 계획 4칸 */
.pc{max-width:980px;margin:0 auto 16px;padding:22px 24px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--brand) 40%,var(--line));background:var(--panel);box-shadow:var(--shadow)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pc-k{font-size:13.5px;font-weight:800;color:var(--brand);letter-spacing:.02em}
.pc-top h2{margin:2px 0 2px;font-size:24px;color:var(--text)}
.pc-top small{font-size:15px;color:var(--muted)}
.pc-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc-c{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);min-height:120px}
.pc-h{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.pc-h em{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--brand);font-size:14px}
.pc-h b{font-size:18px;color:var(--text)}
.pc-h .linkish{margin-left:auto;font-size:15px;min-height:36px}
.pc-h .help{position:relative}
.pc-b{font-size:16.5px;line-height:1.65;color:var(--text)}
.pc-b small{display:block;margin-top:4px;font-size:14.5px;color:var(--muted)}
.pc-b ol{margin:0;padding-left:22px;display:grid;gap:2px}
.pc-none{color:var(--muted);font-style:italic}
.pc-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pc-act .btn{min-height:50px;font-size:16px}
.pc-note{margin:10px 0 0;font-size:15px;color:var(--text-2)}
.pc-pre{white-space:pre-wrap;font-family:var(--sans);font-size:15px;line-height:1.6;margin:0}
@media (max-width:700px){.pc{padding:16px 14px}.pc-g{grid-template-columns:1fr}.pc-act .btn{flex:1 1 100%}}


/* ---- 첫 화면 아이디어 이어서 시작 */
.ob-idea-lead{margin:0 0 12px;color:var(--text-2)}
.ob-idea-ways{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ob-idea-ways span{font-size:13.5px;color:var(--muted)}

/* 도움말 센터 탭 줄을 본문 왼쪽 끝과 맞춘다 */
#view > .hc-wrap{max-width:none;margin:0;padding:22px 30px 0}
@media (max-width:900px){#view > .hc-wrap{padding:14px 14px 0}}

/* ---- 메가 메뉴 하위 항목: 더 깊은 단계가 없으므로 '›' 표시를 빼고, 눌러지는 곳임은 색으로 보인다 */
.tn-s ul a::after{content:none!important}
.tn-s ul a{color:var(--tn-brand,var(--brand))}

/* ---- 계정 메뉴 '개발 용어로 보기' 켜기/끄기 */
.menu .mode-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;background:none;color:inherit;font:inherit;font-size:14.5px;cursor:pointer;text-align:left}
.menu .mode-item span{flex:1}.menu .mode-item small{font-size:12.5px;color:var(--muted);min-width:28px}
.mode-tg{position:relative;width:34px;height:20px;border-radius:20px;background:color-mix(in srgb,var(--text) 18%,transparent);flex:none}
.mode-tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.mode-tg.on{background:var(--brand)}.mode-tg.on::after{left:16px}
/* ---- 휴대폰 서랍: 내 설정 · 로그아웃 */
.dn .dn-me .mode-item{width:calc(100% - 22px);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.dn .dn-out{display:block;width:calc(100% - 28px);margin:12px 14px 20px;min-height:44px;border-radius:var(--r-md,12px);border:1px solid var(--line-2);background:none;color:var(--text-2);font:700 14.5px var(--sans);cursor:pointer}
.side .wordmark small.dn-slogan{font-family:var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
/* ---- 시작 체크리스트 3단계 '이 단계 건너뛰기'(작은 글 링크) */
.sck-a .sck-skip{font-size:13.5px;font-weight:600;color:var(--muted);text-align:center;min-height:32px}

/* ============================================================ 요구사항 정의(/requirements) — AI 인터뷰 한 길 (2026-11-11 개편)
   한 화면 한 흐름: 아이디어 적기 → AI 앱 열기 → 다음에 일어나는 일 → 화면으로 미리 보기 → 예제 */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rq2{max-width:1080px;margin:0 auto;padding:52px 28px 110px}
.rq2-hero{text-align:center;margin:0 auto 34px;max-width:820px}
.rq2-k{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--brand);margin:0 0 14px}
.rq2-hero h1{margin:0;font-size:46px;line-height:1.2;font-weight:800;letter-spacing:-.04em;color:var(--text);word-break:keep-all}
.rq2-lead{margin:18px auto 0;max-width:660px;font-size:19px;line-height:1.7;color:var(--text-2);word-break:keep-all}
.rq2-flow{list-style:none;margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;position:relative}
.rq2-flow li{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 86%,transparent);position:relative}
.rq2-flow li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:1.5px;background:var(--line-2)}
.rq2-flow i,.rq2-steps i{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 13%,transparent)}
.rq2-flow i svg,.rq2-steps i svg{width:22px;height:22px}
.rq2-flow b{display:block;font-size:16.5px;color:var(--text)}
.rq2-flow small{display:block;font-size:14px;color:var(--muted);margin-top:1px}

.rq2-card{scroll-margin-top:84px;margin:0 0 18px;padding:34px 38px;border-radius:26px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);transition:box-shadow .3s}
.rq2-card.flash{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 55%,transparent)}
.rq2-sh{margin:0 0 20px}
.rq2-tag{display:inline-block;font-size:13.5px;font-weight:800;letter-spacing:.03em;color:var(--brand);margin:0 0 8px}
.rq2-sh h2{margin:0;font-size:27px;line-height:1.3;font-weight:800;letter-spacing:-.025em;color:var(--text);word-break:keep-all}
.rq2-sh p{margin:8px 0 0;font-size:17px;line-height:1.7;color:var(--text-2);max-width:760px;word-break:keep-all}
.rq2-field{display:block}
.rq2-field textarea{display:block;width:100%;min-height:96px;resize:vertical;padding:18px 20px;border-radius:18px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);
  font:inherit;font-size:20px;line-height:1.55;letter-spacing:-.015em;outline:none;transition:border-color .15s,box-shadow .15s}
.rq2-field textarea::placeholder{color:var(--muted)}
.rq2-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.rq2-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.rq2-ex>span{font-size:14.5px;font-weight:700;color:var(--muted);margin-right:4px}
.rq2-ex button,.rq2-chips button{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.rq2-ex button:hover,.rq2-chips button:hover{border-color:var(--brand)}
.rq2-ex button.ghost{background:none;border-style:dashed;color:var(--text-2)}
.rq2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rq2-chips button.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--panel));font-weight:800}
.rq2-opt{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.rq2-opt summary,.rq2-pre summary{cursor:pointer;min-height:46px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--text-2)}
.rq2-opt summary small,.rq2-pre summary small{font-size:14px;font-weight:500;color:var(--muted)}
.rq2-optb{display:grid;gap:16px;padding:6px 0 4px}
.rq2-optb b{font-size:15.5px;color:var(--text)}

.rq2-main{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rq2-ai{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:92px;padding:18px 24px;border-radius:20px;text-decoration:none!important;
  background:var(--text);color:var(--bg)!important;box-shadow:0 10px 30px -14px color-mix(in srgb,var(--text) 60%,transparent);transition:transform .15s,box-shadow .15s}
.rq2-ai:hover{transform:translateY(-1px);box-shadow:0 16px 36px -14px color-mix(in srgb,var(--text) 70%,transparent)}
.rq2-ai:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.rq2-ai-t b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.rq2-ai-t small{display:block;font-size:14px;opacity:.68;margin-top:2px}
.rq2-ai-i{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 14%,transparent)}
.rq2-rec{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--text-2)}
.rq2-rec i{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900;color:#fff;background:var(--ok);margin-top:1px}
.rq2-rec b{color:var(--text)}
.rq2-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.rq2-sub>span{font-size:14.5px;font-weight:700;color:var(--muted);margin-right:4px}
.rq2-ai2{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text)!important;
  font:inherit;font-size:15px;font-weight:700;text-decoration:none!important;cursor:pointer}
.rq2-ai2:hover{border-color:var(--brand)}
.rq2-ai2 svg{width:15px;height:15px;opacity:.7}
.rq2-sent{margin:16px 0 0;padding:14px 16px;border-radius:14px;font-size:16px;line-height:1.65;color:var(--text-2);background:color-mix(in srgb,var(--brand) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line))}
.rq2-sent b{color:var(--text)}
.rq2-pre{margin-top:12px}
.rq2-pre pre{margin:4px 0 0;max-height:340px;overflow:auto;white-space:pre-wrap;font-family:var(--sans,inherit);font-size:14.5px;line-height:1.65;padding:16px 18px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-2)}

.rq2-next{margin:44px 0 0}
.rq2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rq2-steps>div{padding:22px 22px 20px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.rq2-steps i{margin:0 0 14px}
.rq2-steps b{display:block;font-size:18.5px;line-height:1.4;letter-spacing:-.015em;color:var(--text);word-break:keep-all}
.rq2-steps p{margin:6px 0 0;font-size:16px;line-height:1.7;color:var(--text-2);word-break:keep-all}
.rq2-steps em{font-style:normal;font-weight:800;color:var(--brand)}
.rq2-link{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel));font-size:16px;line-height:1.7;color:var(--text-2)}
.rq2-link.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 7%,var(--panel))}
.rq2-link i{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--warn);margin-top:9px}
.rq2-link.ok i{background:var(--ok)}
.rq2-link b{color:var(--text)}
.rq2-link a{font-weight:800;white-space:nowrap}
.rq2-guide,.rq2-gal{margin:56px 0 0}

@media (max-width:760px){
  .rq2{padding:28px 16px 90px}
  .rq2-hero{margin-bottom:24px}
  .rq2-hero h1{font-size:31px;line-height:1.25}
  .rq2-lead{font-size:17px}
  .rq2-flow{grid-template-columns:1fr;gap:8px;margin-top:22px}
  .rq2-flow li{padding:12px 14px}
  .rq2-flow li:not(:last-child)::after{right:auto;left:36px;top:auto;bottom:-9px;width:1.5px;height:9px}
  .rq2-card{padding:24px 18px;border-radius:22px}
  .rq2-sh h2{font-size:23px}
  .rq2-sh p{font-size:16.5px}
  .rq2-field textarea{font-size:18px;padding:14px 16px}
  .rq2-main{grid-template-columns:1fr;gap:10px}
  .rq2-ai{min-height:80px;padding:14px 18px}
  .rq2-ai-t b{font-size:19.5px}
  .rq2-steps{grid-template-columns:1fr}
  .rq2-guide,.rq2-gal{margin-top:44px}
}

/* 따라 하며 만들기 · 도움말 센터에 넣은 슬라이드 */
.tu-slides{margin:18px 0 22px}
.tu-launch{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:0 0 18px;padding:18px 22px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.tu-launch b{display:block;font-size:18px;color:var(--text)}
.tu-launch small{display:block;margin-top:4px;color:var(--text-2)}
.gd2-slides{margin:0 0 22px}
.gd2-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.gd2-callout{margin-top:16px;padding:18px 20px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--brand) 40%,var(--line));background:color-mix(in srgb,var(--brand) 6%,var(--panel))}
.gd2-callout b{font-size:18px;color:var(--text)}
.gd2-callout p{margin:6px 0 12px;color:var(--text-2)}
.gd2-callout .au-cta{margin:0}
@media (max-width:760px){.gd2-three{grid-template-columns:1fr}.tu-launch .btn{width:100%;justify-content:center}}
.rq2-chipw{display:inline-flex;align-items:center;gap:4px}
/* 종류 칩의 ? 풍선: 칩 묶음 폭에 맞춰 위쪽에 펼쳐 화면 밖으로 넘치지 않게 한다 */
.rq2-chips{position:relative}
.rq2-chipw .help{position:static}
.rq2-chipw .help::after{left:0;right:0;width:auto;max-width:none;transform:translateY(4px)}
.rq2-chipw .help:hover::after,.rq2-chipw .help:focus::after{transform:translateY(0)}
.rq2-opt summary{flex-wrap:wrap;row-gap:0}
.rq2-opt summary>small{flex:1 1 200px}
/* 도움말 센터 탭이 일곱 개가 되어 넓은 화면에서 한 줄에 모두 놓는다 */
@media (min-width:901px){.hc-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* 2026-11-11 QA: 전체 흐름은 번호 대신 이어진 점으로(번호 붙이기 지양) */
.sg-flow i{width:12px;height:12px;justify-self:center;border:0;background:var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent)}
/* SYNAPSE 소개의 단계 카드 — "01 · 02" 번호 대신 작은 점 */
.ab-flow li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}

/* ---------------- AI 협업 시연 재생(demo.js) — 대화방 모양은 studio.css .room · .rm-* 를 그대로 쓴다 */
.syn-demo.room{height:470px;min-height:0;max-width:760px}
.syn-demo .rm-scroll{scroll-behavior:smooth}
.dm-tag{font:700 11.5px var(--sans);color:var(--muted);padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.dm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--line);flex:none}
.dm-st{font-size:13px;line-height:1.4;color:var(--muted);min-width:0}
.dm-re{flex:none;white-space:nowrap;border:1px solid var(--line-2);background:none;color:var(--text-2);font:600 12.5px var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer}
.dm-re:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.dm-end span{font-weight:700;color:var(--gold);padding:4px 12px;border-radius:999px;background:var(--gold-soft)}
.dm-typing .rm-b{display:inline-flex;gap:4px;padding:12px 14px}
.dm-typing .rm-b i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dm-dot 1.1s infinite ease-in-out}
.dm-typing .rm-b i:nth-child(2){animation-delay:.15s}.dm-typing .rm-b i:nth-child(3){animation-delay:.3s}
.syn-demo .rm-m:not(.dm-typing),.syn-demo .rm-sys{animation:dm-in .28s ease-out}
@keyframes dm-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes dm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.syn-demo .rm-m,.syn-demo .rm-sys,.dm-typing .rm-b i{animation:none}.syn-demo .rm-scroll{scroll-behavior:auto}}
@media (max-width:560px){.syn-demo.room{height:440px}.syn-demo .rm-b{max-width:86%}}
.tu-demo{margin:0 0 28px;display:grid;gap:10px}.tu-demo>p{margin:0;font-size:14.5px;color:var(--muted)}