/* ============================================================
   소개 화면들이 함께 쓰는 모양 —  /  와  /challenge/

   ------------------------------------------------------------
   app.css 와 무엇이 다른가
   ------------------------------------------------------------
   app.css 는 '도구' 화면용입니다. (아카이브 · 출석현황 · 피드백 · 로그인)
   표와 입력칸이 많고 글자가 작습니다.

   이 파일은 '읽는' 화면용입니다. 글이 길고 여백이 넓습니다.
   header · .wrap · h1 · .btn 처럼 이름이 겹치는 것이 많아
   두 파일을 한 화면에서 함께 불러오면 서로 덮어씁니다.
   그래서 한 화면에는 둘 중 하나만 씁니다.

   색과 글꼴 값은 두 파일이 똑같습니다. 그래야 한 사이트로 보입니다.
   ============================================================ */

@font-face{font-family:'Pretendard';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/Pretendard-Regular.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:500 600;font-display:swap;
  src:url('/fonts/Pretendard-SemiBold.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('/fonts/Pretendard-Bold.subset.woff2') format('woff2')}
@font-face{font-family:'GmarketSans';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('/fonts/GmarketSansBold.woff') format('woff')}

/* 고운바탕 — 인용문·후기처럼 '읽는 목소리'가 다른 곳에만 씁니다.
   전부 같은 글꼴이면 어디가 인용인지 눈에 안 들어옵니다.
   이 사이트에 실제로 나오는 글자만 남겨 73KB·63KB 로 줄여 두었습니다. */
@font-face{font-family:'GowunBatang';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/GowunBatang-Regular.subset.woff2') format('woff2')}
@font-face{font-family:'GowunBatang';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('/fonts/GowunBatang-Bold.subset.woff2') format('woff2')}

:root{
  --paper:#FBFAF7; --card:#fff; --card2:#F6F4EF;
  --ink:#1C1B19; --ink2:#5F5E5A; --ink3:#8A8985;
  --line:#E6E3DC; --line2:#D8D4CA;
  --navy:#2C4A7C; --navy-ink:#22385E; --navy-bg:#EEF2F8; --navy-line:#D7E0EE;
  --amber-bg:#FDF3E2; --amber-ink:#7A5209; --amber-line:#EEDFC0;
  --red:#B3261E; --red-bg:#FCECEA;
  --green:#2F6B3F; --green-bg:#ECF5EE;
  --r:10px; --r2:14px;
  --ff:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',
    'Noto Sans KR',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fh:'GmarketSans','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 인용문용 명조. 글꼴이 못 실려도 시스템 명조로 떨어지게 뒤를 받쳐둡니다.
     (윈도우 '바탕', 맥 'AppleMyungjo') */
  --fs:'GowunBatang','Nanum Myeongjo','AppleMyungjo','Batang','바탕',serif;
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
*{box-sizing:border-box;margin:0;padding:0}
/* word-break:keep-all 이 없으면 브라우저가 한글을 아무 글자에서나 자릅니다.
   '자정입니다' 가 '자정입니 / 다.' 로 갈라지는 것이 그 때문입니다.
   keep-all 을 주면 낱말 단위로만 넘어갑니다. */
body{font-family:var(--ff);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.8;word-break:keep-all;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
.hide{display:none !important}

/* ── 머리말 ───────────────────────────────────────────────
   왼쪽 이름 · 가운데 차림표 · 오른쪽 로그인, 세 덩이입니다.
   ──────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
/* 이름은 왼쪽 끝에 두고, 차림표와 로그인은 오른쪽에 붙여 한 덩어리로 둡니다.
   가운데에 띄워두면 차림표가 '어디에도 안 속한 것' 처럼 떠 보입니다. */
.hd{max-width:1020px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:12px}
.hd .brand{margin-right:auto}
/* 이름은 두 줄입니다. 위가 사람 이름, 아래가 무엇을 하는 곳인지.
   한 줄에 붙여두면 '촉촉한 마케터 실용적인 필사 챌린지' 로 한 덩어리처럼 읽힙니다. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  line-height:1.25;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{font-family:var(--fh);font-weight:900;font-size:18px;letter-spacing:-.5px}
.brand span{font-size:11.5px;color:var(--ink3);white-space:nowrap;letter-spacing:-.1px}
.nav{display:flex;gap:2px}
.nav a{font-size:13.5px;color:var(--ink2);padding:6px 11px;border-radius:8px;white-space:nowrap}
.nav a:hover{background:var(--card2);color:var(--ink);text-decoration:none}
.nav a.on{color:var(--navy);font-weight:600}
@media (max-width:900px){.nav{display:none}.brand span{display:none}}

/* ── 오른쪽 위 로그인 ─────────────────────────────────────
   로그인 전에는 버튼 하나, 로그인 뒤에는 닉네임이 보입니다.
   닉네임을 누르면 갈 수 있는 곳들이 아래로 펼쳐집니다.
   (한 번 로그인하면 세 화면이 모두 열리므로, 그 안내를 겸합니다)
   ──────────────────────────────────────────────────────── */
.userbox{position:relative;flex:0 0 auto}
.ubtn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;
  font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:999px;
  border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;
  white-space:nowrap;transition:background .14s}
.ubtn:hover{background:var(--navy-ink);text-decoration:none;color:#fff}
.ubtn.me{background:var(--card);color:var(--ink);border-color:var(--line2)}
.ubtn.me:hover{background:var(--card2);border-color:var(--ink3);color:var(--ink)}
.ubtn.me .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}
.ubtn .cv{font-size:10px;color:var(--ink3);transition:transform .14s}
.userbox.open .ubtn .cv{transform:rotate(180deg)}

.umenu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:212px;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);
  box-shadow:0 10px 30px rgba(28,27,25,.13);padding:7px;display:none}
.userbox.open .umenu{display:block}
.umenu .uh{padding:9px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.umenu .uh .n{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.umenu .uh .r{font-size:12px;color:var(--ink3);margin-top:2px}
.umenu a,.umenu button{display:block;width:100%;text-align:left;font-family:inherit;
  font-size:13.5px;color:var(--ink2);padding:8px 12px;border-radius:8px;
  background:none;border:0;cursor:pointer}
.umenu a:hover,.umenu button:hover{background:var(--card2);color:var(--ink);text-decoration:none}
.umenu .out{color:var(--ink3);border-top:1px solid var(--line);margin-top:6px;padding-top:11px}

/* ── 공통 ─────────────────────────────────────────────── */
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
section{padding:56px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--navy);
  text-transform:uppercase;margin-bottom:14px}
h2{font-family:var(--fh);font-weight:700;font-size:26px;line-height:1.4;
  letter-spacing:-.7px;margin-bottom:10px}
h2 .em{color:var(--navy)}
h3{font-size:18px;font-weight:700;line-height:1.5;margin-bottom:8px}
.lead{font-size:16.5px;color:var(--ink2);margin-bottom:26px;max-width:62ch}
.lead strong{color:var(--ink);font-weight:600}
p+p{margin-top:14px}
.note{font-size:13.5px;color:var(--ink3);line-height:1.7}
.hr{height:1px;background:var(--line);border:0;margin:34px 0}
@media (max-width:640px){
  section{padding:44px 0}
  h2{font-size:22px}
  body{font-size:15.5px}
}

/* 인용·강조 상자 */
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:22px 24px}
.box+.box{margin-top:12px}
.box.tint{background:var(--navy-bg);border-color:var(--navy-line)}
.box.warm{background:var(--amber-bg);border-color:var(--amber-line)}
.box h3{margin-bottom:10px}
/* 인용문 — 여기만 명조입니다.
   본문(고딕)과 목소리가 달라지면서 '누가 한 말' 이 눈에 바로 들어옵니다.

   명조는 획이 얇아서 흐리게 보입니다. 두 가지로 잡습니다.
     1) 글자색을 본문색(--ink)으로 — 흐림의 절반은 낮은 명암 때문입니다
     2) 획을 0.22px 만 덧그림 — 굵은 명조로 갈아끼우면 너무 무거워집니다
   크기도 17px → 15.8px 로 줄였습니다. */
.quote{border-left:3px solid var(--navy-line);padding:2px 0 2px 18px;
  font-family:var(--fs);color:var(--ink);font-size:15.8px;line-height:1.85;
  letter-spacing:.1px;-webkit-text-stroke:.22px currentColor}
.quote b{font-weight:700}
.quote+.quote{margin-top:14px}

/* 문장 자체를 보여주는 큰 제목에도 같은 목소리를 씁니다 */
.serif{font-family:var(--fs);letter-spacing:-.2px}
h2.serif{font-weight:700}
mark{background:#FBEFD3;color:inherit;padding:0 3px;border-radius:3px}
.kbd{font-family:var(--ff);font-weight:600;font-size:14px;background:var(--card2);
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;white-space:nowrap}

/* ── 첫 화면 ──────────────────────────────────────────── */
.hero{padding:66px 0 46px;border-top:0}
.hero .tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--navy);background:var(--navy-bg);border:1px solid var(--navy-line);
  border-radius:999px;padding:5px 14px;margin-bottom:22px}
/* 모집중일 때만 켜지는 작은 불빛. 지금 열려 있다는 신호입니다. */
.hero .tag .live{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(47,107,63,.15)}
.hero h1{font-family:var(--fh);font-weight:700;font-size:38px;line-height:1.42;
  letter-spacing:-1.2px;margin-bottom:18px}
.hero h1 .em{color:var(--navy)}
.hero h1 .sub{display:block;color:var(--navy);font-size:.72em;margin-top:12px;
  letter-spacing:-.8px}
.hero p{font-size:17px;color:var(--ink2);max-width:56ch}
.hero .when{margin-top:20px;font-size:14.5px;color:var(--ink2);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero .when .lb{font-weight:600;color:var(--ink3)}
.hero .when b{color:var(--ink);font-weight:600}
.hero .when .sep{color:var(--line2)}
@media (max-width:640px){
  .hero{padding:44px 0 34px}
  .hero h1{font-size:27px;letter-spacing:-.9px}
  .hero p{font-size:15.5px}
}

/* ── 바로가기 카드 ────────────────────────────────────── */
.links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media (max-width:720px){.links{grid-template-columns:1fr}}
.lk{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);padding:20px 22px;color:var(--ink);
  transition:border-color .14s, transform .14s, box-shadow .14s}
.lk:hover{text-decoration:none;border-color:var(--navy);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(44,74,124,.09)}
.lk .top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
/* 아이콘은 이모지가 아니라 좌표로 그린 그림(SVG)입니다.
   이모지는 윈도우·맥·안드로이드에서 모양과 색이 제각각이라
   같은 화면이 사람마다 다르게 보입니다. */
.lk .ico{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--navy-bg);
  color:var(--navy);display:grid;place-items:center}
