/*
 * 짝꿍 공통 CSS — 토큰 · 머리말 · 꼬리말 · 버튼 · 폼 · 게시판.
 * 그누보드 기본 CSS(theme/jjakkung/css/default.css) 뒤에 읽혀서 덮어쓴다.
 *
 * 디자인 원칙 (2026-10-03 「양산형 느낌 — 고급화」 이후)
 *  · 박스로 감싸지 않는다 — 가는 선(hairline)과 여백으로 나눈다. 흰 카드 + 회색 테두리 + 둥근 모서리 금지
 *  · 모서리는 각지게(사진 0 · 입력칸 2px). 알약 모양 버튼 · 칩을 쓰지 않는다
 *  · 제목은 명조(Noto Serif KR), 숫자 · 영문 머리글은 Cormorant Garamond, 본문은 Pretendard
 *  · 색은 흰 바탕 · 먹 · 숯색에 **포인트 하나(선셋 오렌지)**. 어두운 바탕 위 포인트는 밝은 오렌지(blush 자리)
 *    ⚠ 예전 짝꿍 사이트(A — 다른 이름으로 바뀐다)가 쓴 색은 피한다: 남색 #1E3E6B · 장미/분홍 #B8465F · 초록 #2E6B52 ·
 *      크림 #FBF9F8 · 금색 #B08A46. 장미 포인트 · 숲색 · 아이보리를 썼다가 「기존 짝꿍이랑 겹친다」(2026-10-04)로 바꿨다.
 *      포인트 후보 비교 — design/palette-point/index.html
 *  · 고유 무늬 「두 개의 원」(짝 = 둘) — 머리글 · 흐르는 띠 · 목록 기호에 반복한다(--pair). 로고가 아니라 무늬다
 *  · 아치(둥근 윗변) 사진틀은 나라 카드 · 페이지 머리 · 로그인에만 — 나머지 사진은 각지게
 */

/* 제목 글꼴 마루부리 · 본문 나눔스퀘어라운드는 fonts.css (2026-10-27 우리 서버에서 화면 글자만 담은 파일로) */

:root {
  --paper: #FFFFFF; --paper-2: #F4F2EE; --white: #FFFFFF; --mist: #F2F1EE;
  --deep: #1A1918; --deep-2: #2A2826;
  --ink: #1B1E1C; --ink-2: #4A4F4B; --ink-3: #686D68;
  --line: #E4E2DE; --line-strong: #C9C6C0;
  --accent: #2B2A28; --accent-hover: #000000; --accent-soft: #F1F0ED;     /* 예전 녹색 자리 — 이제 먹색(글자 링크 · 초점 · 옅은 판) */
  --point: #C94A16; --point-ink: #B5410F;           /* 선셋 오렌지 — 버튼 · 핵심 숫자 · 표시. 흰 글자 대비 4.7:1 · point-ink 는 작은 글자(흰 바탕 5.6:1) */
  --blush: #F29A62; --blush-soft: #FCEDE3;          /* 어두운 바탕 위 포인트 · 옅은 띠 (이름은 예전 그대로) */
  --forest: #23211F;                                /* 반전 구획(메인 진행 순서) — 숯색 */
  --gold: var(--point); --gold-ink: var(--point-ink);   /* 예전 이름 — 페이지들이 쓰던 금색 자리를 장미로 돌린다 */
  --pair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.25'%3E%3Ccircle cx='8' cy='7' r='6'/%3E%3Ccircle cx='18' cy='7' r='6'/%3E%3C/g%3E%3C/svg%3E");
  --notice: #8A5A1F; --notice-soft: #F5EDE0; --danger: #A3392F;
  --font-sans: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-serif: "Gowun Dodum", "Pretendard", sans-serif;   /* 제목 글꼴 — 고운돋움(둥근 고딕, 2026-10-14 사용자 B 선택). 이름은 예전 그대로 */
  /* 구획 배경 — 흰색 · 아이보리 · 모래 · 살구를 번갈아 (톤은 그대로, 넘어가는 느낌만) */
  --bg-ivory: #FAF7F1; --bg-sand: #F3EDE3; --bg-blush: #FBF2EC;
  --font-display: "Cormorant Garamond", "Noto Serif KR", serif;   /* 영문 단어 장식만 — 숫자에는 쓰지 않는다 */
  --font-num: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", system-ui, sans-serif;   /* 숫자(금액 · 전화 · 번호 · 날짜) — 2026-10-14 */
  --fs-body: 17px; --fs-small: 15px; --fs-caption: 13px;
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1240px;
  --radius: 2px;
  --hd-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── 바탕 ─────────────────────────────────────────── */
/* 그누보드 기본 CSS 의 nav{display:block} 이 hidden 속성을 이겨서 모바일 메뉴가 늘 열려 있었다 — hidden 을 끝까지 지킨다 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans);
       font-size: var(--fs-body); line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--point); color: #fff; }
.wrap { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin: 0 auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* 머리글 — 「01 ── CHOOSE」 */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 11.5px/1.4 var(--font-sans); letter-spacing: .24em;
           text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ""; width: 27px; height: 14px; flex: none; background: var(--point);
                   -webkit-mask: var(--pair) no-repeat center / contain; mask: var(--pair) no-repeat center / contain; }
/* 두 개의 원 무늬 — 아무 곳에나 <i class="pair"></i> */
.pair { display: inline-block; width: 27px; height: 14px; flex: none; background: var(--point); vertical-align: middle;
        -webkit-mask: var(--pair) no-repeat center / contain; mask: var(--pair) no-repeat center / contain; }

/* 읽은 만큼 차는 맨 위 줄 */
.jj-progress { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 2px; background: var(--point);
               transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }
