/* ============================================================
   알음알음 기부 클럽 — 스타일
   ------------------------------------------------------------
   호스트 화면(beautiful-26-01.html)과 공개 화면(club.html)이 함께 씁니다.
   두 벌로 두면 한쪽만 고치는 일이 반드시 생깁니다.

   2026.09.11 — 디자인 시안 v2 를 반영했습니다.
     · 서체 Pretendard
     · 크림/코랄 팔레트 → 흰 바탕 + 중성 회색
     · 기부자 유형 5종의 색이 화면을 물들입니다 (--t-main 계열)
   ============================================================ */

/* 서체는 각 HTML 의 <link> 로 불러옵니다.
   CSS 안에서 @import 하면 이 파일을 다 받은 뒤에야 폰트를 받기 시작해
   글자가 늦게 자리를 잡습니다. */

  :root{
    /* ── 중성 ──
       시안의 잉크 계열입니다. 예전 크림 배경(#EDE7DC)을 흰색으로 바꿨습니다.
       배경이 색을 가지면 유형 색이 흐려집니다. */
    --ink:#26262B;
    --ink-2:#3A3A42;
    --ink-mid:#55555C;
    --ink-soft:#8A8A8A;
    --line:#EEEEEE;
    --surface:#F2F2F4;
    --surface-2:#F1F1F4;
    --card:#FFFFFF;
    --page:#FFFFFF;

    /* ── 유형색 ──
       app.js 가 기부자 유형이 정해지는 순간 이 값을 갈아끼웁니다.
       기본값은 중성이라, 유형이 없을 때도 화면이 성립합니다. */
    --t-main:#26262B;
    --t-light:#F2F2F4;
    --t-deep:#26262B;
    --t-glow:rgba(0,0,0,.12);
    --t-hero:linear-gradient(168deg,#F7F7F9 0%,#ECECEF 55%,#E4E4E8 100%);

    /* 예전 이름을 쓰는 자리가 남아 있어 이어 둡니다 */
    --coral:var(--t-main);
    --coral-dark:var(--t-deep);
    --coral-tint:var(--t-light);
    --coral-line:var(--line);
    --cream:#FAFAFB;

    --radius:14px;
    --radius-lg:24px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
                "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    background:var(--page);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    letter-spacing:-.01em;
  }
  button{font-family:inherit;}



  /* ---------- 화면 전환 ---------- */
  .screen{display:none;animation:fade .3s ease;}
  .screen.active{display:block;}

  /* ★ 2026.09.21 — translateY 를 뺐습니다. 6px 올라오는 연출 하나 때문에
     결과 화면의 초안 바가 고정되지 않았습니다.

     CSS 규칙 하나 때문입니다 — transform 이 걸린 조상이 있으면 그 안의
     position:fixed 는 '화면' 이 아니라 '그 조상' 을 기준으로 잡힙니다.
     그래서 화면 맨 위에 붙어 있어야 할 바가 페이지와 함께 밀려 올라갔습니다.
     실측: 스크롤 0 에서 top 6px → 스크롤 1200 에서 top -1194px.

     CSS 만 봐서는 보이지 않습니다. .draft-bar 에는 position:fixed 가
     분명히 적혀 있고, 문제는 400줄 떨어진 이 한 줄에 있었습니다.
     전체 화면을 감싸는 컨테이너에는 transform 을 걸지 않습니다. */
  @keyframes fade{from{opacity:0;}to{opacity:1;}}

  .wrap{max-width:640px;margin:0 auto;padding:0 18px;}

  /* ---------- 원칙 문서 경고 ---------- */
  .guide-warn{
    background:#FDECEA;border:1px solid #F3C4C4;border-radius:13px;
    padding:16px 18px;margin-top:20px;color:#8C2A22;text-align:left;
  }
  .guide-warn b{font-weight:700;}
  .guide-warn p{font-size:14px;line-height:1.7;margin:8px 0 0;}
  .guide-warn .cmd{
    display:block;margin-top:10px;background:#fff;border:1px solid #F3C4C4;border-radius:9px;
    padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:#8C2A22;
    user-select:all;
  }

  /* ---------- 1. 인트로 ---------- */
  .intro{padding:56px 0 72px;text-align:center;}

  /* ★ 동의 화면만 좌우 여백을 되살립니다 (2026.09.21).
     .intro 는 .wrap 의 `padding:0 18px` 을 0 으로 덮습니다. 예전 인트로 화면에
     전체너비 요소가 있어서 그렇게 뒀는데, 동의 화면에는 그런 요소가 없습니다.
     그래서 좁은 화면에서 —
       · 본문 오른쪽에 여백이 아예 없어 글자가 가장자리에 닿았고
       · 안내 문구("[필수] 항목에…")와 시작 버튼만 x=0 에 붙어
         위쪽 내용(x=40)과 세로줄이 어긋나 보였습니다
     PC 는 아래 미디어쿼리에서 자기 여백을 따로 줍니다. */
  #screen-consent .intro{padding-left:18px;padding-right:18px;}
  .intro .tag{
    display:inline-block;background:var(--surface);color:var(--ink-mid);
    font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;margin-bottom:20px;
  }
  .intro h1{font-size:30px;line-height:1.42;margin:0 0 14px;font-weight:700;letter-spacing:-.01em;}
  .intro .lead{font-size:16px;color:var(--ink-mid);margin:0 auto 34px;max-width:400px;}
  /* 한눈에 — 유형과 지원할 사업을 맨 위에 */
  /* 중요한 정보라 나란히 두지 않고 위아래로 쌓습니다.
     한 줄에 둘을 넣으면 폭이 반씩이라 글자와 여백이 모두 줄어듭니다. */
  .cp-facts{display:flex;flex-direction:column;gap:10px;padding:18px 24px 4px;}
  .cp-facts .fact{min-width:0;background:#FBF9F5;border:1px solid var(--line);
    border-radius:13px;padding:15px 16px;}
  .cp-facts .fk{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);
    letter-spacing:.03em;margin-bottom:6px;}
  .cp-facts .fv{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;
    line-height:1.35;margin-bottom:6px;letter-spacing:-.01em;}
  .cp-facts .fico{width:28px;height:28px;border-radius:50%;display:inline-flex;
    align-items:center;justify-content:center;font-size:15px;flex:none;font-style:normal;}
  .cp-facts .fen{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-soft);
    letter-spacing:.06em;margin-left:auto;}
  .cp-facts .ffund{display:inline-block;font-size:11px;font-weight:700;color:var(--coral-dark);
    background:#EDEDF0;border-radius:99px;padding:2px 8px;margin-bottom:5px;}
  .cp-facts .fx{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
  .cp-facts .fwhy{display:block;font-size:13.5px;color:var(--ink-mid);line-height:1.7;
    margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
  .cp-facts .fact-char{border-width:1.5px;}

  .rc-keyring{width:64px;height:64px;flex:none;border-radius:14px;background:#F3EFE7;
    border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:26px;}
  @media (max-width:420px){ .cp-facts .fx{white-space:normal;} }

  /* 참여 — 금액이 아니라 방식부터 */
  .join-grid{display:flex;gap:10px;}
  .join-btn{flex:1;text-align:left;background:#fff;border:1.5px solid var(--line);
    border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .2s,background .2s;}
  .join-btn:hover{border-color:var(--coral);}
  .join-btn{position:relative;}
  .join-btn.sel{border-color:var(--coral);background:#F6F6F8;box-shadow:0 0 0 2px rgba(38,38,43,.10);}
  /* 고른 쪽에 체크 표시 — 테두리 색만으로는 휴대폰 햇빛 아래에서 잘 안 보입니다 */
  .join-btn.sel::after{content:"✓";position:absolute;top:12px;right:14px;width:22px;height:22px;border-radius:50%;
    background:var(--coral);color:#fff;font-size:13px;font-weight:800;line-height:22px;text-align:center;}
  .join-btn b{display:block;font-size:16px;margin-bottom:4px;}
  .join-btn.sel b{color:var(--coral-dark);}
  .join-btn span{display:block;font-size:13px;color:var(--ink-soft);}
  @media (max-width:420px){ .join-grid{flex-direction:column;} }

  /* 개인정보 입력 */
  .pf-field{margin-bottom:14px;}
  .pf-field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;}
  .pf-field label em{font-style:normal;font-weight:600;color:var(--ink-soft);margin-left:5px;font-size:12.5px;}
  .pf-field input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
    padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;}
  .pf-field input:focus{outline:none;border-color:var(--coral);}
  .pf-note{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-top:-4px;margin-bottom:16px;}
  .pf-row{display:flex;gap:10px;}
  .pf-row .pf-field{flex:1;min-width:0;margin-bottom:10px;}
  .c-lead{font-size:15px;color:var(--ink-mid);line-height:1.8;margin:-4px 0 22px;}
  @media (max-width:420px){ .pf-row{flex-direction:column;gap:0;} }

  /* 종료 화면 */
  .done-wrap{text-align:center;padding:60px 24px 40px;}
  .done-wrap h2{font-size:23px;line-height:1.45;margin:0 0 16px;letter-spacing:-.02em;}
  .done-wrap p{font-size:15.5px;color:var(--ink-mid);line-height:1.85;margin:0 0 8px;}
  .done-eta{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;
    color:var(--coral-dark);background:#EDEDF0;border-radius:99px;padding:7px 15px;}
  .done-acts{margin-top:32px;}

  /* 확인 화면 — 페이지에 그대로 실릴 말 */
  .rv-quotes{padding:12px 0 2px;border-top:1px solid var(--line);margin-top:4px;}
  .rv-quotes q{display:block;font-size:14.5px;line-height:1.7;color:var(--ink);
    margin-top:7px;padding-left:11px;border-left:2px solid var(--coral);quotes:none;}
  .rv-note.warn-note{color:var(--coral-dark);background:#EDEDF0;border-radius:10px;
    padding:11px 13px;}


  /* 주 버튼은 유형색이 아니라 잉크색입니다.
     유형색은 화면을 물들이는 역할이고, 눌러야 할 것은 언제나 같은 색이어야
     기부자님이 헷갈리지 않습니다. */
  .btn-primary{
    background:var(--ink);color:#fff;border:none;
    padding:16px 22px;border-radius:14px;font-size:16px;font-weight:700;
    cursor:pointer;width:100%;letter-spacing:-.01em;
    box-shadow:0 8px 18px rgba(38,38,43,.22);
    transition:background .15s,transform .12s,box-shadow .15s;
  }
  .btn-primary:hover{background:#3A3A42;}
  .btn-primary:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(38,38,43,.2);}
  .btn-primary:disabled{background:#C8C8C8;box-shadow:none;cursor:default;}
  .btn-primary:hover{background:var(--coral-dark);}
  .btn-primary:active{transform:scale(.985);}
  .btn-primary:disabled{background:#C8C8CC;cursor:not-allowed;}
  .db-btn:disabled,.db-btn.primary:disabled{background:#D5D5DA;border-color:#D5D5DA;color:#fff;cursor:not-allowed;}
  .btn-ghost{
    background:transparent;border:1.5px solid var(--line);color:var(--ink-mid);
    padding:13px 20px;border-radius:13px;font-size:15px;font-weight:600;cursor:pointer;width:100%;
  }
  .btn-ghost:hover{border-color:var(--coral);color:var(--coral-dark);}
  .note{font-size:12.5px;color:var(--ink-soft);margin-top:12px;}

  /* ---------- 초안 · 승인 요청 바 ---------- */
  /* 초안 바 — 화면 맨 위 고정.
     ★ 2026.09.21 sticky(top:41px) → fixed 로 바꿨습니다.
       sticky 는 스크롤 컨테이너 안에서 '떠 있는 페이지 조각' 이라, 결과 페이지
       위로 겹쳐 히어로 제목을 가렸습니다. 기부자님 입장에서는 이게 페이지의
       일부인지 내가 쓰는 도구인지 구분이 안 됩니다.
       고정으로 올려 '도구' 임을 분명히 하고, 본문은 .draft-spacer 만큼 내려
       겹치지 않게 합니다. 높이는 app.js 가 실측해 넣습니다. */
  .draft-bar{
    position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:#F7F7F9;border-bottom:1px solid var(--line);padding:12px 20px;
    box-shadow:0 6px 18px -14px rgba(38,38,43,.45);
  }
  .draft-spacer{height:0;}
  .draft-bar.editing{background:#23201D;border-color:#23201D;}
  .draft-bar.done{background:#E8F5EC;border-color:#B7DDC4;}
  .draft-bar .db-txt{flex:1;min-width:190px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}
  .draft-bar .db-txt b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px;}
  .draft-bar.editing .db-txt{color:rgba(255,255,255,.7);}
  .draft-bar.editing .db-txt b{color:#fff;}
  .draft-bar.done .db-txt b{color:#166534;}
  .draft-bar.done .db-txt{color:#3F7A55;}
  .db-btn{
    border:1px solid var(--line);background:#fff;color:var(--ink-mid);
    padding:9px 14px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  }
  .db-btn:hover{border-color:var(--coral);color:var(--coral-dark);}
  .db-btn.primary{background:var(--coral);border-color:var(--coral);color:#fff;}
  .db-btn.primary:hover{background:var(--coral-dark);color:#fff;}
  .draft-bar.editing .db-btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
  .db-btn.ghost{background:transparent;border-color:#B7DDC4;color:#166534;}

  /* ---------- 기부자 유형 카드 ---------- */
  .char-card{
    border-radius:16px;padding:20px;position:relative;overflow:hidden;min-height:150px;
    display:flex;flex-direction:column;
  }
  .char-card .char-top{position:relative;z-index:2;}
  .char-card .char-name{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em;}
  .char-card .char-en{font-size:12px;font-weight:700;letter-spacing:.08em;opacity:.75;margin-top:3px;}
  .char-card .char-ico{
    position:absolute;right:16px;bottom:14px;font-size:56px;line-height:1;opacity:.95;z-index:1;
  }
  .char-card .char-tag{
    position:relative;z-index:2;margin-top:auto;padding-top:22px;
    font-size:14px;font-weight:600;line-height:1.5;max-width:70%;opacity:.95;
  }
  .char-reason{font-size:14px;color:var(--ink-mid);line-height:1.7;margin:12px 0 0;}

  /* ---------- 리워드 ---------- */
  .reward-card{
    border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;
    display:flex;gap:14px;align-items:flex-start;
  }
  .reward-card > div:last-child b{font-size:14.5px;display:block;margin-bottom:4px;}
  .reward-card p{font-size:13.5px;color:var(--ink-mid);line-height:1.7;margin:0 0 8px;}
  .rc-note{font-size:12px;color:var(--ink-soft);}
  .reward-list{display:flex;flex-direction:column;gap:10px;}
  .rc-cards{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .rc-mini{
    flex:1;border-radius:12px;padding:12px 10px;text-align:center;font-size:12px;font-weight:600;
  }
  .rc-mini span{display:block;font-size:26px;line-height:1.2;margin-bottom:4px;}
  .rc-mini b{display:block;font-size:12px;font-weight:700;opacity:.8;margin-bottom:1px;}
  .rc-you{background:#F3EFE7;color:var(--ink-soft);border:1px dashed var(--line);}
  .rc-plus{font-size:17.5px;color:var(--ink-soft);font-weight:700;}

  /* ---------- 2. 인터뷰 ---------- */
  .interview{padding:20px 0 0;}
  /* 진행 표시 — 어디쯤 왔는지 한눈에 보이도록.
     막대는 주제 수만큼 칸으로 나뉘고, 지금 주제 칸은 그 안에서도 채워집니다.
     그래서 주제가 안 바뀌는 턴에도 막대가 조금씩 움직입니다. */
  .phase-track{display:flex;gap:4px;margin-bottom:9px;}
  .phase-seg{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden;}
  .phase-seg i{display:block;height:100%;width:0;border-radius:99px;background:var(--coral);
    transition:width .55s cubic-bezier(.22,.61,.36,1);}
  .phase-seg.now i{background:linear-gradient(90deg,var(--coral),var(--coral-dark));}
  .phase-seg.now{box-shadow:0 0 0 2px rgba(242,92,5,.13);}

  .phase-label{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
    font-size:13px;color:var(--ink-soft);margin-bottom:18px;}
  .phase-pct{font-size:13.5px;font-weight:800;color:var(--coral-dark);
    font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  .phase-name{font-size:14px;font-weight:700;color:var(--ink);}
  .phase-count{font-variant-numeric:tabular-nums;}
  .phase-left{margin-left:auto;font-size:12.5px;}
  .phase-dot{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none;}
  @media (max-width:380px){
    .phase-left{margin-left:0;flex-basis:100%;}
  }

  .chat{display:flex;flex-direction:column;gap:4px;padding-bottom:12px;min-height:340px;}
  .msg-ai,.msg-me{max-width:88%;}
  .msg-me{align-self:flex-end;}
  .ai-name{
    font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;margin:10px 0 5px 2px;
  }
  .ai-name i{width:16px;height:16px;border-radius:50%;background:var(--coral);display:inline-block;}
  .bubble{
    padding:13px 16px;border-radius:18px;font-size:15px;line-height:1.6;
    white-space:pre-line;animation:pop .22s ease;letter-spacing:-.01em;
  }
  @keyframes pop{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
  .msg-ai .bubble{
    background:#fff;border:none;border-bottom-left-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
  }
  .msg-me .bubble{
    background:var(--ink);color:#fff;border-bottom-right-radius:6px;margin-top:10px;
  }
  .typing{
    display:flex;gap:4px;padding:14px 16px;background:#fff;border:1px solid var(--line);
    border-radius:16px;border-bottom-left-radius:5px;width:fit-content;
  }
  .typing i{width:6px;height:6px;border-radius:50%;background:#C9BEAE;animation:blink 1.2s infinite;}
  .typing i:nth-child(2){animation-delay:.18s;}
  .typing i:nth-child(3){animation-delay:.36s;}
  @keyframes blink{0%,80%,100%{opacity:.3;}40%{opacity:1;}}

  .composer{
    position:sticky;bottom:0;background:linear-gradient(180deg,rgba(237,231,220,0) 0%,var(--page) 30%);
    padding:14px 0 22px;
  }
  /* 미션 카드·사진 업로드처럼 큰 것이 들어오면 높이가 700px 을 넘습니다.
     그때도 그러데이션을 쓰면 위쪽 투명 구간으로 지나간 대화가 그대로 비칩니다.
     실제로 카드 사이 틈으로 앞 말풍선 글자가 보였고, 사진 안내 말풍선은 반쯤 잘렸습니다.
     위젯이 들어있을 때만 배경을 채우고 경계를 하나 긋습니다. */
  .composer.has-widget{
    background:var(--page);
    box-shadow:0 -1px 0 var(--line), 0 -14px 22px -14px rgba(38,38,43,.16);
    padding-top:18px;
  }
  .composer-inner{display:flex;gap:8px;align-items:flex-end;}
  .composer textarea{
    flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:13px;
    font-size:15px;font-family:inherit;resize:none;outline:none;background:#fff;
    line-height:1.5;max-height:120px;
  }
  .composer textarea:focus{border-color:var(--coral);}
  .send{
    background:var(--coral);color:#fff;border:none;border-radius:13px;
    width:46px;height:46px;font-size:18.5px;cursor:pointer;flex-shrink:0;
  }
  .send:disabled{background:#D9CFC0;cursor:not-allowed;}
  .composer .helper{font-size:12px;color:var(--ink-soft);margin-top:7px;}
  .composer .helper a{color:var(--coral-dark);cursor:pointer;text-decoration:underline;}

  .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .choice-btn{
    background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 10px;
    font-size:14px;font-weight:600;cursor:pointer;text-align:left;line-height:1.45;
  }
  .choice-btn:hover{border-color:var(--coral);background:var(--coral-tint);color:var(--coral-dark);}
  .choice-btn small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:3px;}
  .upload-box{
    border:2px dashed var(--line);border-radius:13px;padding:24px;text-align:center;
    font-size:14px;color:var(--ink-soft);cursor:pointer;background:#fff;
  }
  .upload-box:hover{border-color:var(--coral);}
  .err-banner{
    background:#FDECEC;border:1px solid #F3C4C4;color:#9B2C2C;
    font-size:13.5px;padding:10px 13px;border-radius:11px;margin-bottom:10px;
  }

  /* ---------- 3. 생성 중 ---------- */
  .loading{padding:80px 0;text-align:center;}
  .loading h3{font-size:18.5px;margin:0 0 8px;}
  .loading p{font-size:14px;color:var(--ink-soft);margin:0;}
  #loading-steps{margin-top:22px;font-size:13px;color:var(--ink-soft);line-height:2;}
  #loading-steps div{opacity:.35;transition:opacity .3s;}
  #loading-steps div.on{opacity:1;color:var(--coral-dark);font-weight:600;}

  /* ---------- 4. 캠페인 페이지 ---------- */
  .campaign{background:var(--cream);min-height:100vh;}
  .cp{max-width:640px;margin:0 auto;background:#fff;}
  /* ── 히어로 · 캐릭터 풀블리드 (시안 5B) ──
     상단을 유형색으로 가득 채우고 캐릭터를 크게 앉힙니다.
     색은 --t-* 로 들어오므로, 유형이 바뀌면 이 화면 전체의 인상이 바뀝니다. */
  .cp-hero{
    background:var(--t-hero);
    padding:20px 22px 0;color:var(--t-deep);position:relative;overflow:hidden;
    min-height:300px;display:flex;flex-direction:column;
  }
  .cp-hero .brandline{
    font-size:11.5px;font-weight:700;letter-spacing:.05em;
    display:flex;align-items:center;gap:7px;margin-bottom:14px;opacity:.85;
  }
  .cp-hero .brandline img{width:18px;height:18px;object-fit:contain;}
  .cp-hero .char-code{
    display:inline-block;align-self:flex-start;
    background:rgba(255,255,255,.55);color:var(--t-deep);
    font-size:11px;font-weight:800;letter-spacing:.1em;padding:5px 11px;border-radius:999px;
  }
  .cp-hero h1{
    font-size:27px;line-height:1.22;margin:12px 0 8px;font-weight:800;
    letter-spacing:-.03em;max-width:68%;text-wrap:pretty;
  }
  .cp-hero .sub{
    font-size:14.5px;line-height:1.45;margin:0;font-weight:600;max-width:62%;opacity:.9;
  }
  /* 캐릭터는 오른쪽 아래에 걸쳐 바닥까지 내려옵니다 */
  .cp-hero .hero-char{
    position:absolute;right:-6px;bottom:0;width:168px;object-fit:contain;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.20));pointer-events:none;
  }
  /* 사진을 올린 경우 — 캐릭터 자리를 비우고 사진이 배경이 됩니다 */
  .cp-hero.has-photo .hero-char{width:112px;opacity:.96;}
  .cp-hero .photo-slot{
    width:100%;height:132px;border-radius:16px;background:rgba(255,255,255,.35);
    border:1px dashed rgba(255,255,255,.75);color:var(--t-deep);
    display:flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:600;margin:14px 0 0;
  }
  .cp-hero .hero-pad{height:56px;}
  .cp-hero .sub{font-size:15px;opacity:.95;margin:0 0 18px;}
  /* 캐릭터가 오른쪽 아래에 절대 배치로 앉아 있어서, 폭을 묶지 않으면 태그가
     그 밑으로 흘러들어갑니다. 제목(68%)·소제목(62%)에는 한계가 있었는데
     태그 줄만 빠져 있어서 세 번째 태그가 캐릭터에 가려 잘렸습니다.
     캐릭터 폭(168px)만큼 비우고 나머지에서 줄바꿈시킵니다. */
  .cp-hero .tags{display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 160px);}
  .cp-hero.has-photo .tags{max-width:calc(100% - 108px);}
  .cp-hero .tags span{
    background:rgba(255,255,255,.22);font-size:12px;font-weight:600;
    padding:4px 10px;border-radius:999px;
  }

  .cp-hostbar{
    display:flex;align-items:center;gap:12px;padding:16px 24px;
    border-bottom:1px solid var(--line);background:#fff;
  }
  .cp-hostbar .av{
    width:44px;height:44px;border-radius:50%;background:var(--t-light);
    border:none;color:var(--t-deep);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17.5px;flex-shrink:0;
  }
  .cp-hostbar .who b{display:block;font-size:15px;}
  .cp-hostbar .who span{font-size:13px;color:var(--ink-soft);}
  .cp-hostbar .chartag{
    margin-left:auto;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
    background:var(--t-light);border:none;color:var(--t-deep);
    white-space:nowrap;
  }

  .cp-progress{padding:18px 24px;border-bottom:1px solid var(--line);}
  .cp-progress .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
  .cp-progress .big{font-size:20.5px;font-weight:700;}
  .cp-progress .big small{font-size:13px;font-weight:500;color:var(--ink-soft);}
  .cp-progress .goal{font-size:13px;color:var(--ink-soft);}
  .track{height:9px;border-radius:5px;background:#F0E7DA;overflow:hidden;}
  .track i{display:block;height:100%;background:var(--coral);border-radius:5px;width:0;transition:width 1.1s ease;}
  .cp-progress .amt{font-size:13px;color:var(--ink-soft);margin-top:9px;}

  section.cp-sec{padding:26px 24px;border-bottom:1px solid var(--line);}
  /* 재단이 쓴 사업 설명 — "이런 변화가 만들어져요" */
  /* 2026.09.28 — 더 강조합니다. 이 상자가 '내 돈이 무엇을 바꾸나' 에 대한 답이라
     본문보다 작은 글자로 두면 안 됩니다. 제목·항목 모두 본문과 같거나 크게. */
  .impact-box{
    margin-top:22px;border:1.5px solid var(--coral-line,#E4E4E8);border-radius:16px;
    background:#F6F6F8;padding:22px 24px;
  }
  .ib-head{
    display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;
    color:var(--coral-dark);margin-bottom:16px;letter-spacing:-.02em;
  }
  .ib-ico{
    width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:none;
  }
  .impact-box ul{margin:0;padding:0;list-style:none;}
  .impact-box li{
    position:relative;padding-left:20px;font-size:16px;line-height:1.7;font-weight:600;
    color:var(--ink);margin-bottom:12px;word-break:keep-all;
  }
  .impact-box li:last-child{margin-bottom:0;}
  .impact-box li::before{
    content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;
    border-radius:50%;background:var(--coral);
  }
  .ib-note{
    margin-top:12px;padding-top:10px;border-top:1px solid var(--coral-line,#E4E4E8);
    font-size:12px;color:var(--ink-soft);
  }

  /* 오류 카드 — 무슨 일이고, 누구 탓이 아니고, 무엇을 하면 되는지 */
  .err-card{
    background:#FFF4F0;border:1px solid #F0C6B4;border-radius:13px;
    padding:15px 17px;margin-bottom:14px;
  }
  .ec-head{
    display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;
    color:#B5410A;margin-bottom:9px;letter-spacing:-.01em;
  }
  .ec-ico{
    width:21px;height:21px;border-radius:50%;background:#D9541A;color:#fff;flex:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  }
  .err-card p{margin:0 0 7px;font-size:13.5px;line-height:1.75;color:var(--ink-mid);}
  .err-card .ec-keep{
    margin:10px 0 0;padding:9px 11px;background:#fff;border-radius:9px;
    font-size:13px;font-weight:700;color:var(--ink);
  }
  .ec-more{margin-top:10px;}
  .ec-more summary{font-size:11.5px;color:var(--ink-soft);cursor:pointer;}
  .ec-more code{
    display:block;margin-top:7px;font-size:11px;color:var(--ink-soft);
    word-break:break-all;line-height:1.6;
  }
  .choice-btn.primary{border-color:var(--coral);background:#F6F6F8;}

  /* AI 활용 표기 — 글 앞에 두어 읽기 전에 알 수 있게 */
  /* 구간 안내 — 질문이 아니라 "지금 무슨 이야기 중인지" 알려주는 줄 */
  .bubble.intro-line{
    background:#F6F2EA;border:1px dashed var(--line);color:var(--ink-mid);
    font-size:14.5px;font-weight:700;
  }
  .cp-ainote{
    display:flex;align-items:flex-start;gap:11px;
    margin:16px 24px 0;padding:14px 16px;
    background:#F6F6F8;border:1px solid var(--line);border-radius:13px;
  }
  .cp-ainote .ai-badge{
    flex:none;font-size:11.5px;font-weight:800;letter-spacing:.02em;
    color:#fff;background:var(--coral);border-radius:99px;padding:5px 11px;margin-top:1px;
  }
  .cp-ainote p{
    margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-mid);
  }
  @media (max-width:420px){
    .cp-ainote{flex-direction:column;gap:9px;}
  }

  /* 전개 단계 인덱스 — 글의 뼈대를 짚어주는 자리라 작으면 제 역할을 못 합니다.
     앞에 짧은 선을 두어 눈에 걸리게 했습니다. */
  .kicker{
    display:flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:800;color:var(--coral);letter-spacing:.06em;margin-bottom:14px;
  }
  .kicker::before{
    content:"";width:16px;height:2px;border-radius:2px;background:var(--coral);flex:none;
  }
  h2.sec-h{font-size:18.5px;margin:0 0 14px;font-weight:700;}
  .oneliner{
    font-size:18.5px;line-height:1.62;font-weight:600;margin:0;
    padding-left:14px;border-left:3px solid var(--coral);
  }
  .story-block{margin-bottom:22px;}
  .story-block:last-child{margin-bottom:0;}
  .story-block h3{
    font-size:14px;font-weight:700;color:var(--coral-dark);margin:0 0 7px;
    display:flex;align-items:center;gap:7px;
  }
  .story-block h3::after{content:"";flex:1;height:1px;background:var(--line);}
  .story-block p{font-size:15.5px;line-height:1.78;margin:0;color:var(--ink);white-space:pre-line;}
  .pullquote{
    background:var(--coral-tint);border:1px solid var(--coral-line);border-radius:14px;
    padding:22px 24px;text-align:center;
  }
  .pullquote p{
    font-size:18.5px;line-height:1.6;font-weight:600;margin:0 0 8px;color:var(--coral-dark);
  }
  .pullquote span{font-size:12.5px;color:var(--ink-soft);}

  .char-card{
    display:flex;gap:14px;align-items:flex-start;
    background:#F7F7F9;border:1px solid var(--line);border-radius:14px;padding:16px;
  }
  .char-card .ico{
    width:44px;height:44px;border-radius:12px;background:var(--coral);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
  }
  .char-card b{display:block;font-size:15px;margin-bottom:3px;}
  .char-card .power{
    font-size:11.5px;font-weight:700;color:var(--coral-dark);background:var(--coral-tint);
    padding:2px 7px;border-radius:5px;margin-left:6px;
  }
  .char-card p{font-size:13.5px;color:var(--ink-mid);margin:5px 0 0;line-height:1.6;}

  .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px;}
  .tier{
    background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 10px;
    text-align:center;cursor:pointer;position:relative;transition:all .15s;
  }
  .tier:hover{border-color:var(--coral-line);}
  .tier.sel{border-color:var(--coral);background:var(--coral-tint);}
  .tier b{display:block;font-size:15px;font-weight:700;margin-bottom:3px;}
  .tier span{font-size:11.5px;color:var(--ink-soft);line-height:1.4;display:block;}
  .tier .rec{
    position:absolute;top:-9px;left:50%;transform:translateX(-50%);
    background:var(--coral);color:#fff;font-size:10.5px;font-weight:700;
    padding:2px 8px;border-radius:999px;white-space:nowrap;
  }

  .usage-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F2EBE0;}
  .usage-row:last-child{border-bottom:none;}
  .usage-row .pct{
    font-size:16px;font-weight:700;color:var(--coral-dark);width:44px;flex-shrink:0;
  }
  .usage-row b{font-size:14px;display:block;}
  .usage-row span{font-size:12.5px;color:var(--ink-soft);}

  .member-row:last-child{border-bottom:none;}
  .member-row .mav{
    width:30px;height:30px;border-radius:50%;background:#EFE7DA;color:var(--ink-mid);
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  }
  .member-row .mtxt b{display:block;font-size:13.5px;}
  .member-row .mtxt span{font-size:12.5px;color:var(--ink-soft);}
  .member-row .mamt{margin-left:auto;font-size:12.5px;color:var(--ink-soft);}

  .reward-list{display:grid;gap:9px;}
  .reward-item{
    display:flex;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;
  }
  .reward-item .th{
    font-size:11.5px;font-weight:700;color:#fff;background:var(--coral);
    padding:3px 8px;border-radius:6px;flex-shrink:0;white-space:nowrap;
  }
  .reward-item b{font-size:14px;display:block;}
  .reward-item span{font-size:12.5px;color:var(--ink-soft);}

  .kit-list{margin:0;padding-left:18px;font-size:14px;color:var(--ink-mid);line-height:1.9;}

  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
  .trust-card{
    background:#F7F7F9;border:1px solid var(--line);border-radius:12px;padding:13px 11px;text-align:center;
  }
  .trust-card .ti{font-size:19.5px;display:block;margin-bottom:5px;}
  .trust-card b{font-size:13px;display:block;margin-bottom:2px;}
  .trust-card span{font-size:11.5px;color:var(--ink-soft);line-height:1.45;}

  .invite-box{
    background:var(--ink);color:#fff;border-radius:14px;padding:20px;
  }
  .invite-box .lbl{font-size:11.5px;font-weight:700;opacity:.65;letter-spacing:.06em;margin-bottom:9px;}
  .invite-box p{font-size:15px;line-height:1.72;margin:0 0 15px;white-space:pre-line;}
  .invite-actions{display:flex;gap:8px;}
  .invite-actions button{
    flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
    color:#fff;padding:11px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;
  }
  .invite-actions button:hover{background:rgba(255,255,255,.24);}

  .cp-cta{
    position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);padding:14px 24px 18px;
  }
  .cp-cta .sum{font-size:13px;color:var(--ink-soft);margin-bottom:9px;text-align:center;}
  .cp-cta .sum b{color:var(--ink);font-weight:700;}
  /* 초안 상태의 마무리 구역 — 떠다니지 않습니다.
     글이 끝나는 자리에 선으로 한 번 끊고, 배경을 바꿔 '여기부터는 내 작업' 임을
     눈으로 알 수 있게 합니다. 같은 동작이 화면 맨 위 고정 바에도 있습니다. */
  .cp-end{
    margin-top:34px;padding:30px 24px 36px;text-align:center;
    background:#F7F7F9;border-top:1px solid var(--line);
  }
  .cp-end b{display:block;font-size:16px;color:var(--ink);margin-bottom:8px;}
  .cp-end span{
    display:block;font-size:13px;color:var(--ink-soft);line-height:1.8;
    margin-bottom:18px;word-break:keep-all;text-wrap:pretty;
  }
  .cp-end .btn-primary{max-width:420px;margin:0 auto;}

  .cp-foot{
    padding:26px 24px 44px;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.8;
    display:flex;flex-direction:column;align-items:center;gap:9px;
  }
  .cp-foot .cp-foot-logo{height:26px;width:auto;display:block;align-self:center;flex:0 0 auto;}
  .cp-foot .cp-foot-brand{font-size:11.5px;letter-spacing:.02em;}
  .cp-foot .relink{
    background:none;border:none;color:var(--coral-dark);font-size:12.5px;
    text-decoration:underline;cursor:pointer;padding:0;margin-top:8px;
  }

  /* ---------- 이야기 본문 ---------- */
  .lead-in{
    font-size:16.5px;line-height:1.9;margin:0 0 26px;color:var(--ink);
    font-weight:500;white-space:pre-line;
  }
  .story-part{margin-bottom:28px;}
  .story-part:last-child{margin-bottom:0;}
  .story-h{
    font-size:16px;font-weight:700;color:var(--coral-dark);margin:0 0 10px;line-height:1.5;
  }
  .story-b{font-size:16px;line-height:1.95;margin:0;color:var(--ink);white-space:pre-line;}
  .closing{
    font-size:16px;line-height:1.9;margin:0;white-space:pre-line;
    padding:18px 20px;background:var(--coral-tint);border:1px solid var(--coral-line);border-radius:12px;
  }

  /* ---------- 호스트 편집 모드 ---------- */
  .edit-bar{
    position:sticky;top:41px;z-index:40;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:#F7F7F9;border-bottom:1px solid var(--line);padding:11px 20px;
  }
  .edit-bar.on{background:#23201D;border-color:#23201D;}
  .edit-bar .eb-txt{font-size:13px;color:var(--ink-soft);flex:1;min-width:180px;}
  .edit-bar.on .eb-txt{color:rgba(255,255,255,.75);}
  .eb-btn{
    border:1px solid var(--line);background:#fff;color:var(--ink-mid);
    padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;
  }
  .eb-btn.primary{background:var(--coral);border-color:var(--coral);color:#fff;}
  .eb-btn:hover{border-color:var(--coral);}
  .edit-bar.on .eb-btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}

  .edit-wrap{position:relative;margin-bottom:6px;}
  .edit-field{
    width:100%;border:1.5px dashed var(--coral-line);border-radius:10px;
    padding:11px 13px;font-family:inherit;font-size:16px;line-height:1.9;
    background:#fff;color:var(--ink);outline:none;resize:none;overflow:hidden;
  }
  .edit-field:focus{border-style:solid;border-color:var(--coral);background:var(--coral-tint);}
  .edit-wrap.changed .edit-field{border-style:solid;border-color:var(--coral);background:var(--coral-tint);}
  .edit-tag{
    position:absolute;top:-9px;right:9px;background:var(--coral);color:#fff;
    font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;
  }
  .host-edited{
    background:linear-gradient(transparent 62%, #FBE3CE 62%);
  }
  .hero-h1-edit .edit-field{font-size:24px;font-weight:700;line-height:1.4;}
  .hero-sub-edit .edit-field{font-size:15px;line-height:1.6;}
  .story-h-edit .edit-field{font-size:16px;font-weight:700;color:var(--coral-dark);line-height:1.5;}
  .invite-edit .edit-field{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4);}
  .page-warn{
    background:#FCF1DE;border-bottom:1px solid #EBD5A8;color:#8A5A0B;
    font-size:13.5px;padding:11px 20px;line-height:1.7;
  }
  .warn-btn{
    display:inline-block;margin-left:6px;background:#8A5A0B;color:#fff;border:none;
    padding:5px 11px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;
  }
  .warn-btn:disabled{opacity:.6;cursor:wait;}

  @media (max-width:480px){
    .intro h1{font-size:25px;}
    .intro-steps{grid-template-columns:1fr;}
    .tier-grid{grid-template-columns:1fr;}
    .trust-grid{grid-template-columns:1fr;}
    .cp-hero h1{font-size:23px;}
  }

    /* 우리 클럽의 미션 — 기부자 유형 카드 아래 */
    .mission-card{background:#F6F6F8;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px}
    .mission-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
    .mission-tag{display:inline-block;background:var(--coral);color:#fff;font-size:12px;font-weight:700;
      padding:4px 10px;border-radius:999px;letter-spacing:.02em}
    .mission-period{font-size:12.5px;color:var(--ink-soft)}
    .mission-fund{margin-left:auto;font-size:12px;font-weight:700;color:var(--coral-dark);
      background:#EDEDF0;border-radius:99px;padding:3px 9px;white-space:nowrap}
    .mission-title{font-size:20px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
    .mission-sum{font-size:15.5px;color:var(--ink-mid);margin:0 0 14px;line-height:1.7}
    .mission-goal{font-size:15.5px;font-weight:600;color:var(--coral-dark,#B5410A);
      background:#fff;border:1px dashed var(--line);border-radius:10px;padding:11px 14px;line-height:1.6}
    .mission-why{font-size:14px;color:var(--ink-soft);margin:12px 2px 0;line-height:1.75}

    /* 인트로 · 동의 화면 */
    .intro .lead2{font-size:16px;color:var(--ink-mid);margin:-6px 0 18px;line-height:1.75}
    .intro-time{display:inline-block;background:#F6F6F8;border:1px solid var(--line);border-radius:999px;
      padding:8px 16px;font-size:14px;color:var(--ink-mid);margin-bottom:22px}
    .intro-time b{color:var(--ink)}
    .c-h{font-size:22px;font-weight:700;margin:6px 0 22px;letter-spacing:-.01em}
    .c-block{display:flex;gap:14px;margin-bottom:26px}
    .c-num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;
      font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
    .c-body{flex:1;min-width:0}
    .c-body h3{font-size:18px;font-weight:700;margin:0 0 6px}
    .c-sub{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px;line-height:1.7}
    /* ★ 좌우 여백을 '모든' 항목에 똑같이 줍니다 (2026.09.21).
       배경이 있는 항목(모두 동의·타인정보 확인)에만 padding 을 주었더니
       그 줄의 체크박스만 안쪽으로 밀려 세로줄이 어긋났습니다.
       배경 유무와 상관없이 같은 자리에서 시작해야 한 덩어리로 읽힙니다. */
    .c-chk{
      display:flex;gap:10px;align-items:flex-start;cursor:pointer;
      padding:11px 13px;margin-bottom:2px;border-radius:11px;
    }
    .c-chk input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--coral)}
    .c-chk span{font-size:14px;color:var(--ink-mid);line-height:1.7}
    .c-chk b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}

    /* 2026.09.16 재단 보완요청으로 필수가 다섯이 되었습니다.
       전문을 그대로 펼쳐두면 읽지 않고 누릅니다. 요지만 보이고
       '자세히 보기' 로 접어 둡니다 — 내용을 숨기는 게 아니라 순서를 두는 것입니다. */
    .c-chk details{margin-top:6px}
    .c-chk summary{
      display:inline-block;font-size:12.5px;font-weight:700;color:var(--coral-dark);
      cursor:pointer;padding:2px 0;list-style:none;
    }
    .c-chk summary::-webkit-details-marker{display:none}
    .c-chk summary::after{content:" ▾";font-size:10px}
    .c-chk details[open] summary::after{content:" ▴"}
    .c-chk details > *:not(summary){
      font-size:13px;line-height:1.85;color:var(--ink-soft);
      margin-top:6px;padding:10px 12px;background:var(--paper);border-radius:9px;
    }
    /* details 안의 본문은 요소 하나로 감싸지 않고 바로 씁니다.
       그래서 열었을 때의 배경을 details 자체에 둡니다. */
    .c-chk details[open]{
      background:var(--paper);border-radius:9px;padding:8px 11px;margin-top:8px;
    }
    .c-chk details[open] summary{margin-bottom:4px}
    .c-chk details i{
      font-style:normal;font-weight:700;color:var(--ink-mid);
      display:inline-block;min-width:88px;
    }
    .c-chk details b{display:inline;font-size:inherit}

    /* 한 번에 켜는 줄 — 아래 항목들과 구분되게 위에 띄웁니다.
       좌우 여백은 .c-chk 가 이미 갖고 있습니다. 여기서 또 주면 어긋납니다. */
    .c-all{
      background:var(--coral-tint);margin-bottom:14px;
      border:1.5px solid var(--coral-line);
      /* 테두리 두께만큼 안쪽으로 들어가지 않게 보정합니다 */
      padding:9.5px 11.5px;
    }
    .c-all b{margin-bottom:2px}
    .c-all span{font-size:13px}

    /* 선택 항목과 '확인' 은 필수와 성격이 다릅니다. 선 하나로 갈라 둡니다. */
    .c-opt{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
    .c-guard{margin-top:12px;background:var(--paper);}
    .c-guard b{color:var(--coral-dark)}

    /* 이름·전화번호가 선택에서 필수로 바뀌었습니다 */
    .pf-field label em.req{color:var(--coral);font-weight:700}
    .c-note{font-size:13.5px;color:var(--ink-soft);line-height:1.7;background:#F6F6F8;
      border-radius:10px;padding:11px 13px;margin:14px 0 0}

    /* 종료 확인 화면 */
    .rv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 16px;margin:4px 0 16px}
    .rv-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
    .rv-row:last-child{border-bottom:none}
    .rv-k{font-size:14.5px;color:var(--ink-soft);flex:0 0 auto}
    .rv-v{font-size:15px;color:var(--ink);text-align:right;font-weight:600}
    .rv-v.warn{color:var(--coral-dark,#B5410A)}
    .rv-note{font-size:14px;color:var(--ink-mid);line-height:1.75;margin:0 2px 14px}
    .rv-picks{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
    .rv-pick{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;
      padding:12px 14px;cursor:pointer;font-family:inherit}
    .rv-pick b{display:block;font-size:15.5px;margin-bottom:3px}
    .rv-pick span{display:block;font-size:13.5px;color:var(--ink-mid);line-height:1.6}
    .rv-pick:hover{border-color:var(--coral)}
    .btn-ghost{width:100%;background:none;border:none;color:var(--ink-soft);font-size:14.5px;
      font-family:inherit;padding:14px;cursor:pointer;text-decoration:underline}

    /* 말풍선 단락 — 작은 화면 가독성 */
    .bubble p{margin:0 0 10px;line-height:1.78}
    .bubble p:last-child{margin-bottom:0}
    .msg-ai .bubble{font-size:16.5px}
    .msg-me .bubble{font-size:16.5px}
    @media (max-width:420px){
      .msg-ai .bubble,.msg-me .bubble{font-size:16px}
      .bubble p{line-height:1.8;margin-bottom:11px}
      .c-h{font-size:20px}
      .intro h1{font-size:25px}
      .mission-title{font-size:20px}
      .story-h{font-size:18.5px}
    }

    .rv-h{font-size:17.5px;font-weight:700;margin:18px 0 6px}
    .rv-pick.on{border-color:var(--coral);background:#F6F6F8}
    .goal-edit{background:none;border:none;color:var(--coral);font-size:12.5px;font-family:inherit;
      cursor:pointer;text-decoration:underline;padding:0 0 0 6px}

    /* 미션 고르기 (인터뷰 안) */
    .mi-grid{display:flex;flex-direction:column;gap:9px;padding:4px 0}
    .mi-pick{position:relative;text-align:left;background:#fff;border:1.5px solid var(--line);
      border-radius:13px;padding:14px 16px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
    .mi-pick:hover{border-color:var(--coral);background:#F6F6F8}
    .mi-fund{display:block;font-size:11.5px;font-weight:700;color:var(--coral-dark);
      letter-spacing:.02em;margin-bottom:3px}
    .mi-pick b{display:block;font-size:16.5px;margin-bottom:4px}
    .mi-pick span{display:block;font-size:14px;color:var(--ink-mid);line-height:1.65}
    .mi-goal{display:block;font-size:13.5px;color:var(--coral-dark,#B5410A);font-style:normal;margin-top:7px}
    .mi-badge{display:inline-block;background:var(--coral);color:#fff;font-size:11.5px;font-weight:700;
      padding:3px 9px;border-radius:999px;margin-bottom:7px;letter-spacing:.02em}

    /* 왜 이 목표인가 — 두 번째 축 */
    .mission-story{font-size:16.5px;color:var(--ink);line-height:1.85;margin:16px 2px 0;white-space:pre-line}

    /* 미션 위젯 — 접힌 상태에서 펼쳐지며 등장 */
    .mi-reveal{overflow:hidden;transition:max-height .4s cubic-bezier(.22,.61,.36,1)}
    .mi-pick{opacity:0;transform:translateY(10px);animation:miIn .38s cubic-bezier(.22,.61,.36,1) forwards}
    @keyframes miIn{to{opacity:1;transform:none}}
    @media (prefers-reduced-motion:reduce){
      .mi-reveal{transition:none}
      .mi-pick{opacity:1;transform:none;animation:none}
    }

/* ── 이어서 하기 ─────────────────────────────────
   인터뷰가 5~7분이라 중간에 끊기는 일이 생깁니다.
   처음 화면에서 눈에 띄되, 새로 시작하는 길을 가리지 않게 작게 둡니다. */
/* 모드 바꾸기 — 처음 참여 ↔ 이어서 하기. 폼 맨 위 오른쪽의 작은 글자 버튼 */
.mode-line{text-align:right;font-size:12.5px;color:var(--ink-soft);margin:0 0 10px;}
.mode-line .relink{background:none;border:none;padding:0 0 0 3px;font:inherit;color:var(--purple);
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.addr-note{font-size:12px;color:var(--ink-soft);line-height:1.6;margin:7px 0 0;}
.resume-line{
  margin-top:18px;font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.7;
}
.resume-line .relink{
  background:none;border:none;padding:0 0 0 4px;font:inherit;color:var(--purple);
  font-weight:700;cursor:pointer;text-decoration:underline;
}

/* ── 디자인 시안 v2 적용분 ─────────────────────────
   알음이(안내 캐릭터)와 배경. 인터뷰를 함께하는 존재라 화면마다 같이 있습니다. */

.guide-char{
  display:block;margin:0 auto 6px;width:180px;height:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.12));
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 움직임을 불편해하는 분도 있습니다. 시스템 설정을 따릅니다. */
@media (prefers-reduced-motion:reduce){
  .guide-char{animation:none;}
}

/* 동의 화면 머리띠 */
.c-band{
  position:relative;overflow:hidden;
  background:#DCEAF5 url("assets/bg-hills.jpg") center/cover;
  padding:26px 22px 60px;color:var(--ink);
}
/* 재단 로고 — 머리띠 맨 위.
   ★ 처음에는 흰 판을 깔았습니다. 배경이 사진이라 안 읽힐까 봐서였는데,
     실제로 올려 보니 언덕 배경이 충분히 옅어 그냥 얹어도 읽힙니다.
     판이 있으면 로고가 배지처럼 보여서 걷어냈습니다.
   크기는 모바일 26px / PC 34px 입니다. 22px 은 PC 에서 너무 작았습니다. */
.c-band .c-logo{
  /* ★ align-self 가 반드시 있어야 합니다 (2026.09.23).
     PC 에서 .c-band 는 세로 flex 입니다. flex 항목은 기본으로 가로가 늘어나서
     (align-items: stretch) 로고가 139px → 424px 로 찌그러졌습니다.
     처음엔 width:max-content 로 막혀 있었는데, 흰 판을 걷어내면서 제가
     width:auto 로 바꿔 그 보호막을 없앴습니다. 비율이 4.1 에서 12.5 가 됐습니다.
     이미지 태그에 width/height 를 함께 적어 두면 검사로도 잡힙니다. */
  display:block;height:26px;width:auto;align-self:flex-start;margin:0 0 16px;
}
/* .c-band .tag ('환영해요' 배지) 는 2026.09.22 에 뺐습니다 —
   그 자리에 재단 로고가 오면서 배지가 하나 더 붙는 모양이 됐습니다. */
.c-band .c-h{
  font-size:23px;line-height:1.32;margin:12px 0 8px;font-weight:800;letter-spacing:-.02em;
}
.c-band .c-lead{
  font-size:14px;margin:0;line-height:1.5;max-width:63%;color:var(--ink-2);
}
.c-band .c-char{
  position:absolute;right:6px;bottom:0;width:126px;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

/* 인터뷰 화면 — 배경을 아주 옅게 깔아 종이 느낌을 줍니다 */
#screen-chat{
  background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.92)),
             #F4F6F8 url("assets/bg-portrait.jpg") center/cover fixed;
}

/* 호스트 표시 이름 편집 — 한 줄짜리라 본문 편집 필드보다 좁게 둡니다 */
.name-edit{display:inline-block;min-width:80px;}

/* 인터뷰 좌·우 레일 — 좁은 화면에서는 없는 셈입니다.
   숨길 때 display:none 을 쓰는 이유: visibility 로 두면 자리를 차지해
   작은 화면에서 스크롤이 늘어납니다. */
.iv-rail{display:none;}

/* ---------- 생성 중 · 도넛 진행 표시 ----------
   --deg 만 바꾸면 채워집니다. 안쪽 흰 원이 도넛 구멍입니다. */
.ld-ring{
  position:relative;width:150px;height:150px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
}
.ld-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px dashed #D8D8E0;animation:spinring 12s linear infinite;
}
.ld-ring::after{
  content:"";position:absolute;inset:10px;border-radius:50%;
  background:conic-gradient(var(--ink) var(--deg,0deg), #ECECF1 0);
}
.ld-pct{
  position:relative;z-index:1;width:calc(100% - 38px);height:calc(100% - 38px);
  border-radius:50%;background:#fff;box-shadow:inset 0 2px 8px rgba(0,0,0,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.ld-pct small{font-size:16px;font-weight:700;margin-left:2px;}
@keyframes spinring{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ld-ring::before{animation:none;} }
#build-progress{margin-top:14px;font-size:12.5px;color:var(--ink-soft);}

/* ---------- 완료 · 다섯 유형이 모인 그림 ---------- */
.done-cast{position:relative;display:flex;align-items:flex-end;justify-content:center;margin-bottom:22px;}
.done-cast img{width:62px;height:auto;object-fit:contain;margin-right:-6px;}
.done-cast img.lead{width:68px;position:relative;z-index:1;}
.done-cast i{position:absolute;width:8px;height:8px;border-radius:50%;animation:twinkle 1.8s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .done-cast i{animation:none;opacity:.7;} }

/* 인터뷰 중 알음이 — 말풍선 옆 작은 아바타 */
.ai-name i{
  display:inline-block;width:18px;height:18px;border-radius:50%;
  background:#8ECBF5 url("assets/char-guide.png") center/165% no-repeat;
  background-position:center 30%;
}

/* ============================================================
   PC — 화면이 넓을 때
   ------------------------------------------------------------
   디자인 시안 PC 판(2026.09.11)을 반영했습니다.
   모바일 마크업 한 벌을 그대로 쓰고 배치만 바꿉니다. 마크업이 둘이 되면
   한쪽만 고치는 일이 반드시 생깁니다.

   시안에는 목표 금액·달성률·클럽원 수 위젯이 있었는데 넣지 않았습니다.
   앞서 재단과 삭제하기로 정한 것들이라, 되살리면 채울 수 없는 자리가 생깁니다.
   그 자리는 참여 방식과 리워드가 대신합니다.
   ============================================================ */

@media (min-width:960px){

  /* ── 클럽 페이지 ── */
  .campaign{background:#F4F4F6;}
  .cp{max-width:1200px;background:transparent;padding:0 0 60px;}

  /* 히어로는 폭을 다 쓰는 띠가 됩니다.
     모바일은 캐릭터가 바닥까지 내려오지만, PC 에서는 글과 나란히 섭니다. */
  .cp-hero{
    min-height:280px;border-radius:0 0 28px 28px;
    padding:34px 48px 0;margin-bottom:0;
  }
  .cp-hero .brandline{font-size:12.5px;margin-bottom:18px;}
  .cp-hero h1{font-size:38px;max-width:58%;margin:14px 0 10px;}
  .cp-hero .sub{font-size:16.5px;max-width:50%;}
  .cp-hero .hero-char{width:250px;right:48px;}
  .cp-hero .photo-slot{max-width:52%;height:150px;}
  .cp-hero .hero-pad{height:40px;}
  /* PC 는 캐릭터가 250px 에 오른쪽 여백 48px 이라 비워야 할 폭이 다릅니다 */
  .cp-hero .tags{margin-top:14px;max-width:calc(100% - 330px);}
  .cp-hero.has-photo .tags{max-width:calc(100% - 200px);}

  /* ── 2단 ──
     본문 + 오른쪽 참여 패널. 패널은 스크롤을 따라옵니다. */
  .cp-body{
    display:grid;grid-template-columns:1fr 380px;gap:56px;
    align-items:start;padding:36px 48px 0;
  }
  .cp-main, .cp-side{min-width:0;}
  .cp-side{
    /* 고정된 초안 바 아래에서 멈춥니다. --draft-h 는 app.js 가 실측해 넣습니다
       (초안 바가 없는 공개 화면에서는 0 이라 예전과 같습니다). */
    position:sticky;top:calc(var(--draft-h, 0px) + 24px);
    background:#fff;border-radius:20px;padding:6px 4px 10px;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
  }
  .cp-side .cp-sec{padding-left:22px;padding-right:22px;}
  .cp-side .cp-sec:first-child{padding-top:22px;}
  .cp-side .sec-h{font-size:17px;}

  /* 본문 카드 */
  .cp-main{background:#fff;border-radius:20px;padding:10px 34px 26px;
    box-shadow:0 10px 30px rgba(0,0,0,.07);}
  .cp-main .story-b{font-size:16.5px;line-height:1.85;}
  .cp-main .sec-h{font-size:21px;}

  /* 호스트 바는 본문 카드 위에 */
  .cp-hostbar{
    max-width:1200px;margin:0 auto;border-radius:0;
    padding:18px 48px;background:transparent;border-bottom:none;
  }

  /* 아래 고정 CTA — PC (2026.09.28)
     예전에는 본문 폭(1200px)에 묶여 있어서, 넓은 화면에서 띠가 양옆에서 뚝 잘리고
     위아래 여백도 0 으로 덮여 버튼이 바닥에 붙어 있었습니다.
     이제 띠는 화면 끝에서 끝까지 깔고, 내용만 본문 격자(1200px) 안에 맞춥니다.
     문구는 왼쪽, 버튼은 오른쪽 — 사이드바의 '정기/일시' 고르는 곳과 같은 세로선에 버튼이 섭니다. */
  .campaign{overflow-x:clip;}   /* 100vw 띠가 세로 스크롤바 폭만큼 가로 스크롤을 만들지 않게. hidden 은 sticky 를 깹니다 */
  .cp-cta{
    width:100vw;box-sizing:border-box;margin:28px 0 0 calc(50% - 50vw);
    /* 본문 격자와 같은 두 칸 — 버튼이 오른쪽 사이드바(JOIN THE CLUB)와 정확히 같은 폭·같은 세로선에 섭니다 */
    display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:56px;align-items:center;
    padding:14px max(48px, calc((100vw - 1200px) / 2 + 48px));
    background:rgba(255,255,255,.94);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.05);
  }
  .cp-cta .sum{margin:0;text-align:left;font-size:14.5px;}
  .cp-cta .btn-primary{width:100%;min-width:0;padding:15px 24px;}

  .cp-foot{max-width:1200px;margin:0 auto;padding:30px 48px 0;}
  .cp-ainote{max-width:1200px;margin:0 auto;}

  /* ── 인터뷰 · 3단 ──
     왼쪽에 알음이와 진행 상황, 가운데에 대화, 오른쪽에 무엇이 만들어지는지.
     대화는 넓어지면 오히려 읽기 나빠지므로 가운데 폭은 그대로 묶어 둡니다.
     화면을 100vh 로 고정하고 가운데만 스크롤시킵니다 — 그래야 레일이 따라 흐르지 않습니다. */
  .wrap{max-width:680px;}
  .chat{max-width:620px;margin:0 auto;}
  .composer-inner{max-width:620px;}

  #screen-chat.active{
    display:grid;grid-template-columns:300px minmax(0,1fr) 300px;
    height:100vh;overflow:hidden;
    background:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68)),
               #F4F6F8 url("assets/bg-portrait.jpg") center/cover;
  }
  .iv-rail{
    display:flex;flex-direction:column;gap:22px;
    padding:40px 32px;overflow-y:auto;min-height:0;
  }
  .iv-char{width:150px;height:auto;object-fit:contain;animation:bob 3.2s ease-in-out infinite;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));}
  .iv-meter b{display:block;font-size:12px;color:var(--ink-soft);letter-spacing:.06em;margin-bottom:8px;}
  .iv-pct{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;
    font-variant-numeric:tabular-nums;display:block;}
  .iv-pct small{font-size:18px;margin-left:2px;}
  /* ★ 이름을 .iv-left 에서 .iv-remain 으로 바꿨습니다 (2026.09.21).
     좌측 레일이 <aside class="iv-rail iv-left"> 라서 같은 이름을 쓰고 있었고,
     여기 있는 display:block 이 뒤에 와서 레일의 display:flex 를 덮었습니다.
     그 바람에 레일이 flex 가 아니었고, 안내문의 margin-top:auto 도
     .iv-phases 의 flex:1 도 아무 효과가 없었습니다.
     화면상으로는 "왜인지 안내문이 목록 바로 밑에 붙는다" 로만 보입니다. */
  .iv-remain{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-soft);}
  /* 주제 목록 — 다섯 줄 중 "클럽장으로 나서는 이유" 처럼 긴 것은 두 줄이 됩니다.
     줄간격을 정해두지 않아서 두 줄짜리가 붙어 보였고, 항목 사이 간격(12px)보다
     한 항목 안의 두 줄이 더 좁아 어디까지가 한 항목인지 읽히지 않았습니다.
     줄간격을 띄우고 항목 간격을 그보다 넓게 둡니다. 점은 첫 줄에 맞춥니다. */
  /* 항목 사이(22px)를 한 항목 안의 줄 간격(20.9px)보다 넓게 둡니다.
     반대가 되면 두 줄짜리 항목이 두 개처럼 읽힙니다. */
  .iv-phases{display:flex;flex-direction:column;gap:22px;}
  .iv-ph{
    display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-soft);
    line-height:1.55;word-break:keep-all;text-wrap:pretty;
  }
  .iv-ph i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none;margin-top:5px;}
  .iv-ph.done i{background:var(--ink-soft);}
  .iv-ph.now i{background:var(--ink);box-shadow:0 0 0 3px rgba(38,38,43,.12);}
  .iv-ph.now{color:var(--ink);font-weight:700;}
  /* 안내문은 좌측 열 '맨 아래' 에 붙습니다.
     예전에는 margin-top:auto 하나로 밀었는데, 레일이 overflow-y:auto 라
     주제 목록이 길어지면 밀리지 않고 목록 바로 밑에 붙어 버렸습니다.
     주제 목록이 남는 공간을 먹게 해서 구조로 밀어 내립니다. */
  .iv-phases{flex:1 1 auto;}
  .iv-tip{
    flex:0 0 auto;margin:0;padding-top:16px;border-top:1px solid rgba(38,38,43,.10);
    font-size:12.5px;color:var(--ink-soft);line-height:1.7;
  }

  .iv-center{
    display:flex;flex-direction:column;min-height:0;
    background:rgba(255,255,255,.55);
    border-left:1px solid rgba(255,255,255,.6);border-right:1px solid rgba(255,255,255,.6);
  }
  .iv-center .interview{flex:1;min-height:0;overflow-y:auto;padding:24px 0 0;}
  .iv-center .composer{position:static;background:transparent;padding:10px 0 26px;}

  /* 상단 진행 막대는 PC 에서 지웁니다.
     왼쪽 레일에 같은 값(퍼센트·주제 목록)이 이미 있어서, 화면 위아래로
     같은 정보가 두 번 나옵니다. 좁은 화면에는 레일이 없으므로 거기서는 그대로 둡니다.
     대신 지금 주제 이름만 가운데 칸 머리에 한 줄로 남깁니다 — 대화를 보다가
     "지금 무슨 얘기 중이었지" 를 확인할 자리는 필요합니다. */
  .iv-center .phase-track{display:none;}
  .iv-center .phase-label{
    justify-content:flex-start;gap:10px;margin-bottom:22px;
    padding-bottom:12px;border-bottom:1px solid rgba(38,38,43,.08);
  }
  .iv-center .phase-label .phase-pct,
  .iv-center .phase-label .phase-dot,
  .iv-center .phase-label .phase-left{display:none;}
  .iv-center .phase-label .phase-name{font-size:15px;font-weight:700;color:var(--ink);}
  .iv-center .phase-label .phase-count{
    font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
    background:rgba(255,255,255,.7);border-radius:999px;padding:3px 9px;
  }

  .iv-rh{display:block;font-size:12px;color:var(--ink-soft);letter-spacing:.06em;font-weight:700;}
  .iv-right{gap:14px;}
  .iv-card{background:rgba(255,255,255,.8);border-radius:16px;padding:16px 18px;}
  .iv-card b{display:block;font-size:14.5px;margin-bottom:4px;}
  .iv-card span{font-size:12.5px;color:var(--ink-soft);line-height:1.5;}

  /* 인트로 — 알음이를 조금 키웁니다 */
  .guide-char{width:220px;}
  .intro h1{font-size:34px;}

  /* ── 동의 · 2단 ──
     왼쪽은 언덕 배경 위 환영 인사, 오른쪽은 흰 바탕의 입력·동의. */
  /* ★ 2026.09.21 — 왼쪽은 화면에 고정, 오른쪽만 스크롤합니다.
     동의 항목이 다섯으로 늘면서 오른쪽이 길어졌는데, 페이지 전체가 함께
     스크롤되니 왼쪽 인사와 알음이가 위로 사라지고 흰 칸만 남았습니다.
     왼쪽을 화면 높이에 붙여 두면 어디에 있는 화면인지가 계속 보입니다. */
  #screen-consent.active{
    display:grid;grid-template-columns:520px minmax(0,1fr);
    height:100vh;align-items:stretch;overflow:hidden;
  }
  .c-band .c-logo{height:34px;margin-bottom:18px;}
  .c-band{
    /* 예전에는 여기서 680px 로 묶고 가운데 정렬했습니다.
       2단에서는 왼쪽 칸을 꽉 채워야 해서 그 두 줄을 되돌립니다. */
    max-width:none;margin:0;
    padding:56px 48px;border-radius:0;
    display:flex;flex-direction:column;justify-content:flex-start;
    /* 스크롤하지 않습니다. 세로가 짧은 화면에서 인사말이 잘리는 것보다
       알음이가 조금 작게 보이는 편이 낫습니다. */
    height:100%;min-height:0;overflow:hidden;
  }
  .c-band .c-h{font-size:34px;line-height:1.28;margin:18px 0 12px;}
  .c-band .c-lead{font-size:16px;max-width:none;line-height:1.55;}
  .c-band .c-char{width:300px;right:24px;}
  #screen-consent .intro{
    /* min-width:0 이 없으면 칸보다 넓어집니다. 그리드 항목의 기본 최소 폭은
       '내용이 줄어들 수 있는 한계'라서, 입력 두 칸이 칸 밖으로 비어져 나옵니다. */
    max-width:none;min-width:0;background:#fff;padding:56px 64px 40px;
    display:flex;flex-direction:column;
    /* 스크롤은 이 칸에서만 일어납니다 */
    height:100%;min-height:0;overflow-y:auto;
  }
  /* margin-top:auto 로 버튼을 바닥에 붙이던 것을 뺐습니다.
     이 칸이 스크롤 영역이 되면 '바닥' 이 화면 바닥이 아니라 내용 끝이라,
     내용이 짧을 때만 붙고 길 때는 엉뚱한 자리에 떠 보입니다. */
  #screen-consent .intro .btn-primary{margin-top:28px;}

  /* ── 생성 중 · 2단 ── */
  #screen-loading.active{
    min-height:100vh;display:flex;align-items:center;
    background:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68)),
               #F4F6F8 url("assets/bg-portrait.jpg") center/cover;
  }
  .loading{
    max-width:1100px;width:100%;padding:60px 40px;text-align:left;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px;
  }
  .ld-ring{width:220px;height:220px;margin:0 0 30px;}
  .ld-pct{font-size:52px;}
  .ld-pct small{font-size:22px;}
  .loading h3{font-size:30px;margin:0 0 10px;letter-spacing:-.02em;}
  .loading p{font-size:16px;color:var(--ink-mid);line-height:1.55;}
  .ld-right{background:#fff;border-radius:20px;padding:28px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);}
  #loading-steps{margin-top:0;font-size:15px;line-height:2.1;}

  /* ── 완료 · 2단 ── */
  #screen-done.active{
    min-height:100vh;display:flex;align-items:center;
    background:#F4F6F8 url("assets/bg-portrait.jpg") center/cover;
  }
  .done-wrap{
    max-width:1100px;width:100%;padding:60px 40px;text-align:left;
    /* minmax(0,1fr) 이어야 두 칸이 정확히 반반입니다.
       그냥 1fr 로 두면 캐릭터 다섯이 들어간 칸의 최소 폭이 우선해서 한쪽이 넓어집니다. */
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;
  }
  /* ★ 캐릭터 다섯이 제 칸을 넘어 오른쪽 글에 닿고 있었습니다.
     칸 하나가 (1100 - 좌우여백 80 - gap)/2 ≈ 490px 인데,
     118×4 + 132 에서 겹침 40 을 빼도 564px 이라 74px 이 삐져나왔습니다.
     가운데 정렬이라 그 절반이 오른쪽 칸을 침범했고, gap 40px 을 거의 다 먹었습니다.
     그림 크기를 칸 안에 들어오게 줄이고 gap 도 넓힙니다. */
  .done-cast{height:auto;margin-bottom:0;max-width:100%;}
  .done-cast img{width:96px;margin-right:-8px;}
  .done-cast img.lead{width:108px;}
  .done-cast i{width:10px;height:10px;}
  /* 한국어는 단어 안에서 끊기면 읽기 나빠집니다. 어절 단위로 넘깁니다. */
  .done-wrap h2{font-size:36px;line-height:1.3;margin:0 0 16px;word-break:keep-all;text-wrap:pretty;}
  .done-wrap p{font-size:17px;line-height:1.6;}
  .done-eta{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.08);
    font-size:14px;padding:10px 18px;}

  /* ── 확인 화면 ──
     PC 판을 만들 때 동의·인터뷰·생성 중·완료 네 개만 손대고 이 화면이 빠져 있었습니다.
     그래서 1280 에서 혼자 가운데 680px 한 단으로 남아 위아래가 크게 비었습니다.
     2단으로 쪼갤 내용이 아니라서, 앞뒤 화면과 같은 배경 위에 카드 하나를
     세로 가운데로 세웁니다. */
  #screen-review.active{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68)),
               #F4F6F8 url("assets/bg-portrait.jpg") center/cover;
  }
  #screen-review .wrap{
    max-width:720px;width:100%;margin:0 auto;
    background:#fff;border-radius:24px;padding:44px 48px 40px;
    box-shadow:0 14px 40px rgba(0,0,0,.09);
  }
  #screen-review .c-h{font-size:28px;margin:14px 0 20px;}
  #screen-review .rv-card{padding:4px 22px;margin:0 0 18px;}
  #screen-review .rv-row{padding:15px 0;}
  #screen-review .rv-k{font-size:15px;}
  #screen-review .rv-v{font-size:16px;}
  #screen-review .rv-note{font-size:14.5px;}
  #screen-review .btn-primary{margin-top:6px;}
}

/* 아주 넓은 화면에서 사이드바가 본문에서 너무 떨어지지 않게 */
@media (min-width:1400px){
  .cp-body{gap:64px;}
  .cp-cta{column-gap:64px;}
}

/* 공개 화면의 로딩·안내 문구. 본문이 1200px 로 넓어졌으니
   이 문구만 가운데 카드로 묶어 둡니다. */
@media (min-width:960px){
  .pub-state{
    max-width:520px;margin:48px auto;background:#fff;border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
  }
}


/* ============================================================
   작은 입력 창 — 오프라인 키트 신청 · 클럽원 등록 (2026.09.28)
   ============================================================ */
.cp-sheet-mask{position:fixed;inset:0;z-index:1000;background:rgba(20,20,24,.46);
  display:flex;align-items:flex-end;justify-content:center;}
body.sheet-open{overflow:hidden;}
.cp-sheet{position:relative;width:100%;max-width:460px;max-height:92vh;overflow:auto;box-sizing:border-box;
  background:#fff;border-radius:18px 18px 0 0;padding:26px 22px 22px;color:var(--ink,#26262B);
  font-size:14px;line-height:1.6;}
@media (min-width:640px){
  .cp-sheet-mask{align-items:center;}
  .cp-sheet{border-radius:18px;}
}
.cp-sheet-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:none;
  font-size:24px;line-height:1;color:var(--ink-soft,#888);cursor:pointer;}
.cp-sheet h3{font-size:18px;font-weight:800;margin:0 0 6px;padding-right:28px;}
.cp-sheet .sh-lead{color:var(--ink-mid,#555);margin:0 0 16px;font-size:13.5px;}
.cp-sheet .pf-field{margin-bottom:12px;}
.cp-sheet .pf-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;}
.cp-sheet .pf-field input,.cp-sheet .pf-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;
  padding:11px 12px;border:1px solid var(--line,#E4E0D8);border-radius:10px;background:#fff;}
.cp-sheet .pf-field textarea{min-height:70px;resize:vertical;}
.cp-sheet .pf-field input:focus,.cp-sheet .pf-field textarea:focus{outline:none;border-color:var(--coral,#F26B3A);}
.cp-sheet .sh-chk{display:flex;gap:9px;align-items:flex-start;font-size:13px;margin:14px 0 4px;cursor:pointer;}
.cp-sheet .sh-chk input{margin-top:3px;flex:none;width:17px;height:17px;}
.cp-sheet details{font-size:12.5px;color:var(--ink-soft,#777);margin:4px 0 0 26px;}
.cp-sheet details i{font-style:normal;font-weight:700;color:var(--ink-mid,#555);margin-right:4px;}
.cp-sheet .sh-msg{min-height:20px;font-size:13px;color:#B3261E;margin:10px 0 0;}
.cp-sheet .sh-msg.ok{color:#1E7B4A;}
.cp-sheet .btn-primary{width:100%;margin-top:12px;}
.cp-sheet .sh-sub{display:block;text-align:center;font-size:12px;color:var(--ink-soft,#888);margin-top:10px;}

/* 주소 검색 (Kakao 우편번호) */
.pc-row{display:flex;gap:8px;align-items:stretch;}
.pc-row input{flex:1;min-width:0;}
.pc-btn{flex:none;border:1px solid var(--line,#E4E0D8);background:#fff;border-radius:10px;padding:0 14px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ink,#26262B);cursor:pointer;white-space:nowrap;}
.pc-btn:hover{border-color:var(--coral,#F26B3A);}
.pc-btn:disabled{opacity:.6;cursor:default;}
.cp-sheet.pc-sheet{padding:18px 12px 12px;max-width:520px;}
.cp-sheet.pc-sheet h3{padding-left:8px;}
.pc-frame{width:100%;height:min(520px,72vh);}

/* ============================================================
   오프라인 키트 카드 · 댓글 (2026.09.28)
   ============================================================ */
.reward-card[hidden]{display:none;}
.rc-apply{margin-top:10px;border:1.5px solid var(--ink,#26262B);background:#fff;color:var(--ink,#26262B);
  border-radius:10px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.rc-apply:hover{background:var(--ink,#26262B);color:#fff;}
.rc-apply[data-done]{border-color:var(--line);color:var(--ink-soft);cursor:default;background:#fff;}
.rc-login{text-align:left;margin:12px 0 0;}

.cp-comments .cm-empty{font-size:13.5px;color:var(--ink-soft);margin:0;}
.cm-list{list-style:none;margin:0;padding:0;}
.cm-item{padding:14px 0;border-top:1px solid var(--line);}
.cm-item:first-child{border-top:none;padding-top:4px;}
.cm-head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;}
.cm-head b{font-size:13.5px;color:var(--ink);}
.cm-role{font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;background:var(--t-light,#F2F2F4);color:var(--t-deep,#26262B);}
.cm-del{margin-left:auto;background:none;border:none;font:inherit;font-size:12px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;}
.cm-body{font-size:14.5px;line-height:1.7;color:var(--ink-mid);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;}
.cm-form{margin:0 0 18px;}
.cm-form textarea{width:100%;box-sizing:border-box;min-height:84px;font:inherit;font-size:15px;line-height:1.6;
  padding:12px 13px;border:1px solid var(--line);border-radius:12px;resize:vertical;background:#fff;}
.cm-form textarea:focus{outline:none;border-color:var(--coral,#F26B3A);}
.cm-form .cm-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12.5px;color:var(--ink-soft);}
.cm-form .cm-row .sp{flex:1;}
.cm-form .cm-row .relink{background:none;border:none;padding:0;font:inherit;color:var(--purple);font-weight:700;cursor:pointer;text-decoration:underline;}
.cm-form .cm-send{border:none;background:var(--ink,#26262B);color:#fff;border-radius:10px;padding:10px 18px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.cm-form .cm-send:disabled{opacity:.5;cursor:default;}
.cm-gate{background:#F6F6F8;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;
  color:var(--ink-mid);margin:0 0 18px;line-height:1.7;}
.cm-gate .relink{background:none;border:none;padding:0 0 0 4px;font:inherit;color:var(--purple);font-weight:700;cursor:pointer;text-decoration:underline;}
.cm-msg{font-size:12.5px;color:#B3261E;min-height:18px;margin-top:6px;}
@media (min-width:960px){
  /* 본문 칸 아래에 같은 카드 모양으로. 오른쪽 칸은 비워 둡니다 */
  .cp-body > .cp-comments{grid-column:1;background:#fff;border-radius:20px;padding:26px 34px;
    box-shadow:0 10px 30px rgba(0,0,0,.07);border-bottom:none;margin-top:4px;}
}

/* 본문 카드 안의 세로선 맞추기 (2026.09.28)
   카드 안 요소들의 왼쪽 선이 34 · 58 · 82px 로 제각각이라 삐죽빼죽해 보였습니다.
   (기부자 줄은 PC 규칙의 48px 여백, 유형·사업 카드와 각 절은 모바일용 24px 여백을 그대로 달고 있었음)
   PC 에서는 카드 안쪽 여백 하나(40px)만 두고, 안의 요소는 좌우 여백을 갖지 않습니다.
   상자(AI 안내·유형·사업·변화)는 그 선에 테두리를 맞추고, 글은 상자 안쪽 여백만큼 들어갑니다. */
@media (min-width:960px){
  .cp-main{padding:10px 40px 32px;}
  .cp-main > .cp-hostbar{padding:22px 0 18px;margin:0;max-width:none;}
  .cp-main > .cp-ainote{margin-left:0;margin-right:0;max-width:none;}
  .cp-main > .cp-facts{padding-left:0;padding-right:0;}
  .cp-main > section.cp-sec{padding-left:0;padding-right:0;}
  /* 카드 맨 끝의 구분선 — 다음에 올 것이 없는데 선만 남아 있었습니다 */
  .cp-main > section.cp-sec:last-child{border-bottom:none;padding-bottom:6px;}
}

/* ============================================================
   클럽 소개 카드 (2026.09.28) — 유형 이름표 → 클럽 소개
   바탕은 클럽장 유형색. 제목은 질문에 답하는 문장이고, 본문은 읽히는 크기로.
   ============================================================ */
.cp-intro{gap:14px;}
.cp-intro .fact{background:var(--t-light,#F2F2F4);border:none;border-radius:18px;padding:22px 22px 20px;}
.cp-intro .fk{font-size:14px;font-weight:800;color:var(--t-deep,#26262B);letter-spacing:-.01em;
  text-transform:none;margin-bottom:14px;opacity:.9;}
.cp-intro .fi-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.cp-intro .fi-img{width:64px;height:64px;flex:none;object-fit:contain;
  background:rgba(255,255,255,.6);border-radius:50%;padding:4px;box-sizing:border-box;}
.cp-intro .fico{width:48px;height:48px;font-size:22px;background:#fff;}
.cp-intro .fv{font-size:21px;font-weight:800;color:var(--ink,#26262B);letter-spacing:-.02em;margin:0 0 4px;display:block;}
.cp-intro .fen{display:block;margin:0;color:var(--t-deep,#555);opacity:.7;}
.cp-intro .fact-mission .fv{margin-bottom:10px;}
.cp-intro .ffund{background:rgba(255,255,255,.75);color:var(--t-deep,#555);font-size:12px;padding:3px 10px;margin-bottom:12px;}
.cp-intro .fx{font-size:16px;line-height:1.75;color:var(--ink,#26262B);margin:0;white-space:normal;word-break:keep-all;}
.cp-intro .fwhy{margin-top:14px;padding:14px 16px;border-top:none;border-radius:12px;
  background:rgba(255,255,255,.7);font-size:14.5px;line-height:1.75;color:var(--ink-mid,#444);word-break:keep-all;}
.cp-intro .fwhy b{display:block;font-size:12.5px;color:var(--t-deep,#555);margin-bottom:4px;}
/* PC 에서도 위아래로 쌓습니다. 본문 칸이 600px 남짓이라 두 칸으로 나누면
   한 줄에 열 글자 남짓씩 끊겨 '소개' 가 아니라 '표' 처럼 읽혔습니다 (실측 확인). */
@media (min-width:960px){
  .cp-intro .fact{padding:26px 28px 24px;}
}

/* 소제목 글자 크기 통일 (2026.09.29 재단 요청)
   절 제목(— 제가 아름다운재단에 기부하는 이유)은 13.5px, 그 아래 이야기 소제목(채널을 돌리다 본 단어)은
   16~18.5px 이라 같은 층위의 제목이 서로 다른 크기로 보였습니다. 둘을 같은 크기로 맞춥니다. */
.cp .kicker{font-size:16px;letter-spacing:.02em;}
.cp .story-h{font-size:16px;}
@media (max-width:420px){ .cp .story-h{font-size:16px;} }
@media (min-width:960px){ .cp .kicker, .cp .story-h{font-size:17px;} }

/* ============================================================
   빠른 인터뷰 — 보기 고르기 (2026.09.29, beautiful-26-02.html)
   ============================================================ */
.qk-reveal{overflow:hidden;transition:max-height .45s ease;}
.qk-opts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0;}
.qk-opt{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
  padding:11px 16px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;line-height:1.35;text-align:left;
  opacity:0;animation:qkIn .35s ease forwards;transition:border-color .15s,background .15s,color .15s;}
.qk-opt:hover{border-color:var(--coral);background:#F6F6F8;}
.qk-opt.sel{border-color:var(--coral);background:var(--coral);color:#fff;}
.qk-opt.qk-other{border-style:dashed;color:var(--ink-mid);}
.qk-opt.qk-other.sel{background:#F6F6F8;color:var(--coral-dark);border-style:solid;}
.qk-own{margin-top:10px;}
.qk-own textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.6;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:14px;resize:none;background:#fff;}
.qk-own textarea:focus{outline:none;border-color:var(--coral);}
.qk-go{margin-top:12px;width:100%;border:none;border-radius:14px;padding:14px 18px;background:var(--ink,#26262B);
  color:#fff;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;}
.qk-go:disabled{opacity:.35;cursor:default;}
@keyframes qkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 유형 카드 — 이미지 + 이름 + 한 줄 설명. 유형색 바탕 */
.qk-chars{display:grid;grid-template-columns:1fr;gap:9px;padding:4px 0;}
@media (min-width:640px){ .qk-chars{grid-template-columns:1fr 1fr;} }
.qk-char{display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid transparent;
  background:var(--cl);border-radius:16px;padding:12px 14px;font:inherit;cursor:pointer;
  opacity:0;animation:qkIn .35s ease forwards;transition:border-color .15s,transform .15s;}
.qk-char:hover{border-color:var(--c);transform:translateY(-1px);}
.qk-char img{width:56px;height:56px;flex:none;object-fit:contain;background:rgba(255,255,255,.65);border-radius:50%;padding:3px;box-sizing:border-box;}
.qk-char i{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;font-style:normal;background:#fff;border-radius:50%;}
.qk-char b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px;}
.qk-char em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-mid);line-height:1.5;}
.qk-char small{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.45;}
@media (prefers-reduced-motion: reduce){ .qk-opt,.qk-char{animation:none;opacity:1;} }
/* 동적(추가) 질문 표시 — 9단계 밖이고 건너뛰어도 된다는 것을 말풍선에 붙입니다 */
.bubble.qk-extra::before{content:"추가 질문 · 건너뛰어도 돼요";display:block;width:max-content;
  font-size:11.5px;font-weight:700;color:var(--coral-dark);background:#EDEDF0;border-radius:99px;
  padding:2px 9px;margin-bottom:7px;}
.phase-label .qk-extra-tag{display:none;}

/* 빠른 인터뷰 — 페이지 재료 (2026.09.29) */
.bubble .qk-feed{display:block;width:max-content;max-width:100%;font-size:11.5px;font-weight:700;
  color:var(--purple,#6D4AE0);background:#F1ECFF;border-radius:99px;padding:2px 9px;margin-bottom:7px;}
.qk-mats{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.qk-mats li{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.8);border-radius:12px;padding:10px 12px;
  border:1.5px solid transparent;transition:border-color .2s,background .2s;}
.qk-mats li i{width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800;color:#fff;margin-top:1px;}
.qk-mats li.ok i{background:var(--coral);border-color:var(--coral);}
.qk-mats li.now{border-color:var(--coral);background:#fff;}
.qk-mats li b{display:block;font-size:13.5px;}
.qk-mats li small{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:1px;}
.iv-rh em{font-style:normal;color:var(--coral-dark);margin-left:4px;}
.qk-mats-strip{font-size:12.5px;color:var(--ink-soft);margin:-2px 0 10px;}
.qk-mats-strip b{color:var(--ink);}
@media (min-width:960px){ .qk-mats-strip{display:none;} }
.qk-opts.qk-col{flex-direction:column;align-items:stretch;}
.qk-opts.qk-col .qk-opt{border-radius:14px;}
.qk-typecard{display:flex;align-items:center;gap:14px;background:var(--cl);border-radius:18px;padding:14px 16px;margin-bottom:10px;}
.qk-typecard img{width:72px;height:72px;object-fit:contain;background:rgba(255,255,255,.65);border-radius:50%;padding:4px;box-sizing:border-box;}
.qk-typecard b{display:block;font-size:17px;}
.qk-typecard em{display:block;font-style:normal;font-size:14px;color:var(--ink-mid);line-height:1.5;margin-top:2px;}

/* 이 클럽에 함께하면 — 확정 정보 목록 */
.join-facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.join-facts li{position:relative;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink-mid);word-break:keep-all;}
.join-facts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--coral);font-weight:800;}
/* 챕터 구분선 — 대화를 끊지 않고 지금 어디쯤인지만 */
.qk-chapter{display:flex;flex-direction:column;align-items:center;gap:2px;margin:18px 0 10px;text-align:center;}
.qk-chapter b{font-size:12.5px;font-weight:800;color:var(--coral-dark);background:#EDEDF0;border-radius:99px;padding:3px 12px;}
.qk-chapter span{font-size:11.5px;color:var(--ink-soft);}
.qk-opt.qk-decline{border-style:dashed;color:var(--ink-soft);}

/* 히어로 제목·부제 — 마지막 한 글자('요')가 혼자 다음 줄로 떨어지지 않게 (외부 테스트) */
.cp-hero h1,.cp-hero .sub{word-break:keep-all;text-wrap:balance;}

/* ── 동의 — 한 줄 표시 (2026.09.30 재단 요청) ──────────────
   필수만 받고, 항목마다 한 줄. 전문은 오른쪽 '자세히 보기' 로 펼칩니다. */
.c-list{border:1px solid var(--line);border-radius:14px;padding:6px 0;background:#fff;}
.c-line{display:flex;align-items:center;gap:10px;padding:9px 14px;}
.c-line label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;
  font-size:14.5px;color:var(--ink);line-height:1.45;}
.c-line input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--ink);}
.c-line.c-all{margin:0 0 4px;padding:13px 14px;border-bottom:1px solid var(--line);font-weight:800;font-size:15px;cursor:pointer;
  background:none;border-radius:0;}
.c-line.c-all span{font-size:15px;}
.c-line.c-guard{margin-top:4px;border-top:1px dashed var(--line);padding-top:12px;background:none;}
.c-more{flex:none;border:none;background:none;padding:2px 0;font:inherit;font-size:12.5px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.c-more[aria-expanded="true"]{color:var(--ink);}
.c-dt{margin:0 14px 8px 42px;padding:10px 12px;background:#F6F6F8;border-radius:10px;
  font-size:12.5px;line-height:1.8;color:var(--ink-mid);}
.c-dt i{font-style:normal;font-weight:700;color:var(--ink-mid);margin-right:4px;}
.c-dt b{font-weight:700;}
/* 머리띠 로고 — 재단 로고 + 알음알음 클럽 로고 */
.c-band .c-logos{display:flex;align-items:center;gap:12px;margin:0 0 6px;align-self:flex-start;}
.c-band .c-logos .c-logo{margin:0;}
.c-band .c-alum{height:44px;width:auto;display:block;}
@media (min-width:960px){ .c-band .c-alum{height:58px;} }

/* ── 결과 페이지 9/30 재단 피드백 ─────────────────────── */
/* 히어로 — 재단 로고 + 알음알음 클럽 로고, 공통 제목, 그 아래 인터뷰 제목 */
.cp-hero .brandline.brand-logos{opacity:1;gap:12px;margin-bottom:10px;}
.cp-hero .brandline.brand-logos img{width:auto;height:auto;object-fit:contain;}
.cp-hero .brandline .bl-bf{height:24px !important;}
.cp-hero .brandline .bl-alum{height:48px !important;}
.cp-hero h1.hero-common{font-size:25px;margin:8px 0 10px;}
.cp-hero .hero-title{font-size:17px;font-weight:800;line-height:1.4;margin:0 0 6px;max-width:64%;
  word-break:keep-all;text-wrap:balance;opacity:.92;}
.cp-hero .hero-title::before{content:"“";}
.cp-hero .hero-title::after{content:"”";}
@media (min-width:960px){
  .cp-hero .brandline .bl-bf{height:30px !important;}
  .cp-hero .brandline .bl-alum{height:62px !important;}
  .cp-hero h1.hero-common{font-size:36px;}
  .cp-hero .hero-title{font-size:21px;max-width:56%;}
}
/* 초대장 한 줄 */
.cp-hostbar .who b.invite-line{font-size:16px;font-weight:800;letter-spacing:-.01em;}
/* 참여 버튼 — 유형색 */
.join-btn{border:2px solid var(--t-main,#26262B);}
.join-btn.primary{background:var(--t-light,#F2F2F4);}
.join-btn b{color:var(--t-deep,#26262B);}
.join-btn.sel{border-color:var(--t-main,#26262B);background:var(--t-light,#F2F2F4);box-shadow:0 0 0 3px var(--t-glow,rgba(0,0,0,.12));}
.join-btn.sel::after{background:var(--t-deep,#26262B);}
/* 초대 메시지 고르기 */
.share-guide{font-size:13.5px;line-height:1.65;color:var(--ink-mid);margin:-4px 0 12px;word-break:keep-all;}
.invite-picks{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.ip-opt{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;}
.ip-opt b{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.ip-opt span{display:block;font-size:13.5px;line-height:1.6;color:var(--ink);}
.ip-opt:hover{border-color:var(--ink-soft);}
.ip-opt.on{border-color:var(--ink);box-shadow:0 0 0 2px rgba(38,38,43,.08);}
.ip-opt.on b{color:var(--ink);}
.ip-opt.on b::after{content:" · 선택됨";}
.invite-actions button:only-child{flex:1;}

/* 승인 요청 완료 화면 — 오프라인 키트 안내 (2026.09.30) */
.done-kit{margin-top:26px;text-align:left;}
.dk-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);}
.dk-ico{flex:none;width:46px;height:46px;border-radius:12px;background:#F6F6F8;display:flex;align-items:center;justify-content:center;font-size:24px;}
.dk-body b{display:block;font-size:15.5px;margin-bottom:2px;}
.dk-name{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.dk-body p{font-size:13.5px;line-height:1.65;color:var(--ink-mid);margin:0 0 6px;word-break:keep-all;}
.dk-body .dk-note{font-size:12.5px;color:var(--ink-soft);}
.dk-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.dk-acts .btn-primary{width:auto;flex:1;min-width:160px;padding:12px 16px;font-size:14px;}
.dk-acts .btn-ghost{flex:none;padding:12px 16px;font-size:14px;}
.dk-declined{font-size:13px;color:var(--ink-soft);text-align:center;margin:0;}
/* 공개 페이지 공유 — 보내는 사람 고르기 (2026.09.30) */
.share-roles{display:flex;gap:8px;margin-bottom:12px;}
.sr-opt{flex:1;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;}
.sr-opt b{display:block;font-size:14.5px;color:var(--ink);}
.sr-opt span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;}
.sr-opt.on{border-color:var(--t-main,#26262B);background:var(--t-light,#F2F2F4);}
.sr-opt.on b{color:var(--t-deep,#26262B);}

/* 리워드 사진 자리 (2026.09.30) — 카드 위쪽에 16:9. 사진이 없으면 같은 크기의 빈 자리 */
.reward-card.has-photo{flex-direction:column;gap:12px;}
.rc-photo{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#F6F6F8;}
.rc-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.rc-photo.empty{border:1.5px dashed #D9D9DE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.rc-photo .rp-ico{font-size:30px;line-height:1;opacity:.8;}
.rc-photo .rp-txt{font-size:12px;font-weight:700;color:var(--ink-soft);}
/* 완료 화면 키트 카드 — 사진을 위에, 글을 아래에 */
.dk-card{flex-direction:column;}
.dk-card .rc-photo{aspect-ratio:16/9;}

/* 알음알음 클럽 가로 타이틀 (2026.09.30) — 세로형 대신 가로형을 기본으로 씁니다 */
.cp-hero .brandline .bl-alum{height:30px !important;}
@media (min-width:960px){ .cp-hero .brandline .bl-alum{height:38px !important;} }
.c-band .c-alum{height:28px;}
@media (min-width:960px){ .c-band .c-alum{height:34px;} }
.cp-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.cp-foot .cp-foot-alum{height:22px;width:auto;display:block;}
.done-alum{display:block;height:30px;width:auto;margin:0 auto 14px;}
@media (min-width:960px){ .done-alum{margin:0 0 16px;height:34px;} }
.c-foot-bf{display:block;height:24px;width:auto;margin:26px auto 4px;opacity:.9;}
.cp-hero .brandline.brand-logos{margin-bottom:12px;}
/* 공유 — 짧은 추천 + 고쳐 쓰기 (2026.09.30) */
.invite-picks.compact .ip-opt{padding:10px 12px;}
.invite-picks.compact .ip-opt span{font-size:13px;}
.share-text{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:inherit;
  border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.6;resize:vertical;margin-top:6px;}
.share-link{font-size:12.5px;opacity:.8;margin:8px 0 2px;word-break:break-all;}
/* 호스트 줄 — 아바타 없이 '초대장' 문장이 제목 역할 (2026.09.30) */
.cp-hostbar .who b.invite-line{font-size:20px;line-height:1.4;letter-spacing:-.02em;word-break:keep-all;}
.cp-hostbar .who span{display:block;margin-top:4px;font-size:14px;}
@media (min-width:960px){ .cp-hostbar .who b.invite-line{font-size:24px;} }
/* AI 활용 표기 — 맨 뒤 */
.cp-ainote.cp-ainote-end{margin:28px 24px 0;}
@media (min-width:960px){ .cp-ainote.cp-ainote-end{max-width:1104px;margin:32px auto 0;} }
/* 특별 페이지 (알음알음클럽 1호 등, 2026.09.30) */
.cp-hero .hero-eyebrow{display:inline-block;align-self:flex-start;background:var(--ink,#26262B);color:#fff;font-size:12px;font-weight:800;
  padding:5px 12px;border-radius:99px;margin:2px 0 4px;letter-spacing:-.01em;}
.cp-ainote.cp-notice-top{margin:18px 0 4px;}
.cp-ainote.cp-notice-top p{font-size:13.5px;line-height:1.75;}

/* ── 2026.10.01 재단 피드백 ─────────────────────────── */
/* ① 모바일 — 진행 표시가 스크롤해도 위에 붙어 있게 */
.iv-progress{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  margin:-20px -18px 14px;padding:12px 18px 2px;box-shadow:0 1px 0 var(--line);}
.iv-progress .phase-label{margin-bottom:10px;}
@media (min-width:960px){ .iv-progress{position:static;background:none;box-shadow:none;margin:0;padding:0;backdrop-filter:none;} }
/* ③ 보기 안내 — 보기 위로 올리고 눈에 띄게 */
.composer .helper{display:inline-flex;align-items:center;gap:6px;margin:0 0 9px;padding:6px 11px;border-radius:99px;
  background:#EAF1FF;color:#1F5BD8;font-size:13px;font-weight:700;line-height:1.35;}
.composer .helper::before{content:"✓";font-weight:900;}
.composer .helper:empty{display:none;}
.composer .helper a{color:#1F5BD8;}
/* ② 답변 수정 안내 */
.edit-notice{margin:18px 0 12px;padding:11px 14px;border-radius:12px;background:#EAF1FF;color:#1F3F8A;font-size:13.5px;line-height:1.65;word-break:keep-all;}
.edit-notice b{color:#1F5BD8;}
.iv-tip.iv-edit{color:#1F5BD8;font-weight:600;}
/* ③ 「내 말로 고치기」 — 모바일·PC 모두 또렷하게 */
.db-btn.db-accent{border:1.5px solid #2F6FE4;background:#EAF1FF;color:#1F5BD8;font-weight:800;}
.db-btn.db-accent:hover{background:#DCE8FF;color:#1F5BD8;border-color:#1F5BD8;}
/* 상단 배너 — 왼쪽 캠페인 로고, 오른쪽 재단 CI (2026.10.02) */
.cp-hero .brandline.brand-logos{justify-content:space-between;width:100%;}
.cp-hero .brandline .bl-bf{height:22px !important;width:auto;opacity:.95;}
@media (min-width:960px){ .cp-hero .brandline .bl-bf{height:28px !important;} }

/* 인터뷰 과정 전체의 상단 로고 줄 (2026.10.02) — 왼쪽 캠페인 로고, 오른쪽 재단 CI. 결과 페이지 배너와 같은 규칙 */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
.brand-row .brand-alum{height:22px;width:auto;display:block;}
.brand-row .brand-bf{height:20px;width:auto;display:block;opacity:.95;}
.c-band .c-logos.brand-row{align-self:stretch;}
.c-band .c-logos.brand-row .brand-bf{height:22px;}
.iv-brand{margin:0 0 10px;}
.ld-brand{margin:0 0 22px;}
.done-brand{justify-content:center;gap:18px;margin:0 0 16px;}
@media (min-width:960px){
  .brand-row .brand-alum{height:28px;}
  .brand-row .brand-bf{height:26px;}
  .iv-brand{margin:0 0 14px;}
  .done-brand{justify-content:flex-start;}
}
/* PC 인터뷰 — 재단 로고는 왼쪽 면 맨 아래, 가운데 위쪽에는 캠페인 로고만 (2026.10.02) */
.iv-rail-bf{display:none;}
@media (min-width:960px){
  .iv-brand .brand-bf{display:none;}
  .iv-brand{justify-content:flex-start;}
  .iv-rail-bf{display:block;height:28px;width:auto;margin:20px 0 0;align-self:flex-start;opacity:.95;}
}
/* 게이트(동의) 화면 PC — 재단 로고는 왼쪽 면 맨 아래, 위쪽에는 캠페인 로고만 (2026.10.02) */
.c-band-bf{display:none;}
.iv-right .iv-tip{margin-top:auto;}
.iv-right .iv-tip + .iv-tip{margin-top:0;}
@media (min-width:960px){
  .c-band .c-logos .brand-bf{display:none;}
  .c-band .c-logos.brand-row{justify-content:flex-start;}
  .c-band .c-band-bf{display:block;position:absolute;left:48px;bottom:32px;height:30px;width:auto;opacity:.95;}
  #screen-consent .c-foot-bf{display:none;}
}