.lk .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.lk .t{font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.lk .d{font-size:14px;color:var(--ink2);line-height:1.7}
.lk .go{display:inline-flex;align-items:center;gap:5px;margin-top:11px;
  font-size:13.5px;font-weight:600;color:var(--navy)}
.lk .out{font-size:11.5px;color:var(--ink3);font-weight:400;margin-left:2px}
.lk.key{background:linear-gradient(180deg,#fff, #FAF8F3);border-color:var(--line2)}
.links.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.links.three{grid-template-columns:1fr}}

/* ── 누구나 볼 수 있는 자료 ────────────────────────────
   위 셋은 참가자가 챌린지를 하려면 반드시 들어와야 하는 곳입니다.
   이건 성격이 다릅니다 — 참가 여부와 상관없이 열어둔 자료입니다.

   색만 바꾸면 "왜 저것만 다른 색이지" 로 끝납니다.
   그래서 줄을 나누고, 한 줄짜리 가로 카드로 모양을 바꾸고,
   '누구나' 딱지를 붙였습니다. 셋과 성격이 다르다는 것이 보입니다.
   ──────────────────────────────────────────────────── */
.openbox{margin-top:24px;padding-top:22px;border-top:1px dashed var(--line2)}
.lk.open{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:var(--amber-bg);border-color:var(--amber-line);padding:18px 22px}
.lk.open:hover{border-color:var(--amber-ink);
  box-shadow:0 6px 20px rgba(122,82,9,.10)}
.lk.open .ico{background:#F7E7C6;color:var(--amber-ink)}
.lk.open .t{font-size:16.5px;font-weight:700;letter-spacing:-.3px;margin-bottom:3px}
.lk.open .d{color:#6E5C39}
.lk.open .go{margin-top:0;color:var(--amber-ink);white-space:nowrap}
.opentag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--amber-ink);
  background:#F7E7C6;border:1px solid var(--amber-line);border-radius:999px;
  padding:1px 9px;margin-left:7px;vertical-align:2px}
@media (max-width:640px){
  .lk.open{grid-template-columns:auto 1fr;gap:14px}
  .lk.open .go{grid-column:1 / -1}
}

/* ── 두 갈래 ─────────────────────────────────────────────
   오는 사람이 둘로 나뉩니다.
     · 아직 참가 안 하신 분 — 무슨 챌린지인지 알고 싶습니다
     · 이미 참가 중인 분   — 내 기록과 자료만 있으면 됩니다
   섞어두면 둘 다 헤매서, 들어오자마자 갈래를 고르게 합니다.
   ──────────────────────────────────────────────────────── */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.ways{grid-template-columns:1fr}}
.way{display:flex;flex-direction:column;border-radius:18px;padding:30px 32px;
  border:1px solid var(--line2);background:var(--card);color:var(--ink);
  transition:transform .14s,box-shadow .14s,border-color .14s}
.way:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--navy);
  box-shadow:0 8px 26px rgba(44,74,124,.10)}
