/* 디자인 수정 (한겨레, 2026-11-13, '인터렉티브 수정사항' 문서)
   index.html, lens.css, start-map.css, siteframe.css 뒤에 읽혀 그 위에 덮어씁니다. 되돌리려면 index.html의
   <link rel="stylesheet" href="redesign.css"> 한 줄을 지우면 됩니다 (빌드하면 탭별 페이지에도 똑같이 들어갑니다).
   0. 배경색
   1. 시작 화면 안내 글 위아래 여백
   2. '태어날 조건' 영역
   3. 갈림길 카드, 돋보기, 모서리 라운딩 제거 (일러스트 카드 안의 글자 배치와 다른 삶 슬라이딩은 그대로)
   4. 끝난 뒤 아래 버튼들
   (편지지 글자는 디자인 쪽에서 다시 고치기로 해 여기서 다루지 않습니다) */

/* ── 0. 배경색: 누런 베이지 대신 #F4F5F5, 회색들도 같은 계열의 중성 회색으로 ── */
:root { --bg: #f4f5f5; --line: #dcdedf; --hl0: #e8eaea; --muted: #6a6c6d; --faint: #a2a5a6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #161514; --line: #34322e; --hl0: #2a2926; --muted: #a29c92; --faint: #6e6961; } }
:root[data-theme="dark"] { --bg: #161514; --line: #34322e; --hl0: #2a2926; --muted: #a29c92; --faint: #6e6961; }

/* ── 1. 시작 화면 안내 글: 위아래 120px → 48 / 40px (폰 40 / 32px), 안내문과 푸터 사이는 넉넉하게 ── */
.lead { margin: 48px 0 40px; }
.go-row { margin-bottom: 0; }
.go-row + .small { margin: 32px 0 80px; }
@media (max-width: 767px) { .lead { margin: 40px 0 32px; } .go-row + .small { margin: 28px 0 64px; } }

/* ── 2. '태어날 조건' 영역 ──
   위 굵은 괘선, 왼쪽 '태어날 조건' 꼬리표와 오른쪽 '다르게 살아보기' 밑줄 링크, 고른 조건 네 칸, 그 아래 폭 가득 '인생 시작 →'.
   열면 같은 자리에서 아래로 펼쳐집니다. (끝 화면의 '조건을 바꿔서 태어나기'는 4번) */
.go-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head det" "sum sum" "go go"; gap: 0;
  margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--ink); }