.eyebrow .no { order: -1; font: 500 17px/1 var(--font-num); letter-spacing: 0; color: var(--gold-ink);  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* 등장 — 내려오면서 천천히 떠오른다. 스크립트가 없거나 움직임을 줄인 화면에서는 그냥 보인다 */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: .12s; } .js [data-reveal="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── 버튼 · 글자 링크 ─────────────────────────────── */
.jj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px;
       border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
       font: 500 15px/1 var(--font-sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; white-space: nowrap;
       transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.jj-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.jj-btn-cta, .jj-btn-primary { background: var(--point); border-color: var(--point); color: #fff; }
.jj-btn-cta:hover, .jj-btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.jj-btn-light { border-color: rgba(255, 255, 255, .7); color: var(--paper); }
.jj-btn-light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.jj-btn-block { width: 100%; min-height: 56px; font-size: 16px; }
.jj-link { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 5px; border-bottom: 1px solid currentColor;
           font-weight: 500; font-size: 15px; letter-spacing: .03em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.jj-link::after { content: "→"; transition: transform .35s var(--ease); }
.jj-link:hover { color: var(--point-ink); }
.jj-link:hover::after { transform: translateX(5px); }

/* ── 머리말 ───────────────────────────────────────── */
.site-hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
           border-bottom: 1px solid var(--line); }
.hd-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hd-h); }
.brand { text-decoration: none; }
.brand-word { font-family: var(--font-serif); font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: var(--accent); }
.gnb ul { display: flex; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.gnb a { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .01em; padding: 8px 0; }
.gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
                transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.gnb a:hover::after, .gnb a[aria-current]::after { transform: scaleX(1); }
.gnb a[aria-current] { color: var(--point-ink); }
.hd-side { display: flex; align-items: center; gap: 20px; }
.member-links { display: flex; gap: 14px; font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }
.member-links a { text-decoration: none; }
.member-links a:hover { color: var(--ink); }
.hd-side .jj-btn-cta { min-height: 42px; padding: 0 22px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ink); }
.burger span { top: 22px; } .burger::before { top: 16px; } .burger::after { top: 28px; }
.m-nav { border-top: 1px solid var(--line); background: var(--paper); }
.m-nav ul { list-style: none; margin: 0; padding: 8px var(--gutter); }
.m-nav li a { display: block; padding: 16px 0; font-family: var(--font-serif); font-size: 19px; text-decoration: none; border-bottom: 1px solid var(--line); }
.m-nav .m-member { display: flex; gap: 18px; padding: 14px var(--gutter) 22px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 1080px) {
  .gnb, .member-links { display: none; }
  .burger { display: block; }
  .hd-side { gap: 8px; }
  .hd-side .jj-btn-cta { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
  :root { --hd-h: 64px; }
  .brand-word { font-size: 23px; }
}

/* ── 본문 머리 ─────────────────────────────────────── */
.site-main { min-height: 60vh; }
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 5vw, 56px); }
.page-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -.035em;
              line-height: 1.25; margin: 18px 0 0; }
.page-lead { color: var(--ink-2); font-size: 17px; margin: 16px 0 0; max-width: 34em; }
.board-wrap { padding-bottom: 120px; }
.muted { color: var(--ink-3); }

/* 페이지 안 바로가기 — 알약 대신 글자 + 밑줄 */
.page-jump { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 28px 0 0; }
.page-jump a { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 500;
               color: var(--ink-2); border-bottom: 1px solid var(--line-strong); }
.page-jump a::after { content: "↓"; font-size: 13px; color: var(--point-ink); }
.page-jump a:hover { color: var(--ink); border-color: var(--ink); }

/* 섹션 — 박스 대신 위 가는 선 + 여백. 페이지들이 같이 쓴다 */
.sec { border-top: 1px solid var(--ink); padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--hd-h) + 16px); }
.sec > h2, .sec-h { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.35; margin: 0 0 22px; }

/* ── 꼬리말 ───────────────────────────────────────── */
.site-ft { background: var(--deep); color: rgba(255, 255, 255, .66); padding: clamp(56px, 7vw, 88px) 0 40px; font-size: 13.5px; }
.site-ft a { color: rgba(255, 255, 255, .9); }
.ft-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.site-ft .brand-word { color: var(--paper); font-size: 34px; }
.ft-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: 15px; }
.ft-contact a { font-weight: 600; text-decoration: none; }
.ft-links { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 8px 0 0; padding: 0; }
.ft-links a { text-decoration: none; }
.ft-links a:hover { text-decoration: underline; }
.ft-links a.strong { font-weight: 700; color: var(--paper); }
.ft-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 26px 0 0; font-size: 12.5px; }
.ft-legal div { display: flex; gap: 8px; }
.ft-legal dt { margin: 0; color: rgba(255, 255, 255, .5); white-space: nowrap; flex: none; }
.ft-legal dd { margin: 0; color: rgba(255, 255, 255, .78); }
.ft-copy { margin: 20px 0 0; font-size: 12px; color: rgba(255, 255, 255, .45); letter-spacing: .04em; }