.way .k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:12px}
.way .t{font-family:var(--fh);font-weight:700;font-size:24px;letter-spacing:-.7px;
  margin-bottom:10px}
.way .d{font-size:14.5px;color:var(--ink2);line-height:1.8;flex:1}
.way .go{margin-top:18px;font-size:14.5px;font-weight:600;color:var(--navy)}
/* 지원 쪽을 진하게 — 모집 중에는 여기가 첫 번째 할 일입니다 */
.way.key{background:linear-gradient(135deg,#2C4A7C,#22385E);border-color:#22385E;color:#fff}
.way.key .k{color:#A9C1E4}
.way.key .d{color:#D6E1F1}
.way.key .go{color:#fff}
.way.key:hover{border-color:#1B2C4B}

/* ── 상세 페이지 안쪽 차림표 ─────────────────────────────
   머리말 탭은 '참가하고 싶다면 / 참여중이라면' 두 갈래만 둡니다.
   훈련법·커리큘럼 같은 것은 이 페이지 '안'의 단락이라 여기 둡니다.
   ──────────────────────────────────────────────────────── */
.subnav{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 4px}
.subnav a{font-size:13.5px;color:var(--ink2);padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);white-space:nowrap}
.subnav a:hover{background:var(--navy-bg);border-color:var(--navy-line);
  color:var(--navy);text-decoration:none}

/* ── 상세 페이지로 보내는 큰 칸 ───────────────────────────
   메인에서 가장 눌러야 하는 자리라 다른 카드들과 다르게 생겼습니다.
   ──────────────────────────────────────────────────────── */
.big{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:linear-gradient(135deg,#2C4A7C,#22385E);color:#fff;
  border-radius:18px;padding:34px 36px}
.big .eyebrow{color:#A9C1E4;margin-bottom:10px}
.big h2{color:#fff;margin-bottom:10px}
.big p{color:#D6E1F1;font-size:15.5px;max-width:52ch}
.big .btn{background:#fff;color:var(--navy);border-color:#fff;white-space:nowrap}
.big .btn:hover{background:#EEF2F8;border-color:#EEF2F8;color:var(--navy-ink)}
@media (max-width:760px){
  .big{grid-template-columns:1fr;padding:28px 24px;gap:20px}
  .big .btn{width:100%}
}

/* 상세 페이지에 무엇이 들어 있는지 미리 보여주는 줄 */
.peek3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
@media (max-width:760px){.peek3{grid-template-columns:1fr}}
.pk{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:18px 20px;color:var(--ink)}
.pk:hover{text-decoration:none;border-color:var(--line2);background:var(--card2)}
.pk .k{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.06em;margin-bottom:6px}
.pk .t{font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.pk .d{font-size:13.5px;color:var(--ink2);line-height:1.7}

/* ── 3단계 ────────────────────────────────────────────── */
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:20px 22px}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;
  font-family:var(--fh);font-weight:700;font-size:14px;display:grid;place-items:center}
.step .t{font-size:16.5px;font-weight:700;margin-bottom:4px}
.step .t em{font-style:normal;color:var(--navy);font-size:14px;font-weight:600;
  margin-left:6px;letter-spacing:.02em}
.step .d{font-size:14.5px;color:var(--ink2)}

/* ── 특징 4가지 · 커리큘럼 ───────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:20px 22px}
.feat .k{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:.06em;margin-bottom:7px}
.feat .t{font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.2px}
.feat .d{font-size:14.5px;color:var(--ink2)}
.week{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:22px;display:flex;flex-direction:column}
.week .wk{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--navy);
  letter-spacing:.06em;margin-bottom:9px}
.week .t{font-size:17px;font-weight:700;margin-bottom:12px;letter-spacing:-.3px}
.week ul{display:grid;gap:9px}
.week li{font-size:14.5px;color:var(--ink2);padding-left:14px;position:relative;line-height:1.7}
.week li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--navy-line)}

/* ── Before / After ─────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.ba{grid-template-columns:1fr}}
.ba .col{border-radius:var(--r2);padding:22px;border:1px solid var(--line);background:var(--card)}
.ba .col.after{background:var(--navy-bg);border-color:var(--navy-line)}
.ba .h{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ba .h span{font-size:12px;font-weight:600;color:var(--ink3);
  border:1px solid var(--line2);border-radius:999px;padding:2px 9px}
.ba .col.after .h span{color:var(--navy);border-color:var(--navy)}
.ba ul{display:grid;gap:11px}
.ba li{font-size:14.5px;line-height:1.72;color:var(--ink2);padding-left:19px;position:relative}
.ba li::before{content:'—';position:absolute;left:0;color:var(--ink3)}
.ba .col.after li::before{content:'✓';color:var(--navy);font-weight:700}
.ba .col.after li{color:var(--navy-ink)}
.ba li b{color:var(--ink);font-weight:600}
.ba .col.after li b{color:var(--navy-ink);font-weight:700}

/* ── 혜택 ─────────────────────────────────────────────── */
.perk{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:22px 24px}
.perk+.perk{margin-top:12px}
.perk .h{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.perk .h .no{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--navy);
  background:var(--navy-bg);border-radius:7px;padding:3px 9px;flex:0 0 auto}
.perk .h .t{font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.perk ul{display:grid;gap:8px;margin-top:4px}
.perk li{font-size:14.5px;color:var(--ink2);padding-left:20px;position:relative;line-height:1.72}
.perk li::before{content:'✔';position:absolute;left:0;color:var(--navy);font-size:12px;top:1px}
.perk .hot{display:inline-block;font-size:11.5px;font-weight:700;color:var(--red);
  background:var(--red-bg);border-radius:999px;padding:2px 9px;margin-left:2px;vertical-align:2px}

/* ── 화면 캡처 ────────────────────────────────────────
   캡처는 처음부터 통째로 보여줍니다.
   전에는 일정 높이에서 자르고 '전체 보기' 를 눌러 펼치게 했는데,
   보여드리려고 넣은 그림을 한 번 더 누르게 만드는 셈이라 없앴습니다.

   align-items:start 가 중요합니다.
   기본값(stretch)이면 짧은 캡처의 칸이 옆 칸 높이만큼 늘어나
   그림 아래에 커다란 빈 상자가 생깁니다.
   ──────────────────────────────────────────────────── */
.shots{display:grid;gap:12px;margin-top:16px;align-items:start}
.shots.two{grid-template-columns:1fr 1fr}
.shots.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.shots.two,.shots.three{grid-template-columns:1fr}}

/* 한 장이 세로로 길고 나머지 둘이 납작할 때.
   왼쪽에 긴 것 하나, 오른쪽에 납작한 둘을 위아래로 쌓습니다.
   셋을 나란히 두면 긴 것 옆에 빈 공간이 크게 남습니다. */
.shots.stack{grid-template-columns:1fr 1fr;align-items:stretch}
.shots.stack .side{display:grid;gap:12px;align-content:start}
@media (max-width:700px){.shots.stack{grid-template-columns:1fr}}

figure.shot{margin:0;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
/* frame 은 flex 로 두면 안 됩니다.
   flex 항목은 늘어나기 전에 '줄어들기'부터 하므로, 그림이 납작하게 눌려
   비율이 깨집니다. block 으로 두면 그림이 제 비율을 지킵니다. */
figure.shot .frame{background:var(--card2)}
figure.shot .frame img{display:block;width:100%;height:auto}
/* 화면 녹화 캡처는 원본이 작습니다(148~295px). 늘리면 뭉개져서 원본 크기로 둡니다. */
figure.shot.tiny .frame img{width:auto;max-width:100%;margin:0 auto}
figure.shot .cap{padding:9px 13px;border-top:1px solid var(--line);background:var(--card)}
figure.shot figcaption{font-size:12.5px;color:var(--ink2);line-height:1.6}

/* ── 맞는 사람 / 아닌 사람 ──────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.fit{grid-template-columns:1fr}}
.fit .col{border-radius:var(--r2);padding:22px;border:1px solid var(--line);background:var(--card)}
.fit .col.no{background:var(--card2)}
.fit .h{font-size:15.5px;font-weight:700;margin-bottom:14px}
.fit .col.yes .h{color:var(--green)}
.fit .col.no .h{color:var(--ink2)}
.fit ul{display:grid;gap:11px}
.fit li{font-size:14.5px;line-height:1.7;color:var(--ink2);padding-left:22px;position:relative}
/* ⭕ ❌ 는 운영체제마다 모양이 달라 윈도우에서 유독 커 보입니다.
   그냥 글자로 그리면 어디서나 같고 색으로 뜻을 더 분명히 할 수 있습니다. */
.fit .col.yes li::before{content:'✓';position:absolute;left:2px;top:0;
  color:var(--green);font-weight:700}
.fit .col.no li::before{content:'✕';position:absolute;left:2px;top:0;
  color:var(--ink3);font-weight:700}

/* ── 비용 ─────────────────────────────────────────────── */
.price{background:var(--card);border:1px solid var(--line2);border-radius:var(--r2);
  overflow:hidden}
.price .head{padding:24px;border-bottom:1px solid var(--line);background:var(--card2)}
.price .amt{font-family:var(--fh);font-weight:700;font-size:32px;letter-spacing:-1px;
  line-height:1.3}
.price .amt small{font-family:var(--ff);font-size:14px;font-weight:400;color:var(--ink2);
  letter-spacing:0;margin-left:8px}
.price .body{padding:22px 24px}
.price dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14.5px}
.price dt{color:var(--ink3);white-space:nowrap}
.price dd{color:var(--ink2)}
.price dd b{color:var(--ink);font-weight:600}
@media (max-width:560px){.price dl{grid-template-columns:1fr;gap:2px 0}
  .price dt{margin-top:10px}}

/* ── 구글폼 끼워 넣는 칸 ─────────────────────────────── */
.embed{margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden}
.embed iframe{display:block;width:100%;height:1500px;border:0}
@media (max-width:640px){.embed iframe{height:1700px}}

/* ── 자주 묻는 질문 ──────────────────────────────────── */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:8px}
details[open]{border-color:var(--line2)}
summary{cursor:pointer;list-style:none;padding:15px 46px 15px 18px;position:relative;
  font-size:15px;font-weight:600;line-height:1.6}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:18px;top:13px;font-size:19px;
  color:var(--ink3);font-weight:400;line-height:1.4}
details[open] summary::after{content:'−'}
summary:hover{background:var(--card2)}
details .ans{padding:0 18px 18px;font-size:14.5px;color:var(--ink2);line-height:1.85}
details .ans em{font-style:normal;color:var(--ink3);font-size:13.5px}

/* ── 후기 ─────────────────────────────────────────────── */
.revs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.revs{grid-template-columns:1fr}}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:22px 24px;font-family:var(--fs);font-size:15.8px;line-height:1.85;
  color:var(--ink);letter-spacing:.1px;-webkit-text-stroke:.22px currentColor}
.rev .who{display:block;margin-top:12px;font-family:var(--ff);
  font-size:13px;color:var(--ink3);letter-spacing:0;-webkit-text-stroke:0}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff);font-size:15.5px;font-weight:600;padding:13px 26px;
  border-radius:var(--r);border:1px solid var(--navy);background:var(--navy);color:#fff;
  cursor:pointer;transition:background .14s,border-color .14s}
.btn:hover{background:var(--navy-ink);border-color:var(--navy-ink);text-decoration:none}
.btn.ghost{background:var(--card);color:var(--navy)}
.btn.ghost:hover{background:var(--navy-bg)}
.btn.wide{width:100%}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ── 꼬리말 ───────────────────────────────────────────────
   왼쪽은 '누가 만드는 챌린지인가', 오른쪽은 '바로가기'.
   ──────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--card);
  padding:34px 0 44px;margin-top:10px}
footer .in{max-width:1020px;margin:0 auto;padding:0 20px;
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
footer .bt{font-family:var(--fh);font-weight:900;font-size:17px;letter-spacing:-.4px}
footer .note{margin-top:7px}
/* display:inline-block 이라 윗줄(border-top)이 글자 길이만큼만 그어집니다.
   block 으로 두면 칸 너비 전체에 그어져 글자보다 훨씬 길어집니다. */
footer .made{margin-top:14px;font-size:12.5px;color:var(--ink3);
  padding-top:11px;border-top:1px solid var(--line2);display:inline-block;
  letter-spacing:.02em;white-space:nowrap}
footer .made b{font-family:var(--fh);font-weight:900;color:var(--ink2);
  letter-spacing:-.2px;margin-left:3px}
footer nav{display:grid;gap:8px;font-size:13.5px}
footer nav .ft{font-size:12.5px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;margin-bottom:1px}
footer nav a{color:var(--ink2)}
@media (max-width:640px){
  footer .in{flex-direction:column;gap:24px}
}

/* ── 문의하기 버튼 (auth.js 가 body 에 직접 붙입니다) ──────
   app.css 에도 같은 모양이 있습니다.
   이 화면은 app.css 를 부르지 않으므로 여기에도 둡니다.
   ──────────────────────────────────────────────────────── */
.askbtn{position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-grid;place-items:center;width:52px;height:52px;
  background:#FEE500;color:#191600;border:1px solid #E8D200;border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .14s,background .14s}
.askbtn:hover{background:#F5DC00;text-decoration:none;color:#191600;transform:translateY(-2px)}
.askbtn svg{display:block}
@media (max-width:600px){
  .askbtn{right:12px;bottom:12px;width:48px;height:48px}
}
@media print{.askbtn{display:none}}

/* ============================================================
   신청서 — 우리가 직접 그리는 양식
   ------------------------------------------------------------
   구글폼을 그대로 끼워 넣으면 구글 로고와 설명이 함께 보이고,
   글꼴·색·여백이 사이트와 따로 놉니다. 그래서 화면은 여기서 그리고
   적힌 값만 구글폼으로 보냅니다. 응답은 지금처럼 구글 시트에 쌓입니다.
   ============================================================ */
.aform{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:28px 30px;margin-top:14px}
@media (max-width:640px){.aform{padding:22px 18px}}

.afld{margin-bottom:22px}
.afld:last-of-type{margin-bottom:0}
.afld>label{display:block;font-size:15px;font-weight:700;letter-spacing:-.2px;
  margin-bottom:4px}
.afld .req{color:var(--red);margin-left:3px;font-weight:700}
.afld .hint{font-size:13px;color:var(--ink3);line-height:1.7;margin-bottom:9px;
  white-space:pre-line}
.afld .hint b{color:var(--ink2);font-weight:600}

.ain{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--card);font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink)}
.ain:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(44,74,124,.1)}
.ain::placeholder{color:#B9B7B0}
textarea.ain{min-height:110px;resize:vertical;line-height:1.8}
.afld.bad .ain{border-color:var(--red);background:var(--red-bg)}
.afld .err{display:none;font-size:13px;color:var(--red);margin-top:7px}
.afld.bad .err{display:block}

/* 고르는 칸 — 라디오·체크를 통째로 누를 수 있게 넓적한 칸으로 만듭니다.
   작은 동그라미만 누를 수 있으면 손가락으로 쓰기 어렵습니다. */
.aopts{display:grid;gap:8px}
.aopts.two{grid-template-columns:1fr 1fr}
@media (max-width:560px){.aopts.two{grid-template-columns:1fr}}
.aopt{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 15px;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--card);font-size:14.5px;line-height:1.6;transition:border-color .12s,background .12s}
.aopt:hover{border-color:var(--navy-line);background:var(--navy-bg)}
.aopt input{width:18px;height:18px;accent-color:var(--navy);cursor:pointer;flex:0 0 auto;margin:0}
.aopt.on{border-color:var(--navy);background:var(--navy-bg);font-weight:600;color:var(--navy-ink)}

.ahr{height:1px;background:var(--line);border:0;margin:26px 0}
.asec{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--navy);
  text-transform:uppercase;margin:0 0 16px}

.asend{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.asend .btn{width:100%;padding:15px}
.asend .amsg{font-size:13.5px;line-height:1.7;margin-top:12px;padding:11px 14px;
  border-radius:var(--r);display:none}
.asend .amsg.on{display:block}
.asend .amsg.bad{background:var(--red-bg);color:var(--red)}
.asend .amsg.wait{background:var(--card2);color:var(--ink2)}

/* 다 보낸 뒤 */
.adone{text-align:center;padding:44px 24px}
.adone .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--green-bg);color:var(--green);display:grid;place-items:center;
  font-size:26px;font-weight:700}
