/* /lp/ai_bootcamp_01 시안 — 바이브워킹 랜딩 시안(3안)의 값을 그대로 쓴다.
   H1 80/900/자간 -2.4 · H2 40/800/줄 55 · H3 28/700 · 본문 16/24
   바탕 #FAF8F5 · 잉크 #374151 · 남색 #1A2A4A · 파랑 #477FE9
   섹션 위아래 160(어두운 곳 128) · 안쪽폭 1080(본문 격자만 1264) */

:root{
  --ground:#FFFFFF;
  --white:#FFFFFF;
  --ink:#0F172A;
  --ink-soft:#6A6F7B;
  --navy:#0F1720;
  --accent:#477FE9;
  --accent-soft:#EAF1FD;
  --line:#E4E4E4;
  --line-2:#D2D2D2;
  --on-navy:#FFFFFF;
  --on-navy-soft:rgba(255,255,255,.64);
  --on-navy-key:#5EE6C1;
  --head:76px;
}
/* 밝은 화면이 기본이다 — 휴대폰·PC 가 다크 설정이어도 따르지 않는다(2026-09-16).
   어두운 색은 data-theme="dark" 를 직접 고른 때만. prefers-color-scheme 블록을 다시 넣지 말 것 */
:root[data-theme="dark"]{
  --ground:#0A0A0A; --white:#151515; --ink:#FAFAFA; --ink-soft:#A1A1AA;
  --navy:#FAFAFA; --accent:#7BA5F2; --accent-soft:#1B2537;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  --on-navy:#0A0A0A; --on-navy-soft:rgba(10,10,10,.62); --on-navy-key:#1B7F66;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 16px); }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word; overflow-x:clip;
}
button,input,select,textarea{ font-family:inherit; }
img,video{ display:block; max-width:100%; }
h1,h2,h3,p,ul,ol{ margin:0; } ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
::selection{ color:#fff; background:var(--accent); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.skip-link{ position:fixed; top:-80px; left:16px; z-index:100; padding:12px 18px; border-radius:10px;
  color:#fff; background:var(--navy); text-decoration:none; transition:top .2s ease; }
.skip-link:focus{ top:12px; }

/* 히어로·본문·신청이 모두 같은 왼쪽 선에서 시작하도록 폭을 하나로 쓴다 */
.wrap{ width:100%; max-width:1340px; margin-inline:auto; padding-inline:48px; }
.wrap-wide{ width:100%; max-width:1340px; margin-inline:auto; padding-inline:48px; }
@media (max-width:720px){ .wrap,.wrap-wide{ padding-inline:20px; } }

section{ padding:160px 0; }
section.dark{ padding:128px 0; background:var(--navy); color:var(--on-navy); }
section.plain{ background:var(--white); }
@media (max-width:860px){ section{ padding:96px 0; } section.dark{ padding:80px 0; } }

h1{ font-size:80px; font-weight:900; line-height:84px; letter-spacing:-2.4px; color:var(--navy); text-wrap:balance; }
h2{ font-size:40px; font-weight:800; line-height:55px; letter-spacing:-0.8px; color:var(--navy); text-wrap:balance; }
h3{ font-size:28px; font-weight:700; line-height:38.5px; letter-spacing:-0.28px; color:var(--navy); }
section.dark h2, section.dark h3{ color:var(--on-navy); }
@media (max-width:860px){
  h1{ font-size:46px; line-height:52px; letter-spacing:-1.4px; }
  h2{ font-size:28px; line-height:38px; letter-spacing:-0.5px; }
  h3{ font-size:21px; line-height:30px; }
}
.eyebrow{ font-size:14px; font-weight:600; color:var(--accent); letter-spacing:.02em; }
.lede{ font-size:16px; line-height:28px; color:var(--ink); max-width:34em; }
section.dark .lede{ color:var(--on-navy-soft); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:16px; font-weight:600; line-height:1; padding:19px 30px; border-radius:12px;
  border:0; cursor:pointer; text-decoration:none; background:var(--accent); color:#fff; }
.btn:hover{ filter:brightness(1.06); }
.btn.sm{ font-size:14px; padding:8px 16px; }
.btn.block{ width:100%; }
.btn.on-navy{ background:#fff; color:var(--navy); }

/* HEAD:START */
/* 상단 바 구간 — 여기부터 HEAD:END 까지는 컨설팅 페이지(빌더 없음)에도 build.py 가
   그대로 옮겨 심는다. 표시를 지우거나 이 구간 밖으로 상단 바 규칙을 빼지 말 것 */
/* ── 머리띠 ── */
header.top{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header.top .wrap-wide{ display:flex; align-items:center; gap:24px; height:var(--head); }
.logo{ display:inline-flex; align-items:center; gap:8px; font-size:16.5px; font-weight:600;
  color:var(--navy); letter-spacing:-.03em; text-decoration:none; }
.logo img{ height:20px; width:auto; flex:0 0 auto; user-select:none; }
footer .logo img{ opacity:.7; }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.plan-switch{ display:flex; gap:6px; }
.plan-switch a{ font-size:13px; font-weight:600; text-decoration:none; padding:8px 14px;
  border-radius:20px; color:var(--ink-soft); background:var(--white);
  border:1px solid var(--line); white-space:nowrap; }
.plan-switch a.on{ color:#fff; background:var(--navy); border-color:var(--navy); }
@media (max-width:640px){ .plan-switch a{ padding:7px 10px; font-size:12px; } .top-right .btn{ display:none; } }
/* [강의실] — 수강 중인 강의가 있는 사람에게만 nav.js 가 켠다(/api/learner). 그 전엔 hidden.
   좁은 화면에서도 남긴다 — 수강생이 강의실로 갈 길이 여기 하나뿐이다 */
@media (max-width:640px){ .top-right .btn#classroom{ display:inline-flex; padding:7px 12px; font-size:13px; } }
@media (max-width:380px){ .top-right .btn#classroom{ padding:7px 10px; font-size:12px; } }
/* 상단 바 [로그인] — 비회원에게 보이고, 로그인하면 nav.js 가 숨긴다(2026-09-18) */
.top-right .btn.ghost{ background:none; color:var(--ink-soft); border:1px solid var(--line); }
.top-right .btn.ghost:hover{ color:var(--ink); border-color:var(--line-2); }
@media (max-width:640px){ .top-right .btn#login-link{ display:inline-flex; padding:7px 12px; font-size:13px; } }
@media (max-width:380px){ .top-right .btn#login-link{ padding:7px 10px; font-size:12px; } }


/* ── 상단 메뉴 (app/lib/site-nav.json 이 문구의 단일 진실) ──
   넓은 화면(861px~): 묶음 제목(드롭다운) 없이 칸을 한 줄로 펼쳐 오른쪽 버튼 앞에 둔다.
   지금 보고 있는 화면의 칸(aria-current)만 굵고 진하게 — 2026-09-18 사용자 결정, 홈 화면
   (app/components/site-header.tsx)과 같은 모양. 좁은 화면은 아래 서랍 그대로다. */
.mainnav{ display:block; min-width:0; }
.mainnav .navbar{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.mainnav .navtop{ display:block; }
.mainnav .navsub{ list-style:none; margin:0; padding:0; }
@media (min-width:861px){
  .mainnav{ margin-left:auto; }
  header.top .mainnav ~ .top-right{ margin-left:0; }
  .mainnav .navtop{ display:none; }
  .mainnav .navsub{ display:flex; align-items:center; gap:2px; }
  .mainnav .navsub a{ display:block; padding:8px 10px; border-radius:10px; text-decoration:none;
    font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
  .mainnav .navsub a:hover{ color:var(--ink); background:var(--accent-soft); }
  .mainnav .navsub a[aria-current="page"]{ color:var(--ink); font-weight:700; }
}
/* 861~1023px 은 칸 사이를 조금 좁힌다 — [강의실] 이 켜지거나 관리자가 칸을 더 켜도 한 줄에 들게 */
@media (min-width:861px) and (max-width:1023px){
  header.top .wrap-wide{ gap:16px; }
  .mainnav .navsub a{ padding:8px 7px; font-size:13.5px; }
  .top-right{ gap:8px; }
  .top-right .btn{ white-space:nowrap; }
}

/* 햄버거 — 좁은 화면에서만 나온다 */
.navtoggle{ display:none; margin-left:auto; width:40px; height:40px; padding:0; background:none;
  border:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.navtoggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .18s, opacity .18s; }
.navtoggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* 서랍 머리줄·안내·가림막은 좁은 화면에서만 쓴다 */
.navhead, .navnote, .navscrim{ display:none; }

@media (max-width:860px){
  /* 머리띠의 흐림 효과는 좁은 화면에서 끈다 — backdrop-filter 가 걸려 있으면
     그 안의 서랍·가림막이 머리띠 높이에 갇혀 화면 전체를 덮지 못한다.
     대신 바탕을 불투명하게 해 본문이 비치지 않게 한다. */
  header.top{ backdrop-filter:none; background:var(--ground); }

  /* 햄버거는 맨 오른쪽 — 홈 화면(app/components/site-header.tsx)과 같은 자리.
     DOM 순서를 바꾸지 않고 order 로만 옮긴다(스크린리더 순서는 그대로 둔다). */
  .navtoggle{ display:flex; order:3; margin-left:0; margin-right:-8px; }
  header.top .top-right{ order:2; }

  /* 가림막 — 헤더까지 덮어야 하므로 서랍보다 한 단 아래에 깐다 */
  .navscrim{ display:block; position:fixed; inset:0; z-index:60;
    background:color-mix(in srgb,var(--ink) 40%,transparent); }
  .navscrim[hidden]{ display:none; }

  /* 오른쪽에서 나오는 서랍 */
  .mainnav{ position:fixed; top:0; right:0; bottom:0; left:auto; z-index:70;
    width:280px; max-width:85vw; padding:14px 20px 24px; overflow-y:auto;
    background:var(--white); border-left:1px solid var(--line); }
  .mainnav[hidden]{ display:none; }

  .navhead{ display:flex; align-items:center; justify-content:space-between; }
  .navhead > span{ font-size:15px; font-weight:600; color:var(--ink); }
  .navclose{ width:36px; height:36px; margin-right:-8px; padding:0; background:none; border:0;
    cursor:pointer; font:inherit; font-size:17px; line-height:1; color:var(--ink); }

  /* 서랍 맨 위 안내 세 줄 — 문구는 site-nav.json 의 notice. 강의 목록 「강의 안내」 칸과 같은 꼬리표 */
  .navnote{ display:block; margin:14px 0 0; padding:12px; list-style:none; border-radius:12px;
    background:color-mix(in srgb,var(--ink) 5%,var(--white)); }
  .navnote li{ display:flex; align-items:flex-start; gap:8px; }
  .navnote li + li{ margin-top:8px; }
  .navnote .lab{ flex:0 0 auto; padding:1px 6px; border-radius:5px; font-size:12px; font-weight:800;
    line-height:20px; background:#FFD24D; color:#141414; }
  .navnote [data-kind="paid"] .lab{ background:var(--accent); color:#fff; }
  .navnote [data-kind="free"] .lab{ background:var(--navy); color:var(--on-navy); }
  .navnote .tx{ min-width:0; font-size:13px; line-height:22px; color:var(--ink); }

  .mainnav .navbar{ flex-direction:column; align-items:stretch; gap:0; margin-top:22px; }
  /* 항목이 셋뿐이라 접지 않고 묶음 제목 아래 그대로 편다 — 홈 화면과 같다 */
  .mainnav .navtop{ font-size:13px; font-weight:400; color:var(--ink-soft); }
  .mainnav .navsub{ display:block; margin:8px 0 0; }
  .mainnav .navsub a{ display:block; padding:10px 0; font-size:16px; color:var(--ink);
    text-decoration:none; white-space:normal; }
}

/* ── 내 계정 — 로그인한 사람에게만 nav.js 가 만든다(2026-09-21 사용자 결정) ──
   넓은 화면(861px~): [로그인] 자리의 「내 계정」 버튼 + 누르면 열리는 작은 창(2안)
   좁은 화면(~860px): 상단 바는 그대로, 메뉴 서랍 맨 아래에 「오픈채팅방 입장」 · 내 자료실 · 로그아웃(3안) */
.acct{ position:relative; }
.acct-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 5px;
  border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink);
  font:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; }
.acct-btn:hover{ border-color:var(--line-2); }
.acct-av{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); }
.acct-cv{ display:inline-flex; color:var(--ink-soft); transition:transform .15s; }
.acct-btn[aria-expanded="true"] .acct-cv{ transform:rotate(180deg); }
.acct-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:240px; padding:8px;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 12%,transparent); }
.acct-menu[hidden]{ display:none; }
.acct-who{ margin:0 0 6px; padding:8px 10px 10px; border-bottom:1px solid var(--line); }
.acct-who small{ display:block; font-size:12px; color:var(--ink-soft); }
.acct-who b{ display:block; margin-top:2px; font-size:15px; color:var(--ink); }
.acct-menu form{ margin:0; }
.acct-menu a, .acct-menu button{ display:block; width:100%; padding:10px; border:0; border-radius:9px;
  background:none; font:inherit; font-size:15px; text-align:left; color:var(--ink); text-decoration:none; cursor:pointer; }
.acct-menu a:hover, .acct-menu button:hover{ background:var(--accent-soft); }
.acct-menu .acct-out{ color:var(--ink-soft); }
.navacct{ display:none; }
@media (max-width:860px){
  .acct{ display:none; }
  .navacct{ display:block; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
  .navacct .navacct-chat{ padding:14px 16px; font-size:15px; border-radius:10px; }
  .navacct-row{ display:flex; gap:8px; margin-top:10px; }
  .navacct-row form{ flex:1; display:flex; margin:0; }
  .navacct-row a, .navacct-row button{ flex:1; display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--white);
    font:inherit; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; }
  .navacct-row button{ color:var(--ink-soft); }
}

/* HEAD:END */

/* ── 히어로 — 왼쪽 글·프로필, 오른쪽 네 가지, 아래 한 줄로 마무리 ── */
section.hero{ background:none; padding:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; }

.hero .crumb{ margin:0; font-size:13px; color:var(--ink-soft); }
.hero .crumb em{ font-style:normal; color:var(--line-2); }
.hero h1{ margin:0; font-size:29px; font-weight:800; line-height:1.44;
  letter-spacing:-.9px; color:var(--navy); }
.hero h1 .t1{ display:block; }
/* 이름 아래 두 단 — 굵은 윗줄은 무엇이 들었는지, 작은 아랫줄은 그 근거 */
.hero .hsub{ display:flex; align-items:center; gap:11px; margin-top:-6px; }
.hero .hsub i{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:22px; font-weight:700; line-height:1; color:var(--ground); background:var(--navy); }
.hero .hsub p{ margin:0; min-width:0; }
.hero .hsub b{ display:block; font-size:18px; font-weight:800; line-height:1.35;
  letter-spacing:-.4px; color:var(--navy); text-wrap:balance; }
.hero .hsub span{ display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--ink-soft); }
/* 모바일 맨 위 배너 — 넓은 화면에서는 안 쓴다. 글자는 그림 안에 들어 있다 */
.hero .mbanner{ display:none; }
@media (max-width:860px){
  .hero .mbanner{ display:block; position:relative; width:100vw;
    margin-left:calc(50% - 50vw); aspect-ratio:10/7; overflow:hidden; background:#0B0D12; }
  .hero .mbanner img{ width:100%; height:100%; object-fit:cover; display:block; }
}

/* 강사 카드 — 사진 · 이름 · 이력 세 줄.
   히어로가 align-items:flex-start 라 폭이 내용에 맞춰 줄어든다. 아래 강의 설명 상자와
   왼쪽·오른쪽 선이 어긋나 혼자 떠 보이므로 칸 전체로 늘린다. */
.hero .meta, .side .meta{ display:flex; align-items:center; gap:12px; align-self:stretch;
  border:1px solid var(--line); border-radius:14px; padding:13px 15px; }
.hero .meta img, .side .meta img{ flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  object-fit:cover; border:1px solid var(--line); }
.hero .meta .tx, .side .meta .tx{ min-width:0; }
.hero .meta b, .side .meta b{ display:flex; align-items:baseline; gap:7px;
  font-size:14.5px; font-weight:800; color:var(--navy); }
.hero .meta .ro, .side .meta .ro{ font-style:normal; font-size:11px; font-weight:700; color:var(--ink-soft); }
.hero .meta .cred, .side .meta .cred{ margin:7px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:3px; }
.hero .meta .cred li, .side .meta .cred li{ position:relative; padding-left:9px;
  font-size:12.5px; line-height:19px; color:var(--ink-soft); }
.hero .meta .cred li::before, .side .meta .cred li::before{ content:""; position:absolute;
  left:0; top:8px; width:3px; height:3px; border-radius:50%; background:var(--line-2); }
.hero .meta .bd, .side .meta .bd{ font-style:normal; display:inline-block; margin-left:6px; padding:2px 7px;
  border-radius:5px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800;
  vertical-align:1.5px; }
.hero .meta .num, .side .meta .num{ display:block; margin-top:3px; font-size:12.5px; line-height:19px;
  color:var(--ink-soft); }
.hero .meta .num em, .side .meta .num em{ font-style:normal; font-weight:800; color:var(--navy); }
@media (max-width:860px){
  .hero .meta{ padding:14px; gap:12px; align-items:flex-start; }
  .hero .meta img{ width:44px; height:44px; }
  .hero .meta .cred li{ font-size:12px; line-height:18px; }
}

/* 설명 상자 둘 — 「강의 설명」과 「강의 정보」 */
.hero .ibox{ width:100%; border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  display:flex; flex-direction:column; gap:12px; }
.hero .ibox.tint{ border:0; background:var(--sunk); }
.hero .ibox h2{ font-size:14px; font-weight:800; line-height:1.4; letter-spacing:0; color:var(--navy); }
.hero .imeta{ margin:0; font-size:13px; font-weight:700; color:var(--navy); }
.hero .imeta i{ font-style:normal; font-weight:400; color:var(--line-2); padding:0 3px; }
.hero .desc{ margin:0; max-width:62ch; font-size:14.5px; line-height:25px; color:var(--ink-soft); }

.hero .course2{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.hero .course2 li{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:baseline; }
.hero .course2 b{ font-size:12.5px; font-weight:800; color:var(--accent); }
.hero .course2 span{ font-size:14px; line-height:22px; color:var(--ink); }

.hero .facts{ display:flex; flex-wrap:wrap; gap:6px; }
.hero .facts span{ padding:6px 11px; border-radius:8px; background:var(--white);
  border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--ink-soft); }
.hero .feat{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.hero .feat li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px;
  font-size:13.5px; line-height:21px; color:var(--ink); }
.hero .feat i{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--accent); line-height:21px; }
.hero .feat .opt{ color:var(--ink-soft); }
.hero .feat .opt i{ color:var(--line-2); }

.hero .tags{ margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.hero .tags span{ padding:6px 11px; border-radius:6px; background:var(--accent-soft);
  color:var(--accent); font-size:12.5px; font-weight:700; }

@media (max-width:860px){
  section.hero{ gap:15px; }
  /* 좁은 화면에서도 이름은 무조건 한 줄 — 폭에 맞춰 크기가 줄어든다 */
  .hero h1{ --ts:min(26px, calc((100vw - 46px) / 15.2));
    font-size:var(--ts); line-height:1.4; letter-spacing:-.6px; }
  .hero h1 .t1{ white-space:nowrap; }
  .hero .hsub{ gap:10px; }
  .hero .hsub i{ width:34px; height:34px; font-size:20px; }
  .hero .hsub b{ font-size:16px; }
  .hero .hsub span{ font-size:13px; }
  /* 좁은 화면 — 이름 한 줄, 이력 넷을 두 칸으로 */
  .hero .desc{ font-size:14.5px; line-height:26px; }
  .hero .ibox{ padding:16px 17px; gap:11px; }
  .hero .desc{ font-size:14px; line-height:23px; }
  .hero .course2 li{ grid-template-columns:1fr; gap:3px; }
  .hero .course2 span{ font-size:13.5px; line-height:21px; }
  .hero .feat li{ font-size:13px; line-height:20px; }
}

/* ── 첫 화면부터 끝까지 두 칸 — 오른쪽 옵션이 계속 따라온다 ── */
.page{ padding:44px 0 130px; }
.page-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:start; }
@media (min-width:1040px){ .page-grid{ grid-template-columns:minmax(0,1fr) 360px; gap:48px; } }
.col{ display:flex; flex-direction:column; gap:72px; min-width:0; }
.col > section{ padding:0; background:none; }
@media (max-width:860px){ .page{ padding:28px 0 90px; } .col{ gap:52px; } }

/* 상세부터는 바탕이 한 톤 내려앉는다 — 다른 구역임이 보이게 */
/* 상세 구역 바탕 — 흰 바탕에서 한 톤 내려앉는다 */
:root{ --sunk:#FAFAFA; }
:root[data-theme="dark"]{ --sunk:#111111; }

.col > .sunk{ position:relative; display:flex; flex-direction:column; gap:72px;
  padding-top:60px; margin-top:8px; }
/* 왼쪽 칸 안에 있어도 바탕은 화면 끝에서 끝까지 —
   왼쪽 칸이 화면 왼쪽 끝에서 얼마나 떨어져 있는지 되짚어 뺀다 */
.col > .sunk::before{ content:""; position:absolute; z-index:-1; top:0; bottom:-130px;
  left:calc(-1 * (max((100vw - 1340px) / 2, 0px) + 48px)); width:100vw;
  background:var(--sunk); box-shadow:inset 0 14px 24px -18px rgba(20,28,48,.55); }
@media (max-width:720px){
  .col > .sunk::before{ left:calc(-1 * (max((100vw - 1340px) / 2, 0px) + 20px)); }
}
@media (max-width:860px){ .col > .sunk{ padding-top:44px; gap:52px; } }

/* 와디즈 상세 — 여러 장이 끊김 없이 이어진다 */
.stack{ display:flex; flex-direction:column; gap:64px; }
.story-run{ font-size:0; border-radius:20px; overflow:hidden; background:var(--white);
  border:1px solid var(--line); }
.story-run img,.story-run video{ width:100%; height:auto; }
.story-note{ margin-top:24px; font-size:13.5px; line-height:22px; color:var(--ink-soft); }

/* ── 와디즈 상세 본문 — 글·이미지·영상을 원본 순서 그대로 ── */
.story-body{ background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:44px 34px; color:var(--ink); }
@media (max-width:720px){ .story-body{ padding:32px 20px; border-radius:16px; } }
.story-body img,.story-body video{ display:block; max-width:100%; height:auto; margin:5px auto; border-radius:6px; }
/* 상세 그림은 칸 폭의 70% — PC 에서 한눈에 들어오게 */
.story-body p img,.story-body p video{ max-width:70%; }
@media (max-width:860px){
  /* 모바일은 폭이 좁으니 그림이 칸을 다 쓴다 */
  .story-body p img,.story-body p video{ max-width:100%; }
}
.story-body p{ margin:0; font-size:16px; line-height:28px; }
.story-body h2{ font-size:28px; line-height:40px; letter-spacing:-.6px; }
.story-body h3{ font-size:24px; line-height:34px; margin:44px 0 14px; }
.story-body h4{ font-size:19px; line-height:31px; font-weight:700; color:var(--navy); }
.story-body strong{ font-weight:700; color:var(--navy); }
.story-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; word-break:break-all; }
.story-body mark, .story-body mark.color-mint{ background:var(--accent-soft); color:var(--navy); padding:0 4px; border-radius:4px; }
.story-body blockquote{ margin:0 0 20px; padding:24px 28px; background:var(--ground);
  border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; }
.story-body blockquote h2{ margin:0; font-size:24px; line-height:35px; }
.story-body hr{ margin:56px 0; border:0; border-top:1px solid var(--line); }
@media (max-width:720px){
  .story-body h2{ font-size:21px; line-height:31px; }
  .story-body blockquote h2{ font-size:19px; line-height:29px; }
  .story-body h3{ font-size:20px; line-height:29px; }
  .story-body h4{ font-size:17px; line-height:27px; }
}

/* 토막 사이 우리 글 */
.bridge{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:48px 44px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.bridge .lab{ font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--accent); }
.bridge h3{ margin:0; }
.bridge p{ font-size:16px; line-height:28px; color:var(--ink); max-width:36em; }
.bridge .go{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px; }
.bridge .go .small{ font-size:13.5px; color:var(--ink-soft); }
.bridge.dark{ background:var(--navy); border-color:var(--navy); }
.bridge.dark h3{ color:var(--on-navy); }
.bridge.dark p{ color:var(--on-navy-soft); }
.bridge.dark .lab{ color:#fff; }
.bridge.dark .go .small{ color:var(--on-navy-soft); }
@media (max-width:720px){ .bridge{ padding:32px 24px; } .stack{ gap:40px; } }

/* ── 옵션 고르는 칸 — 카드 3개 + 고른 것 요약 ── */
/* 칸 안에 스크롤을 두지 않는다. 예전에는 화면 높이로 잘라 안쪽 스크롤을 만들었는데,
   화면이 조금만 낮아도 신청 단추가 잘려 스크롤을 한 번 더 내려야 보였다.
   칸이 화면보다 길면 칸째로 본문과 함께 흐르다가 아래 끝에서 멈춘다(vibe.js 의 --side-top). */
.rewards{ position:sticky; top:calc(var(--head) + 16px); display:flex; flex-direction:column; gap:0;
  background:var(--white); border:1px solid var(--line); border-radius:22px;
  padding:16px 16px 18px;
  box-shadow:0 2px 6px -3px rgba(20,28,48,.10), 0 12px 28px -18px rgba(20,28,48,.22);
  transition:box-shadow .25s ease, transform .25s ease; }
/* 따라오기 시작하면 한 겹 더 떠오른다 */
.rewards.is-stuck{ transform:translateY(-2px);
  box-shadow:0 4px 10px -4px rgba(20,28,48,.14), 0 22px 48px -22px rgba(20,28,48,.38); }
@media (prefers-reduced-motion:reduce){ .rewards{ transition:none; } }
.rewards > *{ flex:0 0 auto; }   /* 세로로 눌려서 잘리지 않게 */
@media (max-width:1039px){
  .rewards{ position:static; margin:6px 0 10px; }
}
.rewards .hd{ padding:2px 2px 12px; }
.rewards .hd h2{ font-size:12.5px; line-height:1.2; font-weight:600;
  letter-spacing:.14em; color:var(--ink-soft); }
.rewards .btn.block{ font-size:16px; }
.rewards .hd p{ font-size:12px; line-height:18px; color:var(--ink-soft); }

/* ── 옵션 목록 — 세 과정을 줄로 세운다 (2026-09-14 시안 05) ──────────────
   예전에는 탭 세 칸 + 고른 과정의 가격 표(권장 소비자 가격·할인 금액·판매가)였다.
   가격을 비교하려면 탭을 번갈아 눌러야 했고, 표가 칸 높이를 잡아먹었다.
   이제 줄마다 할인율·판매가·월 할부 금액이 다 있어 누르지 않고도 셋이 비교된다.

   시각 규칙
   ① 크기는 네 단계만 — 30 / 15 / 13.5 / 12
   ② 가장 큰 글자(30·700)는 **고른 줄의 월 할부 금액 한 곳**에만.
      안 고른 줄의 월 금액은 15·600 으로 내려간다
   ③ 왼쪽은 언제나 이름(과정·할인), 오른쪽은 언제나 값(월 금액)
   ④ 세일색은 토큰 하나(--sale) — 고른 줄의 할인 글자에만 쓴다 */
.rewards{ --sale:#D6353B; }
:root[data-theme="dark"] .rewards{ --sale:#F08098; }

.pick{ display:flex; flex-direction:column; gap:8px; }
.pick .pk{ position:relative; display:block; cursor:pointer; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
/* 모서리는 두 값만 쓴다 — 칸·단추 12px, 동그란 아이콘 50%, 배지 999px */
.pick .in{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px; background:var(--white); border:1px solid var(--line); }
.pick .pk:hover .in{ border-color:var(--line-2); }
.pick .nm{ display:flex; flex-direction:column; min-width:0; }
.pick .nm b{ font-size:14px; line-height:21px; font-weight:600; color:var(--navy); }
.pick .nm .sub{ font-size:12px; line-height:18px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.pick .pm{ font-size:13.5px; font-weight:600; color:var(--navy); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.pick .pm b{ margin:0 2px; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--navy); }
/* 고른 줄 — 테두리를 두 겹으로, 월 금액을 이 화면에서 가장 크게 */
.pick input:checked + .in{ padding-block:14px; border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.pick input:checked + .in .pm b{ font-size:30px; font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.pick input:checked + .in .sub{ color:var(--sale); font-weight:600; }
.pick input:focus-visible + .in{ outline:3px solid var(--accent); outline-offset:2px; }
/* 좁은 폰 — 「16% 할인 · 3,580,000원」이 두 줄로 갈라지지 않게 한 줄로 묶고, 고른 금액을 한 단계 줄인다.
   그래도 폭이 모자라면(360px 폰) 월 금액이 다음 줄 오른쪽으로 내려간다. */
.pick .in{ flex-wrap:wrap; }
.pick .nm .sub{ white-space:nowrap; }
.pick .pm{ margin-left:auto; }
@media (max-width:420px){
  .pick input:checked + .in .pm b{ font-size:26px; }
}
.rewards .pnote{ margin:6px 2px 0; text-align:right; font-size:12px; line-height:18px; color:var(--ink-soft); }

/* 가격 단계 안내(2026-10-07) — 세 단계를 글로만 적는다. 지금 단계만 판매가 색으로 짚는다.
   모서리 12px · 선 var(--line) 는 옵션 칸과 같은 값. 금액은 만 원 단위라 390px 에서도 한 줄이다. */
.tiers{ margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--sunk); }
.tiers .th{ margin:0 0 8px; font-size:13px; line-height:19px; font-weight:600; color:var(--navy); }
.tiers ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.tiers li{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; font-size:12px; line-height:18px;
  color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.tiers .tn{ font-weight:600; color:var(--navy); }
.tiers .tn em{ margin-left:5px; padding:1px 6px; border-radius:999px; background:var(--sale); color:#fff;
  font-size:11px; font-style:normal; font-weight:600; }
.tiers .tp{ flex-basis:100%; white-space:nowrap; }
.tiers .now .tp{ color:var(--sale); font-weight:600; }
/* 가격 단계(price-tier.js): 지난 단계는 흐리게, 서버 가격 확인 전에는 월 금액을 비우고, 판매 중이 아닌 과정은 고를 수 없게 */
.tiers li.past{ opacity:.45; }
.pick .pk.unpriced .pm{ visibility:hidden; }
.pick .pk.unavailable{ cursor:not-allowed; }
.pick .pk.unavailable .in{ opacity:.45; }

/* 커리큘럼 보기 — 눈에 걸리는 큰 단추 */
.curbtn{ margin-top:16px; width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:0; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--accent); color:#fff; }
.curbtn:hover{ filter:brightness(1.06); }
.curbtn .ic{ flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:16px; }
.curbtn .tx{ flex:1 1 auto; min-width:0; }
.curbtn .tx b{ display:block; font-size:15px; font-weight:600; }
.curbtn .tx span{ display:block; margin-top:2px; font-size:12px; color:rgba(255,255,255,.8); }
.curbtn .go{ flex:0 0 auto; font-size:16px; }

/* ── 커리큘럼 미리보기 ────────────────────────────────────────────────
   예전에는 탭을 누르는 순간 커리큘럼이 화면을 통째로 덮었다. 이 자리가 그 역할을 대신한다.
   과정 제목만 보여준다 — 주차별 내용까지 넣었더니 칸이 길어져 신청 단추가 화면 밖으로 밀렸다.
   칸 전체가 단추라 어디를 눌러도 전체 커리큘럼이 열린다.
   앞에서 정한 규칙을 그대로 따른다: 크기 13.5/12, 굵기는 600 까지, 모서리 12px. */
.cprev{ margin-top:14px; }
.cprev[hidden]{ display:none !important; }
.cp-open{ display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--white); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.cp-open:hover{ border-color:var(--accent); }
.cp-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cp-tag{ padding:3px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-size:12px; line-height:16px; font-weight:600; }
.cp-go{ font-size:12px; line-height:16px; font-weight:600; color:var(--accent); white-space:nowrap; }
.cp-ttl{ display:block; font-size:13.5px; line-height:20px; font-weight:600; color:var(--navy); }

/* 추가 옵션 — 더할 수 있는 칸.
   점선은 이 화면에서 여기 하나뿐이라 규칙이 아니라 예외로 보였다. 실선으로 통일하고,
   고른 상태는 테두리 색과 바탕으로만 말한다. 모서리는 12px(칸) 한 값으로 맞춘다. */
.addon{ position:relative; display:flex; align-items:center; gap:12px;
  margin-top:10px; padding:11px 14px; border:1px solid var(--line-2);
  border-radius:12px; cursor:pointer; }
.addon:hover{ border-color:var(--accent); }
.addon input{ position:absolute; opacity:0; width:0; height:0; }
.addon .ic{ flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-size:15px; font-weight:600; display:grid; place-items:center; }
.addon .tx{ min-width:0; }
.addon .tx b{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); }
.addon .tx span{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.addon input:checked ~ .ic{ background:var(--accent); color:#fff; }
.addon:has(input:checked){ border-style:solid; border-color:var(--accent);
  background:var(--accent-soft); }
.addon:has(input:checked) .tx b::after{ content:" · 담김"; color:var(--accent); }
.addon input:focus-visible ~ .ic{ outline:3px solid var(--accent); outline-offset:2px; }

/* 강의 없이 컨설팅만(2026-10-06) — 위 「더하기」 옵션과 다른 상품이라 체크칸 모양을 쓰지 않는다.
   수강 신청 버튼 아래에 선을 하나 긋고, 카드 전체가 결제 링크다(/checkout/consulting-60min). */
.solo-consult{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px;
  margin-top:18px; padding:14px 14px 12px; border:1px solid var(--line-2); border-radius:12px;
  color:var(--ink); text-decoration:none; position:relative; }
.solo-consult::before{ content:""; position:absolute; left:0; right:0; top:-10px; border-top:1px solid var(--line); }
.solo-consult:hover{ border-color:var(--accent); }
.solo-consult:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.solo-consult .k{ grid-column:1 / -1; font-size:12px; color:var(--ink-soft); }
.solo-consult .tx{ min-width:0; }
.solo-consult .tx b{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); }
.solo-consult .tx span{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.solo-consult .go{ font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; }

/* 합계 — 옵션을 담았을 때만 나온다. 판매가와 같은 18 이다.
   가장 큰 글자는 화면에 언제나 월 할부 금액 하나뿐이고, 컨설팅을 담으면 그 금액이
   합계 기준으로 바뀐다(vibe.js sync) — 큰 숫자와 실제로 내는 돈이 어긋나지 않게. */
.total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line); margin-top:12px; padding-top:10px; }
.total[hidden]{ display:none !important; }
.total .k{ font-size:13.5px; font-weight:600; color:var(--navy); }
.total .v{ font-size:18px; font-weight:600; line-height:1.3;
  color:var(--navy); font-variant-numeric:tabular-nums; }

.rewards .btn.block{ margin-top:14px; padding:15px 22px; border-radius:12px;
  background:#E23A4E; font-size:16px; font-weight:600; }
.rewards .btn.block:hover{ filter:brightness(1.06); }
.rewards .rv-open{ padding:12px; }


/* ── 커리큘럼 팝업 — 화면에 크게 ── */
.curwrap{ position:fixed; inset:0; z-index:70; background:rgba(10,14,20,.6);
  display:grid; place-items:center; padding:28px; }
.curwrap[hidden]{ display:none !important; }
.curmodal{ width:100%; max-width:720px; max-height:88vh; display:flex; flex-direction:column;
  background:var(--white); border-radius:20px; overflow:hidden;
  box-shadow:0 28px 70px -26px rgba(0,0,0,.5); }
.curmodal .mh{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; background:var(--navy); }
.curmodal .mh b{ font-size:16px; font-weight:800; color:#fff; }
.curmodal .x{ border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  width:34px; height:34px; border-radius:50%; font-size:14px; }
.curmodal .x:hover{ background:rgba(255,255,255,.28); }
.curmodal .mb{ padding:24px 26px 28px; overflow-y:auto; }
.mpane[hidden]{ display:none !important; }
.mtop{ padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.mtop .ptag{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  color:var(--accent); background:var(--accent-soft); padding:6px 11px; border-radius:20px; }
.mtop .ptitle{ display:block; margin-top:12px; font-size:18px; line-height:1.45;
  font-weight:800; letter-spacing:-.4px; color:var(--navy); }
.mtop .pdesc{ margin:10px 0 0; font-size:13.5px; line-height:22px; color:var(--ink-soft); }
.pfoot{ margin-top:24px; padding-top:16px; border-top:1px dashed var(--line);
  font-size:12.5px; line-height:20px; color:var(--ink-soft); }
.pfoot b{ color:var(--navy); font-weight:800; }

/* 지하철 노선도 */
.metro{ position:relative; padding-left:34px; }
.metro::before{ content:""; position:absolute; left:9px; top:10px; bottom:10px; width:4px;
  border-radius:4px; background:linear-gradient(var(--accent), var(--navy)); }
.stn{ position:relative; padding-bottom:24px; }
.stn:last-child{ padding-bottom:0; }
.stn .dot{ position:absolute; left:-34px; top:2px; width:22px; height:22px; border-radius:50%;
  background:var(--white); border:4px solid var(--accent); }
.stn .wk{ font-size:11.5px; font-weight:800; color:var(--accent); }
.stn b{ display:block; margin-top:5px; font-size:15.5px; line-height:24px; color:var(--navy); }
.stn .d{ display:block; margin-top:5px; font-size:13.5px; line-height:21px; color:var(--ink-soft); }

/* ── 모바일 — 하단바를 누르면 옵션이 올라온다 ── */
/* 안쪽 여백이 바깥 여백보다 커야 내용이 시트 안에 담긴 것으로 읽힌다.
   고치기 전에는 바깥 20 · 안쪽 18 로 뒤집혀 있어서, 시트는 화면에서 떠 있는데
   정작 내용은 시트 가장자리에 붙어 보였다. 390px 화면 기준으로 양쪽에 38px 을
   두 겹으로 쓰느라 글이 들어갈 폭도 314px 밖에 안 됐다. */
.sheetwrap{ position:fixed; inset:0; z-index:60; background:rgba(10,14,20,.55);
  display:grid; place-items:center; padding:14px; }
.sheetwrap[hidden]{ display:none !important; }
.optsheet{ position:relative; width:100%; max-width:400px; max-height:88vh; overflow-y:auto;
  background:var(--white); border:1px solid var(--line); border-radius:22px;
  padding:20px; box-shadow:0 26px 60px -26px rgba(20,28,48,.55); }
.optsheet .grip{ position:absolute; top:12px; right:12px; width:32px; height:32px;
  border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--sunk); color:var(--ink-soft); font-size:14px; line-height:32px; }
.optsheet .grip::before{ content:"✕"; }
.optsheet .grip:hover{ background:var(--line); }
.optsheet .sh{ margin:0 0 14px; padding-right:36px; font-size:12.5px; font-weight:800;
  letter-spacing:.14em; color:var(--ink-soft); }
.optsheet .rewards{ position:static; top:auto; max-height:none; overflow:visible;
  background:none; border:0; border-radius:0; padding:0; }
.optsheet .rewards .hd{ display:none; }

@media (min-width:1040px){ .sheetwrap{ display:none; } }
@media (max-width:860px){
  .curwrap{ padding:14px; }
  .curmodal{ max-height:90vh; }
  .curmodal .mb{ padding:20px 18px 24px; }
  .mtop .ptitle{ font-size:16px; line-height:1.45; }
  .mtop .pdesc{ font-size:13px; line-height:21px; }
  .stn b{ font-size:15px; line-height:23px; }
  .curbtn{ padding:15px 16px; }
}

/* ── 신청 ── */
.apply-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:900px){ .apply-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.lead-form{ display:flex; flex-direction:column; gap:18px; }
.lead-form label{ display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--on-navy); }
.lead-form small{ color:var(--on-navy-soft); }
.lead-form input[type="text"],.lead-form input[type="email"],.lead-form input[type="tel"],.lead-form textarea{
  width:100%; padding:15px 16px; border-radius:12px; font-size:15.5px;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07); color:#fff; }
.lead-form input::placeholder,.lead-form textarea::placeholder{ color:rgba(255,255,255,.42); }
.lead-consent{ flex-direction:row !important; align-items:flex-start; gap:12px;
  font-size:14px; line-height:22px; color:var(--on-navy-soft); }
.lead-consent input{ margin-top:2px; accent-color:#fff; width:18px; height:18px; }
.lead-consent a{ color:#fff; }
.lead-note{ font-size:13px; line-height:21px; color:var(--on-navy-soft); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pick-sum{ display:flex; flex-direction:column; gap:14px; padding:32px 30px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:20px; }
.pick-sum .r{ display:flex; justify-content:space-between; gap:16px; font-size:15px; }
.pick-sum .r .k{ color:var(--on-navy-soft); flex:0 0 auto; }
.pick-sum .r .v{ color:var(--on-navy); font-weight:600; text-align:right; }
.pick-sum .r.sum{ border-top:1px solid rgba(255,255,255,.16); padding-top:16px; align-items:baseline; }
.pick-sum .r.sum .v{ font-size:28px; font-weight:800; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }

/* ── 꼬리 ── */
footer{ border-top:1px solid var(--line); padding:40px 0 96px; font-size:13.5px; line-height:22px; color:var(--ink-soft); }
footer .wrap{ display:flex; flex-direction:column; gap:16px; }
footer nav{ display:flex; gap:20px; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--accent); }
.company-info{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; line-height:19px; }

/* ── 모바일 가격 자리의 편지(시안 07+08, 2026-09-17 · 2026-10-08 옵션 칸을 안에 넣음) — 넓은 화면은 오른쪽 옵션 칸이 그대로라 숨긴다 ── */
.letter .lt-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px;
  padding:20px 18px 18px; background:var(--white); box-shadow:0 6px 20px rgba(15,23,32,.06); }
:is(.letter, .ltpop) .lt-who{ display:flex; align-items:center; gap:10px; }
:is(.letter, .ltpop) .lt-who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; }
:is(.letter, .ltpop) .lt-who p{ margin:0; display:flex; flex-direction:column; gap:1px; }
:is(.letter, .ltpop) .lt-who b{ font-size:15px; font-weight:800; color:var(--ink); }
:is(.letter, .ltpop) .lt-who span{ font-size:12px; color:var(--ink-soft); }
:is(.letter, .ltpop) .lt-body{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
:is(.letter, .ltpop) .lt-body p{ margin:0; font-size:15px; line-height:1.7; color:var(--ink); }
:is(.letter, .ltpop) .lt-score{ margin:16px 0 0; font-size:13px; font-weight:800; color:var(--ink); }
:is(.letter, .ltpop) .lt-score span{ margin-right:6px; color:#E0A21B; letter-spacing:1px; }
:is(.letter, .ltpop) .lt-quotes{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
:is(.letter, .ltpop) .lt-quotes li{ padding:10px 12px; border-radius:10px; background:color-mix(in srgb,var(--ink) 5%,var(--white));
  display:flex; flex-direction:column; gap:2px; }
:is(.letter, .ltpop) .lt-quotes b{ font-size:14px; font-weight:700; line-height:1.45; color:var(--ink); }
:is(.letter, .ltpop) .lt-quotes span{ font-size:12px; color:var(--ink-soft); }
:is(.letter, .ltpop) .lt-book{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
:is(.letter, .ltpop) .lt-q{ margin:0; font-size:15px; line-height:1.5; font-weight:700; color:var(--ink); }
:is(.letter, .ltpop) .lt-t{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
:is(.letter, .ltpop) .lt-t b{ font-weight:800; color:var(--ink); }
:is(.letter, .ltpop) .lt-go{ display:block; margin-top:14px; padding:15px 12px; border-radius:12px; background:var(--navy); color:var(--on-navy);
  text-align:center; font-size:16px; font-weight:800; letter-spacing:-.3px; text-decoration:none; }
:is(.letter, .ltpop) .lt-go:hover{ filter:brightness(1.12); }
/* 옵션 칸이 편지 칸 안에 들어오면(vibe.js placeRewards · 2026-10-08) 카드 안의 카드가 되지 않게 테두리 · 그림자를 걷고
   윗선 하나로 편지와 나눈다. 칸이 들어와 있는 동안 아래 「옵션 고르고 결제하기」 버튼은 숨는다(옵션 칸의 「수강 신청하기」가 그 버튼이다) */
.letter .lt-opt .rewards{ margin:18px 0 0; padding:16px 0 0; border:0; border-top:1px solid var(--line); border-radius:0;
  box-shadow:none; background:none; }
.letter .lt-opt:has(.rewards) + .lt-go{ display:none; }
@media (min-width:1040px){ .letter{ display:none; } }

/* ── 아래 붙는 띠 ── */
.sticky-cta{ position:fixed; right:0; bottom:0; left:0; z-index:25;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 94%,transparent); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); display:block;
  transform:translateY(115%); transition:transform .2s ease; }
/* [ 수강 후기 | 결제하기 ] 반반 두 버튼(2026-10-08 대표 선택 1번). 후기는 테두리, 결제하기는 옵션 칸의 「수강 신청하기」와 같은 빨강.
   같은 날 낮엔 「바로 결제하기 · 과정 · 금액」 한 줄 + 글자 버튼 줄, 2026-09-17 ~ 10-08 엔 무료로 먼저 보기였다 */
.sticky-cta{ display:flex; gap:10px; padding-top:10px; }
.sticky-btn{ flex:1 1 0; min-width:0; padding:14px 12px; border:0; border-radius:12px; cursor:pointer;
  font:inherit; font-size:16px; font-weight:800; line-height:1.2; letter-spacing:-.3px; white-space:nowrap; }
.sticky-btn.ghost{ background:var(--white); border:1.5px solid var(--line-2); color:var(--navy); }
.sticky-btn.ghost:hover{ border-color:var(--navy); }
.sticky-btn.fill{ background:#E23A4E; color:#fff; }
.sticky-btn.fill:hover{ filter:brightness(1.06); }
.sticky-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.sticky-cta.is-visible{ transform:none; }
@media (min-width:1040px){ .sticky-cta{ display:none; } }

/* ══ 컨설팅 고객사 ══════════════════════════════════════ */
section.clients{ background:var(--navy) !important; color:var(--on-navy);
  border-radius:24px; padding:40px 32px 44px !important; overflow:hidden; }
.clients .eyebrow{ color:#7BA5F2; }
.clients .cnote{ margin-top:12px; font-size:13.5px; color:var(--on-navy-soft); }
.mq{ margin-top:28px; margin-inline:-32px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.track{ display:flex; gap:14px; width:max-content; animation:roll 46s linear infinite; }
/* 화면에 들어오기 전과 마우스를 올렸을 때는 멈춘다. .wait 은 clients.js 가 붙이고 뗀다
   (스크립트가 안 돌면 .wait 이 없어 예전처럼 늘 흐른다) */
.mq.wait .track, .mq:hover .track{ animation-play-state:paused; }
@keyframes roll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .track{ animation:none; } }
.cl{ flex:0 0 auto; width:186px; text-decoration:none; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:22px 16px; }
.cl img{ width:78px; height:78px; border-radius:50%; margin:0 auto; object-fit:cover; }
.cl b{ display:flex; align-items:center; justify-content:center; min-height:40px;
  margin-top:13px; font-size:14.5px; font-weight:700; line-height:20px; color:#fff; }
.cl span{ display:block; margin-top:4px; font-size:12.5px; color:var(--on-navy-soft);
  font-variant-numeric:tabular-nums; }
@media (max-width:720px){ section.clients{ padding:30px 20px 34px !important; border-radius:18px; }
  .mq{ margin-inline:-20px; } .cl{ width:154px; } .cl img{ width:66px; height:66px; } }

/* ══ 직접 남겨주신 후기 ══════════════════════════════════ */
section.reviews{ background:none; padding:0; }
section.reviews > .wrap > h2{ margin-top:12px; }
.rlist{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }

/* 한 줄 = 왼쪽 그림 · 오른쪽 글 */
.rrow{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:30px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:24px 30px 24px 24px; text-decoration:none; }
.rrow .pic{ position:relative; display:block; border:0; padding:0; margin:0; background:none;
  border-radius:14px; overflow:hidden; }
.rrow .pic img{ width:100%; height:auto; display:block; }
.rrow .txt{ display:flex; flex-direction:column; min-width:0; }
.rrow b{ font-size:18px; font-weight:800; letter-spacing:-.4px; color:var(--navy); }
.rrow .role{ margin-top:4px; font-size:13px; color:var(--ink-soft); }
.rrow .q{ margin-top:14px; font-size:22px; line-height:34px; font-weight:700;
  color:var(--navy); letter-spacing:-.4px; }

/* 영상 줄 */
.rrow.vid{ background:var(--navy); border-color:var(--navy);
  grid-template-columns:minmax(0,400px) minmax(0,1fr); }
.rrow.vid b{ color:#fff; }
.rrow.vid .role{ color:var(--on-navy-soft); }
.rrow.vid .q{ color:#fff; }
.rrow.vid .pic{ aspect-ratio:16/9; }
.rrow.vid .pic img{ height:100%; object-fit:cover; }
.rrow.vid .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; font-size:18px; color:var(--navy); padding-left:4px; }
.rrow.vid .go{ margin-top:14px; font-size:13.5px; font-weight:700; color:#7BA5F2; }

/* 사례 줄 — 캡처를 누르면 크게 */
.rrow.case .pic{ cursor:zoom-in; border:1px solid var(--line); background:var(--white);
  max-height:320px; }
.rrow.case .pic img{ transition:transform .2s ease; }
.rrow.case .pic:hover img{ transform:scale(1.02); }
.rrow.case .zoom{ position:absolute; left:0; right:0; bottom:0; padding:44px 0 12px;
  background:linear-gradient(transparent, var(--white) 58%);
  font-size:12.5px; font-weight:700; color:var(--accent); }
.rrow.case .proof{ margin-top:16px; align-self:flex-start; font-size:12.5px; font-weight:700;
  padding:7px 13px; border-radius:20px; background:var(--accent-soft); color:var(--accent); }

/* 카톡·와디즈 후기 줄 — 캡처를 누르면 전문이 펼쳐진다 */
.rrow.kt .pic, .rrow.case .pic{ cursor:pointer; }
.rrow .hint{ position:absolute; left:0; right:0; bottom:0; padding:40px 0 11px;
  background:linear-gradient(transparent, var(--white) 58%);
  font-size:12.5px; font-weight:700; color:var(--accent); }
.rrow .full{ display:none; margin-top:13px; }
.rrow.is-open .full{ display:block; }
.rrow.is-open .hint{ color:var(--ink-soft); }
.rrow .full p{ margin:0 0 9px; font-size:15px; line-height:26px; color:var(--ink); }
.rrow .full p:last-child{ margin-bottom:0; }
.rrow.case .proof{ margin-top:15px; }

.rnote{ margin-top:28px; font-size:13px; line-height:21px; color:var(--ink-soft); }

/* 모바일 — 그림 위, 글 아래 */
@media (max-width:860px){
  section.reviews{ padding:60px 0 64px; }
  /* .rrow.vid 가 클래스 두 개라 특정성으로 이긴다 — 같이 적어 한 칸으로 눕힌다 */
  .rrow, .rrow.vid{ grid-template-columns:minmax(0,1fr); gap:18px; padding:20px; }
  .rrow b{ font-size:17px; }
  .rrow .q{ font-size:17.5px; line-height:29px; }
  .rrow.case .pic, .rrow.kt .pic{ max-height:230px; }
  .rrow .full p{ font-size:14.5px; line-height:24px; }
}

/* 원문 크게 보기 */
.lb{ position:fixed; inset:0; z-index:60; background:rgba(10,14,20,.9);
  display:grid; place-items:center; padding:24px; }
.lb[hidden]{ display:none !important; }
.lbin{ max-width:760px; max-height:90vh; overflow:auto; border-radius:14px; background:#fff; }
.lbin img{ width:100%; display:block; }
.lbx{ position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:18px; cursor:pointer; }
.lbx:hover{ background:rgba(255,255,255,.28); }

/* 후기 더 보기 */
.more-btn{ margin-top:20px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--white);
  font-size:15.5px; font-weight:600; color:var(--navy); cursor:pointer; }
.more-btn:hover{ border-color:var(--line-2); }
.more-btn b{ font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.more-btn .mtxt{ white-space:nowrap; }
.more-btn .rest{ font-weight:400; color:var(--ink-soft); font-size:13.5px; }
.more-btn .arw{ color:var(--ink-soft); }
.more-btn[hidden]{ display:none !important; }

/* 무료 강의 — 상세 맨 앞 */
.free{ padding:8px 0 32px; }
.free .say{ margin:0 0 24px; font-size:17px; line-height:29px; color:var(--ink); }
.free .say b{ font-weight:700; color:var(--navy); }
.free .yt{ max-width:720px; }

/* 유튜브 — 눌러야 불러온다. 절대 다른 화면으로 넘어가지 않는다 */
.yt{ position:relative; border-radius:16px; overflow:hidden; background:#000; }
.yt img{ width:100%; height:auto; display:block; }
.yt .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--navy); font-size:21px; padding-left:5px;
  display:grid; place-items:center; }
.yt .play:hover{ background:#fff; }
.yt .cap{ position:absolute; left:16px; bottom:14px; font-size:12.5px; font-weight:700;
  color:#fff; background:rgba(10,14,20,.72); padding:7px 12px; border-radius:8px; }
.yt.is-live{ aspect-ratio:16/9; }
.yt.is-live img, .yt.is-live .play, .yt.is-live .cap{ display:none; }

/* 우리 서버 영상 — 유튜브 칸과 같은 모양 */
.mv{ position:relative; border-radius:16px; overflow:hidden; background:#000; }
.mv img{ width:100%; height:auto; display:block; }
.mv .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); color:var(--navy); font-size:20px; padding-left:5px;
  display:grid; place-items:center; }
.mv .play:hover{ background:#fff; }
.mv.is-live{ aspect-ratio:16/9; }
.mv.is-live img, .mv.is-live .play{ display:none; }
.mv video{ position:absolute; inset:0; width:100%; height:100%; background:#000; }
.rrow.vid .pic.mv{ border-radius:14px; }
.rrow.vid .pic.mv img{ height:100%; object-fit:cover; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 후기 줄 안의 영상 칸 */
.rrow.vid .pic.yt{ border-radius:14px; }
.rrow.vid .pic.yt .play{ width:56px; height:56px; font-size:18px; }
@media (max-width:860px){ .free .say{ font-size:16px; line-height:27px; } .yt .play{ width:54px; height:54px; font-size:18px; } }

/* ── 강사 소개를 넓은 화면에서는 오른쪽 칸에 올려 함께 따라다니게 ── */
.side .meta-side{ display:none; }
@media (min-width:1040px){
  /* 칸이 화면보다 길면 vibe.js 가 --side-top 을 음수로 잡는다 — 본문과 함께 흐르다가
     신청 단추가 화면 아래 끝에 닿는 순간 멈춘다. 잘리지도, 안쪽 스크롤이 생기지도 않는다. */
  .side{ position:sticky; top:var(--side-top, calc(var(--head) + 16px));
    display:flex; flex-direction:column; gap:12px; }
  /* sticky 를 래퍼로 넘겼으니 결제 칸은 제자리에 둔다 */
  .rewards{ position:static; top:auto; }

  /* 첫 화면에서는 제목 아래 왼쪽에 둔다 — 누가 가르치는지가 제목 다음으로 읽혀야 한다.
     스크롤해서 왼쪽 카드가 화면 위로 사라지면 오른쪽 칸으로 넘어가 계속 따라다닌다.
     왼쪽은 자리를 남긴 채 감춘다(빼 버리면 아래 내용이 위로 튄다). */
  .side .meta-side{ display:flex; background:var(--white); visibility:hidden; opacity:0;
    transition:opacity .18s ease; }
  html.maker-right .side .meta-side{ visibility:visible; opacity:1; }
  html.maker-right .hero > .meta:not(.meta-side){ visibility:hidden; }
}
/* 화면이 낮은 노트북(1536×864 배율 125% 등)에서는 강사 카드까지 따라오면 고르는 칸이
   화면 위로 밀려난다. 이때는 오른쪽 칸에 옵션만 남긴다 — 강사 카드는 첫 화면 왼쪽에 그대로 있다. */
@media (min-width:1040px) and (max-height:839px){
  .side:has(.pick) .meta-side{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .side .meta-side{ transition:none; } }

/* 좁은 화면: 강사 소개만 혼자 작은 상자로 갇혀 제목·본문과 시작선이 어긋났다.
   테두리를 걷고 글 시작을 제목과 맞춘다. */
@media (max-width:860px){
  .hero .meta{ border:0; border-radius:0; padding:2px 0 4px; }
}

/* 판매 방침 안내 — 강의 설명 아래, 상세로 넘어가기 전에 한 번 짚는다 */
.sale-note{ margin:0; padding:16px 18px; border-radius:14px; background:var(--accent-soft);
  font-size:14px; line-height:24px; color:var(--ink); word-break:keep-all; }
@media (max-width:860px){ .sale-note{ padding:15px 16px; font-size:13.5px; line-height:23px; } }

/* ── 가입 팝업 — 떠나려는 사람에게 무료 가입(경자예 칼럼)을 권한다 ──
   할 일은 가입 버튼 하나, 닫기는 X · 바깥 · Esc. 다른 창(옵션·후기·커리큘럼)보다 위에 뜬다.
   책 카드와 버튼은 밝은/어두운 화면 모두 같은 색 — 판매 페이지 아래 띠의 빨강과 맞춘다. */
.joinpop{ position:fixed; inset:0; z-index:90; background:rgba(10,14,20,.56);
  display:grid; place-items:center; padding:20px; animation:jp-fade .18s ease both; }
.joinpop[hidden]{ display:none !important; }
.jp{ position:relative; width:100%; max-width:380px; max-height:calc(100dvh - 40px); overflow-y:auto;
  background:var(--white); border-radius:22px; padding:24px 20px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.28); animation:jp-rise .18s ease both; }
/* 나타나는 움직임은 스타일만으로 — 화면 그리기 신호를 기다리지 않아 투명한 채 남는 일이 없다 */
@keyframes jp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes jp-rise{ from{ transform:translateY(10px); } to{ transform:none; } }
.jp:focus{ outline:none; }
.jp-x{ position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:50%;
  background:var(--line); color:var(--ink-soft); font-size:16px; line-height:36px; cursor:pointer; }
.jp-x:hover{ background:var(--line-2); }
.jp-eb{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--accent); }
.jp h2{ margin:6px 0 0; padding-right:30px; font-size:21px; line-height:1.38; font-weight:800;
  letter-spacing:-.6px; color:var(--navy); text-wrap:balance; }
.jp-book{ margin-top:16px; padding:16px 16px 14px; border-radius:14px; background:#0F1720; color:#fff; }
.jp-book + .jp-book{ margin-top:10px; }
.jp-book b{ display:block; font-size:15.5px; font-weight:800; letter-spacing:-.3px; }
.jp-book small{ display:block; margin-top:2px; font-size:12px; color:rgba(255,255,255,.62); }
.jp-book ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.jp-book li{ position:relative; padding-left:20px; font-size:13px; line-height:1.45; color:rgba(255,255,255,.9); }
.jp-book li::before{ content:"✓"; position:absolute; left:0; top:0; color:#E6C77A; font-weight:800; }
.jp-book p{ margin:8px 0 0; font-size:12px; font-weight:700; color:#E6C77A; }
.jp-d{ margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--ink-soft); }
.jp-go{ display:block; margin-top:16px; padding:16px 12px; border-radius:12px; background:#E23A4E;
  color:#fff; text-align:center; font-size:16px; font-weight:800; letter-spacing:-.3px; text-decoration:none; }
.jp-go:hover{ filter:brightness(1.06); }
.jp-s{ margin:9px 0 0; text-align:center; font-size:12px; color:var(--ink-soft); }
/* 무료 1강 팝업(#free-pop) — 가입 팝업과 같은 창에 강의 화면 한 장. 사진은 첫 화면 사진의 얼굴 쪽만 */
.jp-thumb{ position:relative; display:block; margin-top:16px; height:186px; border-radius:14px; overflow:hidden;
  background:#0F1720 url("/lp/ai_bootcamp_01/assets/hero-m2.jpg") no-repeat 100% 24% / 265% auto; }
.jp-thumb .jp-play{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(15,23,32,.34); }
.jp-thumb .jp-play i{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.95);
  display:grid; place-items:center; }
.jp-thumb .jp-play svg{ display:block; margin-left:3px; }
.jp-thumb .jp-cap{ position:absolute; left:10px; right:10px; bottom:10px; width:fit-content; max-width:calc(100% - 20px);
  padding:6px 10px; border-radius:8px; background:rgba(15,23,32,.8); color:#fff;
  font-size:12.5px; font-weight:700; line-height:1.35; }
/* 편지 팝업(#letter-pop) — 편지 칸 카드 안쪽을 그대로 옮겨 담는다. 카드 테두리는 팝업 창이 대신한다 */
.ltpop .lt-who{ padding-right:40px; }
.ltpop .lt-go{ margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .joinpop, .jp{ animation:none; } }
/* 세로가 짧은 화면 — 가입 버튼과 안내 줄이 한 화면에 들도록 설명 문단을 빼고 간격을 줄인다.
   책 카드가 둘이라 인스타·페북 앱 안 브라우저(세로 700px 안팎)에서도 버튼이 밀려나서 780px 부터 적용한다 */
@media (max-height:780px){
  .jp{ padding:20px 18px 14px; }
  .jp h2{ font-size:19px; }
  .jp-book{ margin-top:12px; padding:13px 14px 12px; }
  .jp-book ul{ margin-top:9px; gap:4px; }
  .jp-d{ display:none; }
  .jp-go{ margin-top:12px; padding:14px 12px; }
  .jp-thumb{ margin-top:12px; height:150px; }
  .ltpop .lt-body{ margin-top:10px; gap:6px; }
  .ltpop .lt-body p{ font-size:14px; line-height:1.6; }
  .ltpop .lt-score{ margin-top:12px; }
  .ltpop .lt-quotes li{ padding:8px 10px; }
  .ltpop .lt-book{ margin-top:12px; padding-top:12px; }
  .ltpop .lt-go{ margin-top:12px; padding:14px 12px; }
}

/* 가입하고 돌아온 사람에게 한 번 — 첫 화면 맨 위 */
.hero .joined{ display:flex; align-self:stretch; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; background:var(--accent-soft); }
.hero .joined[hidden]{ display:none; }
.hero .joined i{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:14px; font-weight:800; color:#fff; background:var(--accent); }
.hero .joined p{ margin:0; flex:1; min-width:0; font-size:13.5px; line-height:1.45; color:var(--navy); }
.hero .joined p b{ display:block; font-size:14.5px; }
.hero .joined a{ flex:none; padding:8px 11px; border-radius:9px; background:var(--navy); color:var(--ground);
  font-size:13px; font-weight:700; text-decoration:none; }
.hero .joined button{ flex:none; border:0; padding:4px; background:none; color:var(--ink-soft);
  font-size:16px; cursor:pointer; }