/* 모바일 하단 고정 */
.m-dock { display: none; }
@media (max-width: 760px) {
  .m-dock { display: grid; grid-template-columns: 1fr 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
            background: var(--paper); border-top: 1px solid var(--line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }
  .m-dock a { display: flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none;
              font-weight: 600; font-size: 15px; border: 1px solid var(--line-strong); color: var(--ink); }
  .m-dock a.primary { background: var(--point); border-color: var(--point); color: #fff; }
  body { padding-bottom: 72px; }
}

/* ── 폼 ───────────────────────────────────────────── */
.field { display: grid; gap: 6px; margin: 0 0 18px; }
.field > label, .field > .label { font-weight: 700; font-size: 15px; }
.field .req { color: var(--danger); margin-left: 3px; }
.field .hint { font-size: 13.5px; color: var(--ink-3); }
.input, .select, .textarea { width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong);
         border-radius: var(--radius); background: #fff; font: 400 16px/1.5 var(--font-sans); color: var(--ink); }
.textarea { min-height: 130px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong);
               border-radius: 0; background: #fff; font-size: 15px; cursor: pointer; transition: border-color .25s, background .25s; }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.agree { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 14px 16px; margin: 0 0 12px; }
.agree summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
.agree table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.agree th, .agree td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.agree th { background: var(--mist); width: 8em; font-weight: 600; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-top: 8px; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.form-error { background: #FBEDEB; color: var(--danger); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 18px; font-size: 15px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── 게시판 공통 덮어쓰기 ─────────────────────────────── */
.is-board #bo_list, .is-board #bo_v, .is-board #bo_w { width: 100% !important; }
.jj-cats { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0 0 26px; padding: 0; list-style: none; }
.jj-cats a { display: inline-flex; min-height: 40px; align-items: center; border-bottom: 1px solid transparent;
             text-decoration: none; font-size: 15px; color: var(--ink-3); }
.jj-cats a:hover { color: var(--ink); }
.jj-cats a[aria-current] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.jj-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.jj-list li { border-bottom: 1px solid var(--line); }
.jj-list a.row { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 18px 4px; text-decoration: none; align-items: baseline; }
.jj-list a.row:hover .tt { text-decoration: underline; }
.jj-list .tt { font-size: 17px; font-weight: 500; }
.jj-list .meta { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.jj-list .cat { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--gold-ink); margin-right: 10px; }
.jj-list .badge { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius); margin-left: 8px; vertical-align: 2px; letter-spacing: .02em; }
.jj-list .badge.pending { background: var(--notice-soft); color: var(--notice); }
.jj-list .badge.secret { background: var(--mist); color: var(--ink-3); }
.jj-list .badge.notice { background: var(--ink); color: #fff; }
.jj-list .empty { padding: 56px 0; text-align: center; color: var(--ink-3); }
.jj-list .reply .tt::before { content: "└ 답변 "; color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .jj-list a.row { grid-template-columns: 1fr; } }
.jj-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 0; flex-wrap: wrap; }
.jj-pages { display: flex; gap: 4px; justify-content: center; margin: 28px 0 0; }
.jj-pages a, .jj-pages strong { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--font-num); font-size: 16px; font-variant-numeric: tabular-nums; }
.jj-pages strong { border-bottom: 1px solid var(--ink); font-weight: 600; }
.jj-note { background: var(--notice-soft); color: var(--notice); border-radius: var(--radius); padding: 12px 16px; font-size: 14.5px; margin: 0 0 18px; }

/* ── 회원 화면 (그누보드 회원 스킨 · .is-g5 로 감싼 화면) ───────────── */
.is-g5 .g5-wrap { padding: clamp(36px, 6vw, 72px) 0 96px; }
.jj-auth, #mb_login, .register, #register_form, #reg_result, #find_info, #mb_confirm, #pw_confirm, .mbskin {
  max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
#mb_login, #mb_confirm, #pw_confirm, #find_info { max-width: 460px; }
.auth-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.025em; margin: 6px 0 8px; }
.auth-lead { color: var(--ink-2); margin: 0 0 24px; }
.auth-card, #mb_login .mbskin_box, .register_form_inner, #reg_result, #find_info .new_win_con, #mb_confirm, #pw_confirm {
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  padding: clamp(20px, 3vw, 32px) !important; margin-bottom: 18px !important; }
.agree-block { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.agree-block h2 { font-size: 17px; margin: 0 0 10px; }
.agree-block .req { font-size: 12px; font-weight: 700; color: var(--danger); margin-left: 8px; letter-spacing: .04em; }
.textarea.terms { min-height: 150px; font-size: 14px; color: var(--ink-2); background: var(--mist); }
.agree-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 8px; }
.agree-table th, .agree-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.agree-table th { background: var(--mist); font-weight: 600; }
.check-all { padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius); margin: 4px 0 0; }
.auth-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.auth-actions .jj-btn { min-width: 120px; }