.adone h3{font-family:var(--fh);font-weight:700;font-size:22px;letter-spacing:-.6px;
  margin-bottom:12px}
.adone p{font-size:14.5px;color:var(--ink2);line-height:1.9}

/* 신청서 아래 '구글폼으로 열기' — 빠져나갈 길이라 작게 둡니다 */
.aescape{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aescape .btns{margin-top:0}
.aescape .btn{padding:9px 16px;font-size:13.5px}
.aescape .note{margin-top:0 !important;flex:1;min-width:200px}

/* 신청서 맨 위 — 로그인하면 자동으로 채워진다는 안내 */
.apre{margin:-4px 0 22px;padding:13px 16px;border-radius:var(--r);
  background:var(--navy-bg);border:1px solid var(--navy-line);
  font-size:14px;line-height:1.75;color:var(--navy-ink)}
.apre b{font-weight:700}
.apre a{font-weight:600;text-decoration:underline}

/* 네이버로 확인 — 신청서의 네이버 아이디 칸 아래 */
.nvrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:9px}
.nvbtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:var(--r);
  border:1px solid #03C75A;background:#03C75A;color:#fff;transition:background .12s}
.nvbtn:hover{background:#02A64B;border-color:#02A64B}
.nvbtn .nvn{font-family:var(--fh);font-weight:900;font-size:14px;line-height:1}
.nvmsg{font-size:13px;color:var(--ink3);line-height:1.6}
.nvmsg.ok{color:var(--green);font-weight:600}
.nvmsg.bad{color:var(--red)}
.nvmsg.warn{color:var(--amber-ink)}
.ain[readonly]{background:var(--card2);color:var(--ink2)}