.go-row::before { content: "태어날 조건"; grid-area: head; align-self: start; line-height: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink); pointer-events: none; }
.go-row > details { grid-area: det; min-width: 0; margin: 0; }
.go-row > .cond-sum { grid-area: sum; }
.go-row > .primary { grid-area: go; }
.go-row.open { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head det" "go go"; }
.go-row.open > details { grid-area: 1 / 1 / 2 / 3; }
@media (max-width: 767px) { .go-row { grid-template-areas: "head det" "sum sum" "go go"; } .go-row.open { grid-template-areas: "head det" "go go"; } }
/* 다르게 살아보기: 상자 없이 밑줄 링크 + 꺾쇠 */
.go-row > details.cond { border: 0; border-radius: 0; background: transparent; padding: 0; }
.go-row > details.cond > summary { min-height: 24px; justify-content: flex-end; gap: 6px; padding: 0; border: 0; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.go-row > details.cond > summary::before { content: none; }
.go-row > details.cond > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.go-row > details.cond[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.go-row > details.cond[open] > summary { border-bottom: 0; }
.go-row > details.cond[open] { padding-bottom: 8px; }
.go-row > details.cond .pick-block:first-of-type { margin-top: 20px; }
.go-row > details.cond .pick-block { padding-top: 16px; border-top: 1px solid var(--line); }
.go-row > details.cond .pick-block:empty { display: none; }
@media (max-width: 767px) { .go-row > details.cond > summary { padding: 12px 0; margin: -12px 0; } } /* 누르기 쉽게, 모양은 그대로 */
/* 고른 조건: 이름은 작게, 값은 크게. 넓은 화면 네 칸, 폰 두 칸 */
.go-row > .cond-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column;
  gap: 2px 16px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.go-row > .cond-sum > .cond-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.go-row > .cond-sum > .cond-v { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink); }
@media (max-width: 767px) {
  .go-row > .cond-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .go-row > .cond-sum > .cond-k:nth-child(4n + 3) { margin: 10px 0 0; }
}
/* 펼친 조건 안의 버튼과 지도: 모서리 각지게 */
.seg-opt > span, .place-btn, .place-input, .place-list, .place-map { border-radius: 2px; }

/* ── 3. 모서리 라운딩 제거, 갈림길 카드, 돋보기 ── */
/* 일러스트 카드: 그림 위 글자 배치, 다른 삶 서랍(슬라이딩)은 업체 그대로. 모서리만 각지게 */
.pic-fig, .cmp, .card .choice, .card .bmap-map, .bmap-gl, .cert, .info-pop, .confirm, .confirm-rows { border-radius: 0; }
.cmp-slide .cmp-tag { border-radius: 2px; }
/* 갈림길 카드: 흰 바탕 띠, 위 굵은 괘선, 아래 가는 괘선으로 이야기와 구분. PC는 기둥보다 양쪽 24px 넓게, 폰은 화면 폭 가득 */
#log > .card { margin: 48px -24px 48px calc(3.4rem + 12px - 24px); padding: 26px 24px 28px; background: var(--panel);
  border: 0; border-top: 2px solid #a2a5a6; border-bottom: 1px solid #a2a5a6; border-radius: 0; } /* 선 색 검정 → 중간 회색 B안 (2026-11-13) */
@media (max-width: 767px) {
  #log > .card { margin-left: calc(-1 * var(--side-pad)); margin-right: calc(-1 * var(--side-pad)); padding: 24px var(--side-pad) 26px; }
}
.card .step { color: var(--ink); font-size: 12px; letter-spacing: .12em; }
/* 갈림길 안 글: 문단 사이는 좁게, 지도 위아래와 선택지 위는 넓게 */
#log > .card h3 { margin: 6px 0 12px; }
#log > .card p { margin: 0 0 6px; line-height: 1.45; } /* 행간 1.55 → 1.45 (2026-11-13) */
#log > .card .bmap { margin: 22px 0; }
#log > .card .choices { margin: 28px 0 0; }
@media (max-width: 767px) { #log > .card p { margin-bottom: 4px; } #log > .card .choices { margin-top: 24px; } }
.card .choice { border-radius: 2px; }
.card .choice:hover:not(:disabled) { border-color: var(--ink); }
.card .choice.picked { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* 돋보기: 상자 대신 위 굵은 괘선, 아래 가는 괘선 */
.lens { border: 0; border-top: 2px solid #a2a5a6; /* 검정 → 갈림길 카드와 같은 회색 (2026-11-13) */ border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 18px 0 20px; margin-top: 48px; }
.lens.folded:hover, .lens.folded:focus-visible { border-color: #a2a5a6; border-bottom-color: var(--line); }
.lens-title { color: var(--ink); font-size: 12px; letter-spacing: .12em; }
.lens-q { margin: 10px 0 14px; }
.lens.folded .lens-q { margin-bottom: 14px; }
.lens .lc-icon { border-radius: 0; }
/* 펼쳐 보기 / 접기: 밑줄 친 글자 링크 */
.lens-toggle { min-height: 0; margin: 0; padding: 0 0 2px; border-radius: 0; background: none; color: var(--ink); border-bottom: 1px solid var(--ink);
  font-size: 15px; font-weight: 600; gap: 6px; }
.lens-toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lens:not(.folded) .lens-toggle::after { transform: translateY(2px) rotate(-135deg); }
.lens-fold-end { margin: 14px auto 0; }
.dist-pt { box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 767px) { .lens { padding: 16px 0 18px; } .lens-toggle { padding-top: 12px; margin-top: -12px; } }
/* 이야기 중 '계속 보기': 테두리만, 오른쪽 화살표 */
#log > .primary { display: flex; align-items: center; justify-content: space-between; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px; font-size: 17px; padding: 0 20px; transition: background-color .15s, color .15s; }
#log > .primary::after { content: "→"; font-size: 20px; font-weight: 400; }
#log > .primary:hover, #log > .primary:focus-visible { background: var(--ink); color: var(--bg); }

/* ── 4. 끝난 뒤 아래 버튼들 ──
   '이미지 저장·공유'(검정, 폭 가득) → 공유 아이콘 줄 → '다른 삶으로 다시 태어나기 →'(검정)
   → '같은 조건에서 다르게 선택해 보기' / '조건을 바꿔서 태어나기'(테두리, 나란히) → '처음 화면으로'(테두리, 폭 가득). 모서리는 모두 각지게 */
.go-row > .primary, .ending > .primary, .ending .cond > .primary, .share .share-main {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--btn-l); padding: 0 20px;
  border: 0; border-radius: 2px; background: #000; color: #fff; font-size: 17px; font-weight: 700; }
.share .share-main { justify-content: center; }
.go-row > .primary::after, .ending > .primary::after, .ending .cond > .primary::after { content: "→"; font-size: 20px; font-weight: 400; }
.go-row > .primary { margin: 20px 0 0; }
.go-row > .primary:hover:not(:disabled), .ending > .primary:hover, .ending .cond > .primary:hover, .share .share-main:hover { background: #2b2b2b; }
.go-row > .primary:disabled { opacity: .35; cursor: default; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.go-row > .primary, .ending > .primary, .ending .cond > .primary, .share .share-main) { background: var(--ink); color: var(--bg); } }
.share-social { margin: 16px 0 28px; }
.ending > .secondary, .re-row .secondary { border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); }
.ending > .secondary:hover, .re-row .secondary:hover, .re-row .secondary[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.re-row .secondary { padding: 8px 12px; line-height: 1.35; }
.ending > .primary { margin: 0 0 8px; }
/* '조건을 바꿔서 태어나기'로 열리는 조건: 흰 상자 대신 위 굵은 괘선 */
.ending .cond { margin: 16px 0 8px; padding: 6px 0 16px; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; }
.ending .cond .pick-block { padding-top: 16px; border-top: 1px solid var(--line); }
.ending .cond .pick-block:empty { display: none; }
/* 이미지 고르기 창 안의 버튼들도 각지게 */
.share-pop, .share-card img, .share-card-btns button { border-radius: 2px; }
@media (max-width: 379px) { .re-row { grid-template-columns: minmax(0, 1fr); } }

/* ── 5. 가독성 간격 (2026-11-13) ── */
/* 시작 화면 안내 글: 회색 대신 검정, 행간 2 → 1.8 (줄이 너무 떠 보이지 않게) */
.lead { color: var(--ink); line-height: 1.8; }
/* 이야기 문장: 행간 1.55 → 1.7, 같은 나이 안의 문장 사이 4px → 8px */
.ln .t { line-height: 1.7; }
.ln { margin: 8px 0; }
.ln .age { line-height: calc(var(--fs-body) * 1.7); }
/* 그림 안 글 (2026-11-13, _시안/caption-options.html A안): Pretendard SemiBold 그대로, 행간 1.45, 문장 사이 6px.
   글 뒤 그라데이션은 업체 것(.74/.42)보다 옅게, 대신 글자 그림자를 조금 진하게 해 밝은 그림에서도 읽히게 */
.pic-cap { background: linear-gradient(to top, rgb(14 12 18 / .62) 0, rgb(14 12 18 / .38) 45%, rgb(14 12 18 / 0) 100%);
  text-shadow: 0 1px 2px rgb(0 0 0 / .45), 0 0 10px rgb(0 0 0 / .25); }
.pic-cap .t { font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.pic-cap .t + .t, .pic-cap .t + .age { margin-top: 6px; }
.pic-cap .age { font-size: 13px; font-weight: 600; letter-spacing: .04em; margin-bottom: 4px; }
/* '나에게 한마디': 제목과 입력창 사이는 업체 그대로, 입력창과 안내문 사이 10px, 버튼은 16px 아래.
   갈림길 카드 안 문단 규칙(#log > .card p)보다 앞서도록 #log를 붙임 */
.ask { margin-top: 28px; }
#log .ask .ask-note { margin-top: 10px; } /* 입력창과 아래 안내문('나에게 한마디'는 …) 사이 10px */
.ask .primary { margin-top: 16px; }
@media (max-width: 767px) { .ln .t { line-height: 1.65; } .lead { line-height: 1.75; } }
/* 한마디 입력창과 '계속' 버튼도 다른 버튼과 같은 결로: 각진 모서리, 검정 버튼 */
.ask input { border-radius: 2px; }
.ask input:focus { outline-color: var(--ink); }
.ask .primary { border-radius: 2px; background: #000; color: #fff; }
.ask .primary:hover { background: #2b2b2b; }

/* ── 6. 맨 위 메뉴 (PC): 탭 글자 15px, 탭 묶음은 오른쪽 정렬 (2026-11-13) ──
   로고는 왼쪽 그대로. 폰은 아래 따로 */
@media (min-width: 768px) {
  .sf-tabs { margin-left: auto; } /* 탭 묶음은 오른쪽 끝으로 (2026-11-13: 가운데 → 오른쪽) */
  .sf-tab { font-size: 15px; }
}
/* 폰: 짧은 이름 탭 16px → 14px, 탭 좌우 여백 12px → 10px */
@media (max-width: 767px) { .sf-tab { font-size: 14px; padding: 0 10px; } }
/* 갈림길 카드 안 행간 (2026-11-13): 제목 1.5 → 1.35, 선택지 글 1.5 → 1.35, 한마디 제목 1.35 */
#log > .card h3 { line-height: 1.35; }
#log > .card .choice-t, #log > .card .choice { line-height: 1.35; }
#log > .card .choice .sub { line-height: 1.4; }
#log > .card .ask label { line-height: 1.35; }
/* 행간을 줄인 만큼 문단 사이는 조금 띄워, 줄과 문단이 구분되게 (6 → 10px, 폰 4 → 8px) */
#log > .card p { margin-bottom: 10px; }
@media (max-width: 767px) { #log > .card p { margin-bottom: 8px; } }

/* ── 7. 프로필 카드 지도 테두리: 진한 회색 대신 옅은 회색 (2026-11-13) ── */
.pf-map { border-color: var(--line); }

/* ── 8. ⓘ 팝업: 글 길이에 맞춘 크기, 단순한 × 닫기 (2026-11-13, 이전 요청안) ──
   PC: 글이 짧으면 그만큼 좁게(최대 400px). 폰: 아래에서 올라오는 시트는 그대로, 여백만 줄임.
   닫기 버튼은 글자('닫기')를 화면 낭독기용으로 남기고 눈에는 × 하나만 */
.info-pop { padding: 14px 44px 14px 16px; font-size: 15px; line-height: 1.6; border-radius: 6px 6px 0 0; box-shadow: 0 -4px 20px rgb(0 0 0 / .12); }
.info-t { margin: 0 0 6px; }
.info-src { font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.info-pop > .info-t:last-child, .info-pop > .info-src:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .info-pop { padding: 16px 48px calc(18px + env(safe-area-inset-bottom)) var(--side-pad); } }
@media (min-width: 768px) {
  .info-pop { width: max-content; max-width: min(400px, calc(100vw - 16px)); padding: 12px 40px 12px 14px; border-radius: 6px; box-shadow: 0 6px 20px rgb(30 25 15 / .12); }
}
.info-x { position: absolute; top: 8px; right: 8px; float: none; margin: 0; width: 28px; height: 28px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 0; line-height: 0; cursor: pointer; transition: background-color .15s, color .15s; }
.info-x::before, .info-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -.75px 0 0 -6.5px; background: currentColor; border-radius: 1px; }
.info-x::before { transform: rotate(45deg); }
.info-x::after { transform: rotate(-45deg); }
.info-x:hover { background: var(--hl0); color: var(--ink); }
.info-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ── 9. 돋보기를 펼쳤을 때 '접기'와 아래 설명(범례) 사이 (2026-11-13) ── */
.lens:not(.folded) .lens-toggle:not(.lens-fold-end) { display: flex; width: fit-content; margin-bottom: 16px; }

/* 10. 모든 선택칸 보조 설명(선택할 수 없음·추가 설명) — 작게, 위 문장과 간격. 비교·전체 보기 등 어디에 놓인 카드든 적용 */
.card .choice .choice-t .sub, #log .card .choice .choice-t .sub { font-size: 13px; line-height: 1.45; margin-top: 6px; }
@media (max-width: 767px) { .card .choice .choice-t .sub, #log .card .choice .choice-t .sub { font-size: 12px; margin-top: 5px; } }

/* 11. 출생증명서(그림) 바로 아래 첫 갈림길 카드 — 위 간격 넓게 (48 → 88px, 폰 72px) */
#log > .cert + .card { margin-top: 88px; }
@media (max-width: 767px) { #log > .cert + .card { margin-top: 72px; } }