/* 그누보드 회원 스킨 요소를 짝꿍 모양으로 */
.is-g5 h1, .is-g5 .register_form_inner h2, #mb_login h1 { font-family: var(--font-serif); letter-spacing: -.02em; }
#mb_login h1 { font-size: 30px; text-align: left; margin: 0 0 18px; padding: 0; border: 0; }
#mb_login .mb_log_cate { display: flex; justify-content: space-between; align-items: baseline; border: 0 !important; margin: 0 0 14px; }
#mb_login .mb_log_cate h2 { font-size: 17px; border: 0 !important; padding: 0; margin: 0; width: auto; }
#mb_login .mb_log_cate .join { width: auto; border: 0 !important; color: var(--accent); font-weight: 600; background: none !important; padding: 0; }
.register_form_inner h2 { font-size: 18px !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important; }
.is-g5 .frm_input, .is-g5 input[type=text].frm_input, .is-g5 input[type=password], .is-g5 input[type=email], .is-g5 textarea:not(.jjl) {
  box-sizing: border-box; min-height: 50px; height: auto !important; padding: 12px 14px !important; border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important; background: #fff !important; font: 400 16px/1.5 var(--font-sans) !important; color: var(--ink) !important; box-shadow: none !important; }
.is-g5 .frm_input:focus, .is-g5 textarea:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.is-g5 #login_fs .frm_input { width: 100%; margin: 0 0 10px; }
.is-g5 label, .register_form_inner li > label { font-size: 15px; font-weight: 600; color: var(--ink); }
.register_form_inner ul { list-style: none; padding: 0; margin: 0; }
.register_form_inner li { margin: 0 0 16px; }
.is-g5 .frm_info { display: block; font-size: 13px; color: var(--ink-3); margin: 4px 0 6px; }
.is-g5 .btn_submit, .is-g5 button.btn_submit, .is-g5 input.btn_submit {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 140px; min-height: 52px; height: auto !important; padding: 0 26px !important;
  border: 0 !important; border-radius: 0 !important; background: var(--point) !important; color: #fff !important; font: 500 16px/1 var(--font-sans) !important; letter-spacing: .04em; cursor: pointer; }
.is-g5 .btn_submit:hover { background: var(--ink) !important; }
.is-g5 #login_fs .btn_submit { width: 100%; margin: 6px 0 0; }
.is-g5 .btn_close, .is-g5 .btn_cancel, .is-g5 a.btn_cancel {
  display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 52px; height: auto !important; padding: 0 22px !important;
  border: 1px solid var(--ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--ink) !important; font: 500 15px/1 var(--font-sans) !important; letter-spacing: .04em; text-decoration: none; }
.is-g5 .btn_confirm { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 20px 0 0; background: none !important; padding: 0 !important; }
.is-g5 .btn_confirm .btn_submit, .is-g5 .btn_confirm .btn_close { float: none !important; width: auto !important; }
#login_info { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 0; font-size: 14px; }
#login_info a { color: var(--ink-2); }
.is-g5 .chk_box input[type=checkbox] + label span { border-color: var(--line-strong); }
.is-g5 .chk_box input[type=checkbox]:checked + label span { background-color: var(--accent); border-color: var(--accent); }
#captcha, #captcha_key { vertical-align: middle; }
/* 회원가입 1단계 — 그누보드 스킨 style.css 의 #fregister section · p(분홍 띠) 무늬를 걷어낸다 */
#fregister section { border: 0 !important; padding: 0 0 20px !important; margin: 0 0 20px !important; background: none !important; box-shadow: none !important; }
#fregister section h2 { border: 0 !important; padding: 0 !important; background: none !important; }
#fregister p.hint { background: none !important; color: var(--ink-3) !important; font-weight: 400 !important; font-size: 13.5px !important; text-align: left !important; padding: 0 !important; margin: 6px 0 4px !important; line-height: 1.6 !important; }
#login_fs { width: 100% !important; padding: 0 !important; border: 0; }
/* 자동등록방지 — 글자가 그림 위에 겹치던 것 */
.is-g5 #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; position: static; }
.is-g5 #captcha legend { position: static !important; float: none; width: 100%; font-size: 15px; font-weight: 600; margin: 0 0 4px; padding: 0; }
.is-g5 #captcha legend label { position: static !important; }
.is-g5 #captcha #captcha_key { width: 120px !important; min-height: 44px; }
.is-g5 #captcha #captcha_info { flex-basis: 100%; font-size: 13px; color: var(--ink-3); }
#fregister p.hint::before, #fregister p.hint::after { display: none !important; }
.register_form_inner #captcha legend { position: absolute !important; left: -9999px !important; }   /* 제목(h2)과 같은 말이 두 번 나오던 것 */

/* ── 사진 (jj_photo) — 전부 AI 연출 이미지. 사람이 나오면 아래 귀퉁이에 고지 ───────────── */
.ph { position: relative; margin: 0; overflow: hidden; border-radius: 0; background: var(--mist); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-ai { position: absolute; right: 0; bottom: 0; font-size: 10.5px; line-height: 1.4; letter-spacing: .02em; color: var(--ink-2);
         background: rgba(255, 255, 255, .85); padding: 4px 10px; }
.ph.r-wide { aspect-ratio: 16 / 9; } .ph.r-43 { aspect-ratio: 4 / 3; } .ph.r-34 { aspect-ratio: 3 / 4; } .ph.r-band { aspect-ratio: 21 / 8; }

/* 페이지 머리에 사진 — 왼쪽 제목 · 오른쪽 사진 */
.page-head.has-photo { padding-top: clamp(28px, 4.4vw, 56px); }
.page-head.has-photo .ph-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ph-head { aspect-ratio: 16 / 10; border-radius: 50% 50% 0 0 / 26% 26% 0 0; }   /* 아치 — 고유 사진틀 */
@media (max-width: 860px) { .page-head.has-photo .ph-row { grid-template-columns: 1fr; gap: 22px; } }

/* 사진 띠 — 섹션 사이에 넓게 */
.ph-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin: 0 0 28px; }
.ph-strip .ph { aspect-ratio: auto; height: clamp(180px, 22vw, 300px); }
@media (max-width: 760px) { .ph-strip { grid-template-columns: 1fr 1fr; } .ph-strip .ph:first-child { grid-column: 1 / -1; } .ph-strip .ph { height: 160px; } }

/* ── 유튜브 카드 (inc/youtube.php) ───────────── */
.yt-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 18px; }
.yt-grid.yt-long { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.yt-grid.yt-short { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.yt-grid li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.yt-card { display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; text-align: left; }
.yt-thumb { position: relative; display: block; overflow: hidden; border-radius: 0; background: var(--mist); aspect-ratio: 16 / 9; }
.yt-short .yt-thumb { aspect-ratio: 9 / 16; }
.yt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.yt-card:hover .yt-thumb img { transform: scale(1.03); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
           border: 1px solid rgba(255, 255, 255, .85); background: rgba(20, 24, 21, .28); backdrop-filter: blur(3px); transition: background .35s, transform .35s var(--ease); }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 22px; border-style: solid; border-width: 10px 0 10px 15px;
                  border-color: transparent transparent transparent #fff; }
.yt-card:hover .yt-play { background: rgba(20, 24, 21, .5); transform: scale(1.06); }
.yt-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-title { font-weight: 500; font-size: 15.5px; line-height: 1.5; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-title:hover { text-decoration: underline; }
.yt-date { font-size: 13px; color: var(--ink-3); }
.yt-empty { padding: 28px 0; color: var(--ink-3); border-top: 1px solid var(--ink); margin: 0; }

/* 준비 중 화면 — 들어갈 내용 목록 */
.soon-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.soon-list li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.soon-list span { font: 500 20px/1.3 var(--font-num); color: var(--gold-ink);  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* 로그인 — 왼쪽 사진 · 오른쪽 입력 */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1080px; margin: 0 auto; }
.auth-split .auth-ph { aspect-ratio: 4 / 5; border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.auth-split #mb_login { max-width: 420px; width: 100%; margin: 0 !important; }
#mb_login .mbskin_box { background: none !important; border: 0 !important; padding: 0 !important; }
#mb_login h1 { font-size: clamp(30px, 3vw, 40px); font-weight: 500; margin: 18px 0 28px; }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-split .auth-ph { aspect-ratio: 16 / 9; } .auth-split #mb_login { max-width: none; } }
#mb_login .mb_log_cate { width: 100%; margin: 14px 0 22px !important; }
#mb_login .mb_log_cate h2 { font-family: var(--font-serif); font-weight: 500 !important; font-size: clamp(28px, 2.8vw, 36px) !important; letter-spacing: -.03em; }
#mb_login .mb_log_cate .join { margin-left: auto; font-size: 14px; border-bottom: 1px solid currentColor !important; padding-bottom: 2px !important; }
#login_info > div { float: none !important; width: auto !important; }
#login_info { display: flex !important; justify-content: space-between !important; }

/* 사진 띠 아래 AI 고지 한 줄 — 사진마다 붙이면 지저분하다 */
.ph-strip-ai { margin: -16px 0 32px; font-size: 11.5px; color: var(--ink-3); text-align: right; }
.vis-dup { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--point-ink); letter-spacing: .02em; vertical-align: 1px; }

/* ── 모바일 손가락 크기 (2026-10-07 .dev/mobile-audit.cjs 점검) — 누르는 곳은 높이 40px 이상, 글자는 11px 이상 ── */
.ph-ai { font-size: 11.5px; }
.check input, .checklist input { width: 22px; height: 22px; }
.agree summary { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 760px) {
  .ft-links a, .ft-contact a { display: inline-flex; align-items: center; min-height: 40px; }
  .ft-links { gap: 0 20px; }
  .yt-title { padding: 6px 0; }
  .story-head a, #mb_login .mb_log_cate .join, #login_info a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 선 아이콘 (inc/icons.php) — 선은 글자색, 작은 포인트만 주황 */
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .a { fill: var(--point); stroke: none; }
.ico .as { stroke: var(--point); }
.ico .f { fill: currentColor; stroke: none; }
.m-dock .ico { margin-right: 6px; font-size: 18px; }
.m-dock a.primary .ico .as { stroke: #fff; }
.side-row .ico { margin-right: 8px; color: var(--ink-2); }
.jj-list .cat.stage { color: var(--ink-2); font-weight: 500; }
.jj-list .cat .ico { margin-right: 4px; font-size: 15px; }

/* 구획 머리(작은 영문 · 큰 제목 · 한 줄) — 메인 · 베트남 진행 순서 공용. 2026-10-14 home.css 에서 옮김 */
.sec-head { margin: 0 0 clamp(28px, 3.4vw, 48px); max-width: 40em; }
.sec-head.split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.sec-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -.04em; line-height: 1.28; margin: 22px 0 0; word-break: keep-all; }
.sec-title b, .page-title b { font-weight: inherit; }   /* 굵기 섞기(매거진 결)는 쓰지 않는다 — 2026-10-14 */
.sec-lead { color: var(--ink-2); margin: 0; font-size: 16px; line-height: 1.85; }
.sec-head:not(.split) .sec-lead { margin-top: 18px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 40em; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center .sec-lead { margin-top: 16px; }
.sec-lead a { color: var(--point-ink); }
@media (max-width: 860px) { .sec-lead br { display: none; } }
@media (max-width: 640px) { .sec-head.center { text-align: left; } .sec-head.center .eyebrow { justify-content: flex-start; } }

/* 구획 앞 번호(01 · 02 …)는 매거진 결이라 숨긴다 — 2026-10-14 */
.eyebrow .no { display: none; }

/* ══ 부드럽게 (2026-10-14 「너무 딱딱 각지다」) — 모서리 둥글게 · 그림자 옅게 · 버튼 알약 ══
   아치 사진틀(.ph-head · 메인 나라 · 짝꿍맞선 사진)은 고유 모양이라 그대로 둔다 */
:root { --r-sm: 10px; --r: 18px; --r-lg: 26px; }
.jj-btn { border-radius: 999px; letter-spacing: 0; font-weight: 600; }
.input, .textarea, select.input, .agree, .card-box { border-radius: var(--r-sm); }
.ph:not(.ph-head):not(.cty-ph):not(.m-country-ph):not(.with-ph):not(.pano-ph):not(.hero-ph) { border-radius: var(--r); }
/* 메인 */
.pano { gap: 14px; } .pano-c { border-radius: var(--r-lg); }
.fan-p { border-radius: 8px; }
.jn-panels { border-radius: var(--r-lg); } .jn-ph { border-radius: var(--r); }
.trip-card { border-radius: var(--r-lg); }
.trip-dep li, .trip-inc li { border-radius: var(--r-sm); }
.desk-card { border-radius: var(--r); overflow: hidden; }
.faq-cta { border-radius: var(--r-lg); }
.faq-list details { border-radius: 0; }
.principles li .pr-ic { border-radius: 14px; }
.yt-thumb { border-radius: var(--r); }
.trip-ph, .closing-ph, .pano-ph, .vn-hero-ph { border-radius: 0; }
/* 나라 · 짝꿍맞선 · 비용 · 법정 문서 */
.vt-card, .vt-total, .vt-dep span, .cty-box, .cty-cta, .tp-banner, .tp-flow li, .tp-box, .tp-retry, .tp-dep li, .lg-ins, .lg-note, .letter, .letters a, .qa-ask, .st-vid { border-radius: var(--r); }
.cty-cta, .st-vid { overflow: hidden; }
.page-jump a { border-radius: 999px; }

/* ══ 색 — 차콜 + 테라코타 (2026-10-14 사용자 선택 E · design/color-options/more3.html) ══
   테라코타는 「누를 곳(버튼)」과 몇 군데 강조에만. 숫자 · 작은 표시는 차콜 */
:root {
  /* 글씨 색 진하게 (2026-10-15 사용자 「색만 진하게」 · design/font-3 시안 0) — 글꼴은 고운돋움 · 프리텐다드 그대로 */
  --ink: #1C1A19; --ink-2: #3A3532; --ink-3: #57514C;
  --line: #E8E1D9; --line-strong: #CDC3B8;
  --point: #C8693F; --point-ink: #A9562F;          /* 테라코타 — 버튼 흰 글자 대비 3.6:1 → 버튼 글씨는 굵게 */
  --blush: #E39A72; --blush-soft: #F1E5DA;
  --forest: #2B2928; --deep: #232120; --deep-2: #33302E;
  --paper-2: #F3EEE8; --mist: #F1ECE6;
  --bg-ivory: #F7F3EE; --bg-sand: #EFE4D8; --bg-blush: #F4E8DF;
  --accent: #2B2928; --accent-soft: #F1ECE6;
}
/* 숫자는 차콜로 — 테라코타는 버튼 · 「짝꿍」 · 작은 영문만 */
body .trip-price b, body .trip-facts b, body .vt-total b, body .tp-price b, body .jn-money b, body .hl .num, body .cty-price b,
body .vc-legend em, body .pano-f b, body .vn-stats b { color: inherit; }
body .trip-price b, body .trip-facts b, body .vt-total b, body .tp-price b, body .jn-money b, body .cty-price b { color: var(--ink); }
body .hl .num { color: var(--ink); font-weight: 500; }
.jj-btn-primary, .jj-btn-cta { font-weight: 700; }

/* ── 페이지 안 바로가기 — 다시 짬 (2026-10-15 사용자 「너무 없어 보여」): 밑줄 글자 → 하나로 이어진 둥근 띠 · 번호 · 동그라미 화살표 ── */
.page-jump { display: inline-flex; flex-wrap: nowrap; gap: 4px; max-width: 100%; margin: 28px 0 0; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(60, 40, 20, .06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; counter-reset: pj; }
.page-jump::-webkit-scrollbar { display: none; }
.page-jump a { counter-increment: pj; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 7px 0 18px;
  border: 0 !important; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .25s; }
.page-jump a::before { content: counter(pj, decimal-leading-zero); font: 500 12px/1 var(--font-num); color: var(--point-ink); letter-spacing: .02em; }
.page-jump a::after { content: "↓"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-ivory); color: var(--ink); font-size: 13px; transition: background .25s, color .25s; }
.page-jump a:hover { background: #fff; color: var(--ink); }
.page-jump a:hover::after { background: var(--point); color: #fff; }
/* 사진 위 (베트남 · 짝꿍 소개 머리) — 반투명 유리 */
.vn-hero .page-jump, .ab-hero .page-jump, .pr-hero .page-jump { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.vn-hero .page-jump a, .ab-hero .page-jump a, .pr-hero .page-jump a { color: #fff; }
.vn-hero .page-jump a::before, .ab-hero .page-jump a::before, .pr-hero .page-jump a::before { color: #FFD9C2; }
.vn-hero .page-jump a::after, .ab-hero .page-jump a::after, .pr-hero .page-jump a::after { background: rgba(255, 255, 255, .2); color: #fff; }
.vn-hero .page-jump a:hover, .ab-hero .page-jump a:hover, .pr-hero .page-jump a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
@media (max-width: 640px) { .page-jump a { padding: 0 6px 0 14px; font-size: 14px; gap: 8px; } .page-jump a::after { width: 26px; height: 26px; } }
.page-jump { align-self: flex-start; width: max-content; } .vn-hero .page-jump a::after { color: #fff; }

/* ── 휴대폰에서 접는 칸 (2026-10-15) — 동작은 parts/footer.php. 넓은 화면은 그대로 ───────── */
.nv-cafe { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: #03C75A; color: #fff; font: 800 11px/1 var(--font-sans); font-style: normal; vertical-align: -3px; }
.ft-cafe { white-space: nowrap; }
.mf-ic { display: none; }
@media (max-width: 760px) {
  .mf-on [data-mf-i]:not(.mf-open) [data-mf-x] { display: none !important; }
  .mf-on [data-mf-i] { position: relative; }
  .mf-on [data-mf-i] > :not([data-mf-h]):not(.mf-ic), .mf-on [data-mf-h] { }
  .mf-on [data-mf-i]:not(:has([data-mf-h])), .mf-on [data-mf-h] { cursor: pointer; padding-right: 44px !important; position: relative; -webkit-tap-highlight-color: transparent; }
  .mf-on .mf-ic { display: grid; place-items: center; position: absolute; right: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: rgba(0, 0, 0, .06); color: var(--ink); font: 400 18px/1 var(--font-sans); pointer-events: none; }
  .mf-on .mf-ic::before { content: "+"; }
  .mf-on .mf-open .mf-ic { top: 22px; margin-top: 0; background: var(--ink); color: #fff; }
  .mf-on .mf-open .mf-ic::before { content: "\2212"; }
  /* 메인 진행 8단계 — 쌓이는 카드 대신 접힌 줄 */
  .mf-on .jst-c { position: relative !important; top: auto !important; grid-template-rows: auto; margin-bottom: 8px; }
  .mf-on .jst-c:not(.mf-open) .jst-bd { padding: 16px 18px; }
  .mf-on .jst-c:not(.mf-open) .jst-of { position: static; display: none; }
  .mf-on .jst-c:not(.mf-open) h3 { margin-top: 2px; font-size: 18px; }
  /* 메인 체크리스트 */
  .mf-on.tc-list > li { padding-top: 14px; padding-bottom: 14px; }
  .mf-on.tc-list > li:not(.mf-open) h3 { margin-bottom: 0; }
  /* 맞선 서류 · 안내프로그램 · 갈림길 */
  .mf-on .vd-card:not(.mf-open) h3, .mf-on .pq-c:not(.mf-open) .pq-q, .mf-on .rt-row:not(.mf-open) h3 { margin-bottom: 0; }
  .mf-on.rt .rt-row:not(.mf-open) .rt-fork { display: none; }
  .mf-on.ck-places .ck-pl:not(.mf-open) { padding-bottom: 14px; }
  .mf-on .ck-pl h3[data-mf-h] { padding-right: 44px !important; }
  .mf-on.tp-steps > li:not(.mf-open) h3 { margin-bottom: 0; }
}
@media (max-width: 760px) {
  /* 바로가기 줄 — 오른쪽이 잘리면 「옆으로 더 있음」이 보이게 끝을 흐리게 */
  .page-jump { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .page-jump.at-end { -webkit-mask-image: none; mask-image: none; }
  /* 누르는 곳 키우기 — 체크 칸 · 작은 글자 단추 */
  .jj-a-keep { min-height: 44px; }
  .jj-a-ag summary { display: inline-flex; align-items: center; min-height: 40px; }
  .ck-pl label { min-height: 52px; }
}
@media (max-width: 520px) {
  /* 영상 페이지 — 한 줄에 둘 */
  .vf-pane .yt-grid.yt-long { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 10px !important; }
  .vf-pane .yt-long .yt-title { font-size: 13.5px; }
  .vf-pane .yt-long .yt-thumb { border-radius: 12px; }
}
@media (max-width: 520px) {
  .vf-pane .yt-long .yt-title { line-height: 1.45; max-height: 2.9em; }
  .vf-pane .yt-long .yt-play { transform: scale(.72); }
}

/* 로고 — 기존 짝꿍 핑크 로고 (2026-10-21 대표님) */
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; height: 74px; width: auto; }
.ft-logo { display: block; height: 96px; width: auto; }
@media (max-width: 860px) { .brand-logo { height: 56px; } .ft-logo { height: 80px; } }

/* ══ 글꼴 — 고운돋움 통일 (2026-10-21 대표님 B안 · design/font-4) ══
   제목 · 본문 모두 고운돋움. 숫자(--font-num)는 프리텐다드 그대로(금액 · 전화가 또렷하게).
   공식 자료(수수료 · 이용약관 · 개인정보 · 손해배상)는 본문을 프리텐다드로 되돌린다 — legal.css · fees.php 끝 */
:root { --font-sans: "Gowun Dodum", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
/* 작은 글씨도 검은색 (2026-10-21 대표님 「작은 글씨 색상 들어가서 가독성이 안 좋다 — 검은색으로」) */
:root { --ink: #111111; --ink-2: #1A1A1A; --ink-3: #333333; }

/* ══ 글꼴 — C안으로 바꿈 (2026-10-21 대표님 「C안으로 · 굵기는 그대로」) — 위 고운돋움 통일을 덮는다 ══
   제목 마루부리(부드러운 명조) · 본문 나눔스퀘어라운드(둥근 고딕) · 숫자 프리텐다드. 공식 자료 본문은 프리텐다드(legal.css · fees.php) */
:root {
  --font-serif: "MaruBuri", "Gowun Dodum", Pretendard, serif;
  --font-sans: "NanumSquareRound", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* 꼬리말 연락처 아이콘 (2026-10-21 대표님) — 전화 · 카카오톡 · 메일 · 네이버 카페 모두 누르면 연결 */
.ft-contact a { display: inline-flex; align-items: center; gap: 6px; }
.ft-contact a .ico { width: 17px; height: 17px; flex: none; opacity: .9; }
.ft-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 꼬리말 연락처 — 모두 알약 단추 (2026-10-21) */
.site-ft .ft-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.site-ft .ft-contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; }
.site-ft .ft-contact a:hover { text-decoration: none; filter: brightness(1.06); }
.site-ft .ft-contact a .ico { width: 18px; height: 18px; opacity: 1; }
.site-ft .fc-tel { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.site-ft .fc-kk { background: #FEE500; color: #3C1E1E; }
.site-ft .fc-ml { background: #fff; color: #1C1A19; }
.site-ft .fc-cafe { background: #03C75A; color: #fff; }
.site-ft .fc-cafe .nv-cafe { background: #fff; color: #03C75A; margin-right: 0; }
.ft-hours { margin: 10px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); }

/* 꼬리말 카톡 아이디 — 누르면 복사 (2026-10-21) */
.site-ft .fc-id { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #FEE500; background: transparent; color: #FEE500; font: 700 15px/1 var(--font-sans); cursor: pointer; position: relative; }
.site-ft .fc-id b { color: #fff; font-weight: 700; }
.site-ft .fc-id .ico { width: 18px; height: 18px; }
.site-ft .fc-id.copied::after { content: "복사됨"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: #fff; color: #1C1A19; font-size: 12.5px; white-space: nowrap; }

/* ══ 2026-10-27 오픈 전 점검 (휴대폰) ══
   입력칸 글자가 16px 보다 작으면 아이폰이 누를 때 화면을 확대해 버린다 — 휴대폰에서는 16px 로 */
@media (max-width: 860px) {
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea { font-size: 16px !important; }
}
/* 영문 작은 머리말 11.5 → 12px (휴대폰에서 너무 작았던 것) */
.eyebrow { font-size: 12px; }
/* 그누보드 기본 CSS 의 p { word-break: break-all } 이 문단을 음절 단위로 잘랐다(「계약되지 않습/니다」) — 낱말 단위로 */
p { word-break: keep-all; overflow-wrap: break-word; }
/* 아래 고정 바 — 320px 폰에서 「오픈채팅」이 두 줄로 깨지던 것 */
.m-dock a { white-space: nowrap; }
@media (max-width: 360px) { .m-dock { gap: 4px; padding-left: 6px; padding-right: 6px; } .m-dock a { font-size: 14px; letter-spacing: -.02em; } .m-dock .ico { margin-right: 4px; font-size: 16px; } }
/* 페이지 맨 끝 — 짙은 꼬리말과 고정 바 사이에 흰 띠가 보이던 것 */
@media (max-width: 760px) { html { background: var(--ink, #111); } }
/* 휴대폰 메뉴 — 열면 X · 뒤 화면 잠금 · 어두운 막 */
.burger span, .burger::before, .burger::after { transition: transform .25s var(--ease, ease), opacity .2s; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
body.nav-open { overflow: hidden; }
body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(20, 18, 16, .42); }
.m-nav { max-height: calc(100dvh - var(--hd-h, 64px)); overflow-y: auto; overscroll-behavior: contain; }
/* 글자 링크 밑줄이 칸 폭 전체로 늘어나던 것(이야기 「후기 전체 보기」) — 글자 길이만큼 */
.jj-link { width: fit-content; }
/* 문장 끝 작은 글자 링크 — 손가락으로 누르기 쉽게 위아래 여백 */
.prep-foot a, .lic-links a { display: inline-block; padding: 10px 2px; }
/* 사진 위 작은 글자 — 밝은 사진에서 안 보이던 것 */
.vn-hero dl dt, .vs-tx small, .rh-tx small, .ab-fc-no { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 0 14px rgba(0, 0, 0, .35); }
@media (max-width: 640px) {
  /* 러시아 「항목별 내역 · 위약금 · 재진행 보기」 단추가 320px 에서 칸 밖으로 */
  .cty-box .jj-btn { white-space: normal; text-align: center; max-width: 100%; }
  /* 준비 서류 — 「3가/지」 깨짐 · 제목 끝 한 글자만 넘어가던 것 */
  .ck-pl h3 small { flex: none; white-space: nowrap; }
  .vz-tp { flex-wrap: wrap; }
  /* 등록증 카드 상호가 「…국제결/혼」으로 깨지던 것 */
  .lic-card .lic-name { font-size: 21px; letter-spacing: -.04em; }
  /* 진행 단계 이름끼리 붙어 보이던 것 */
  .jn-t { padding-right: 10px; }
  /* 접는 카드 제목을 아이콘 높이 가운데에 */
  .vd-card h3 { align-self: center; } .rt-root { align-items: center; } .rt-root h3 { margin: 0; }
}
/* 입력칸 오류 표시 (상담 신청 · 2026-10-27) */
.input[aria-invalid="true"] { border-color: var(--danger, #C0392B) !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
/* 꼬리말 사업자 정보 — 12.5px · 흐린 회색이 어두운 바탕에서 안 읽히던 것 */
.site-ft dt, .site-ft dd { font-size: 13px; } .site-ft dt { color: rgba(255, 255, 255, .62); } .ft-copy { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
/* 고정 바 자리 — 흰 여백 대신 꼬리말 안에서 비워 둔다(꼬리말과 바 사이 흰 띠 없앰) */
@media (max-width: 760px) { body { padding-bottom: 0; } .site-ft { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); } html { background: transparent; } }
/* 제목 끝 한두 글자만 다음 줄로 넘어가지 않게 · 문단 끝 외톨이 낱말 줄이기 (지원하는 브라우저에서) */
h1, h2, h3, summary h2, summary h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* 가운뎃점(·)이 줄 처음에 홀로 오지 않게 — 수수료 머리 */
.fees-meta .nw { white-space: nowrap; }
/* 상담 신청 첫 화면 — 사진 위 전화 알약 · CONTACT 글씨 또렷하게 */
.ct-pills a:not(.kk):not(.ml) { background: rgba(20, 18, 16, .42) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ct-ph .eyebrow { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
/* 영상 페이지 「유튜브 채널」 글자 링크가 본문과 같아 보이던 것 */
.vid-more a { color: var(--point-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 회원가입 1단계 — 「전문 보기 · 자세히」가 그냥 글자처럼 보이던 것 · 휴대폰에서 표가 좁아 「보유기/간」 깨짐 */
.jj-a-ag summary { color: var(--point-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 640px) {
  .jj-a-ag details, .jj-a-ag .d { margin-left: 0 !important; padding-left: 0 !important; }
  .jj-a-ag .agree-table { font-size: 13px; } .jj-a-ag .agree-table th, .jj-a-ag .agree-table td { padding: 8px 6px; word-break: keep-all; }
  .jj-a-ag textarea.terms { height: 240px; padding: 14px; }
}
@media (max-width: 860px) {
  /* 준비 서류 — 펼친 묶음의 「−」가 제목 옆이 아니라 구분선 위로 내려가 있던 것 */
  .mf-on .ck-pl h3[data-mf-h] { position: relative; }
  .mf-on .ck-pl .mf-ic, .mf-on .ck-pl.mf-open .mf-ic { top: 50%; margin-top: -14px; right: -8px; }
}
@media (max-width: 640px) {
  /* 맞선 여행 7단계 — 마지막 카드가 혼자 반 칸만 차지하던 것 */
  .tp-steps > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 고정 바를 뺀 화면(글쓰기 · 회원정보)은 아래 여백도 없앤다 */
@media (max-width: 760px) { body:has(.m-dock[hidden]) .site-ft { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } }