/* ===== /letter 뉴스레터 2종 — Paper Calm (모듈 스코프에만 토큰 정의) =====
   시안: docs/JAIN/newsletter_subscribe_page(new)/tokens/paper-calm/*.css
   전역 오염 방지를 위해 토큰은 .lt2_wrap 아래에만 선언한다 */
.lt2_wrap{
  /* colors */
   /* 사이트 코발트로 통일 (2026-08-03 색 단순화) */
  --canvas-white:#fff;--text-body:rgba(0,0,0,.95);
  /* L-7: 웜 그레이 이중 토큰(--lt2-*) 제거 — 전역 토큰으로 치환 */
  /* 레터 색 — 사이트 카테고리색으로 통일 (2026-08-05 사용자 지시).
     구값은 시안 승인색 #0B3A47 / #B54227 이었다. 같은 레터가 홈·/letter·카테고리에서
     서로 다른 색으로 보이던 것을 없앤다. 기준은 src/JAIN/CLAUDE.md 색상 체계 */
  
  
  /* type */
  --display-1-size:64px;--display-1-tracking:-2.125px;
  --heading-2-size:26px;--heading-2-tracking:-.625px;--heading-2-leading:1.23;
  --heading-3-size:22px;--heading-3-tracking:-.25px;
  --title-size:20px;--title-weight:600;--title-tracking:-.125px;
  --body-sm-size:15px;--body-sm-leading:1.33;
  --button-size:16px;--caption-size:14px;
  --eyebrow-size:12px;--eyebrow-tracking:.125px;
  /* spacing / radius / motion */
  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;
  /* 콘텐츠 폭 840px (2026-08-05 실측 후 720 → 840).
     카드 384×278 = 1.38:1. 1252 에서는 590×278 = 2.12:1 이 되어 "카드가 옆으로 길다"는
     이번 리디자인의 출발점이 된 문제가 그대로 남는다. 720 은 3줄 카피(최장 260px)를
     담긴 하지만 여유가 16px뿐이라 폰트 폴백 한 번에 깨진다 — 840 은 여유 76px */
  --space-xl:28px;--space-xxl:32px;--space-section:96px;--container-narrow:840px;
  --radius-card:var(--radius-lg);  /* L-5: radius 8/12/16/9999 로 정리 */
  
  --transition-control:background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  font-family:'Pretendard',-apple-system,sans-serif;
  color:var(--text-body);background:var(--canvas-white);word-break:keep-all;
  max-width:var(--container-narrow);margin:0 auto;padding:56px 24px 100px;
  box-sizing:border-box;
}
.lt2_wrap *{box-sizing:border-box}
.lt2_wrap button{font-family:inherit}

/* ---------- ① 헤더 ---------- */
/* 카드와의 여백 48px — 1280×900 첫 화면에 구독 패널까지 보이게 (2026-09-29 진행안, 구 72px) */
.lt2_head{text-align:center;margin-bottom:48px}
/* Q 레터 로고 — 타이틀 위 블록에서 타이틀 오른쪽 인라인으로 (2026-08-05 1w안) */
.lt2_qmark{display:inline-flex;vertical-align:middle;margin:0 0 5px 12px}  /* L-3: Q 박스를 h1 글자박스에 정렬 */
.lt2_qmark svg{display:block}
/* 헤더 타이포 — 사이트 표준 히어로(common.css .title_area 계열)와 정합 (2026-08-03).
   시안(Paper Calm 64px/-2.125px)은 기존 페이지들과 이질적이라는 피드백으로 교체 */
.lt2_h1{display:inline-flex;vertical-align:middle;
  font-size:52px;font-weight:700;line-height:62px;
  letter-spacing:0;color:#212121;margin:0 0 16px}
.lt2_slogan{font-size:18px;font-weight:500;line-height:160%;
  letter-spacing:0;color:#212121;margin:0 0 8px}
.lt2_intro{font-size:17px;font-weight:400;line-height:155%;
  color:var(--text-muted);margin:0}

/* ---------- ② 레터 소개 카드 (2026-09-29 진행안) ----------
   테두리 없는 레터 색면(사이트 카테고리 배경색). 선택은 모달에서 하므로 카드엔 상태가 없다.
   세로 순서: 발송 요일 → 이름 → 설명 → 최근 레터 링크 */
.lt2_cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.lt2_card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:32px;border-radius:24px}
.lt2_card--people{background:var(--brand-people-bg)}
.lt2_card--life{background:var(--brand-life-bg)}
.lt2_card_sub{margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.02em}
.lt2_card_title{margin:0;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.03em}
.lt2_card--people .lt2_card_sub,.lt2_card--people .lt2_card_title{color:var(--brand-people)}
.lt2_card--life .lt2_card_sub,.lt2_card--life .lt2_card_title{color:var(--brand-life)}
/* 본문 3줄 고정 카피(<br> 줄바꿈) — 운영 문구 그대로. keep-all(래퍼 상속) + pretty 로 고아 줄 방지 */
.lt2_desc{margin:16px 0 0;font-size:15px;font-weight:400;line-height:1.75;
  color:var(--text-strong);text-align:left;text-wrap:pretty}
.lt2_card_link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;
  font-size:14px;font-weight:600;text-decoration:none}
/* 사이트 공통 a:link·a:visited 색(0,1,1)이 클래스 하나(0,1,0)를 이기므로 래퍼를 붙여 올린다 */
.lt2_wrap a.lt2_card_link,.lt2_wrap a.lt2_card_link:visited{color:var(--text-strong)}
.lt2_card_link:hover{text-decoration:underline;text-underline-offset:5px}
.lt2_arrow{width:20px;height:20px;flex:none}
.lt2_card_link .lt2_arrow{transition:transform .2s ease}
.lt2_card_link:hover .lt2_arrow{transform:translateX(3px)}

/* ---------- ③ 구독 패널 ----------
   회색 면(사이트 표준 #F6F7F9) 두 칸: 왼쪽 제목, 오른쪽 이메일 한 칸.
   입력칸은 둥글기 16px, 안쪽 버튼 11px(16 − 여백 5) */
.lt2_panel{margin-top:var(--space-lg);padding:36px 32px;background:#F6F7F9;border-radius:24px;
  display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.lt2_panel_title{margin:0;font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.4;color:var(--text-strong)}
.lt2_sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lt2_form{margin:0}
.lt2_email_box{display:flex;align-items:center;gap:10px;height:56px;padding:5px 5px 5px 18px;
  background:#fff;border:1px solid var(--border-input);border-radius:var(--radius-xl);
  transition:var(--transition-control)}
.lt2_email_box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(38,81,247,.2)}
.lt2_email_box.is-error{border-color:#E5484D}
/* 16px 미만이면 iOS가 포커스 시 자동 확대 (H13) */
.lt2_email{flex:1;width:0;min-width:0;height:100%;border:none;outline:none;background:transparent;  /* JAIN-1: iOS WebKit flex input */
  font-family:inherit;font-size:16px;color:#202020}
.lt2_email::placeholder{color:#8A9099;font-size:14px}  /* 입력 글자는 16px 유지(H13) */
/* 화살표 버튼(44×44). 입력해도 펼치지 않는다(2026-09-30 구독폼 통일 — 홈·푸터와 같은 «화살표만»). 글자는 DOM 에만 두어 이름이 읽힌다 */
.lt2_submit{flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:44px;min-width:44px;padding:0 12px;border:none;border-radius:10px;
  background:var(--accent);color:var(--on-accent);cursor:pointer;
  font-size:15px;font-weight:700;white-space:nowrap;
  position:relative;transition:background-color .15s}
.lt2_submit:hover{background:var(--accent-pressed)}
.lt2_submit_text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lt2_hero_msg{margin:10px 0 0 4px;font-size:var(--caption-size);font-weight:600;line-height:21px;color:#E5484D}  /* L-7: lh */
.lt2_hero_msg[hidden]{display:none}

/* ---------- ④ 뉴스레터 모아보기 ---------- */
.lt2_archive{margin-top:72px;scroll-margin-top:80px}/* #archive 로 올 때 고정 헤더(56px) 아래 24px 여백 — 제목이 헤더에 가리지 않게 */
.lt2_arc_title{margin:0 0 32px;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:var(--text-strong)}
/* 종류 태그 — 에세이 목록(/contents/essay) 탭과 같은 모양 */
.lt2_filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.lt2_filter{height:44px;padding:0 20px;border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  background:#fff;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;
  transition:var(--transition-control)}
.lt2_filter:hover{border-color:var(--accent);color:var(--accent)}
.lt2_filter.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lt2_list{list-style:none;margin:0;padding:0}
.lt2_item{border-bottom:1px solid var(--border-hairline)}
.lt2_item[hidden]{display:none}
.lt2_row{display:grid;grid-template-columns:84px 1fr auto 16px;gap:16px;align-items:center;
  min-height:72px;padding:16px 0;text-decoration:none;color:inherit}
.lt2_row:hover .lt2_c_title{text-decoration:underline;text-underline-offset:4px}
.lt2_row .lt2_arrow{transition:transform .2s ease}
.lt2_row:hover .lt2_arrow{transform:translateX(3px)}
/* 레터 종류 배지 — 에세이 카드 분류 태그와 같은 값 */
.lt2_c_kind{justify-self:start;padding:4px 10px;border-radius:var(--radius-md);
  font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.lt2_item[data-kind="people"] .lt2_c_kind{background:var(--brand-people-bg);color:var(--brand-people)}
.lt2_item[data-kind="life"] .lt2_c_kind{background:var(--brand-life-bg);color:var(--brand-life)}
.lt2_c_title{min-width:0;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:-.01em;color:var(--text-strong)}
.lt2_c_date{font-size:13px;line-height:21px;color:var(--text-muted);font-variant-numeric:tabular-nums}  /* L-7: lh */
.lt2_row .lt2_arrow{width:16px;height:16px;color:var(--text-muted)}
.lt2_new{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border-radius:6px;
  background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:500;line-height:1.3;vertical-align:middle}  /* L-4: NEW — 굵기 500 (2026-09-29, 700은 과했다) */
.lt2_arc_empty_txt{color:var(--text-faint);font-size:var(--body-sm-size);padding:40px 0}
/* 더 보기 — 목록 아래 가운데, 테두리 없는 옅은 면. 같은 자리에 이어 붙이므로 ↓ */
.lt2_more_wrap{display:flex;justify-content:center;margin-top:32px}
.lt2_more_wrap:has(.lt2_more[hidden]){display:none}
.lt2_more{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 24px;border:0;
  border-radius:var(--radius-lg);background:#F6F7F9;color:var(--text-strong);
  font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition-control)}
.lt2_more:hover{background:#ECEFF1}
.lt2_more[hidden]{display:none}
.lt2_more .lt2_arrow{width:18px;height:18px}

/* 빈 상태 카드 (인생경영 태그, 0건일 때) */
.lt2_empty_card{display:flex;flex-direction:column;align-items:center;gap:var(--space-xxs);
  text-align:center;padding:56px 24px;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl)}
.lt2_empty_card[hidden]{display:none}
.lt2_empty_title{font-size:var(--title-size);font-weight:var(--title-weight);
  color:var(--text-strong)}
.lt2_empty_body{font-size:var(--body-sm-size);color:var(--text-muted)}

/* ---------- 반응형 ---------- */
@media(max-width:760px){
  .lt2_cards{grid-template-columns:1fr;gap:16px}
  .lt2_panel{grid-template-columns:1fr;gap:20px;padding:28px 32px}
}
@media(max-width:600px){
  .lt2_h1{font-size:44px;letter-spacing:-1.4px}
  .lt2_head{margin-bottom:36px}
  .lt2_card{padding:24px;border-radius:20px}
  .lt2_card_title{font-size:26px}
  .lt2_panel{padding:24px;border-radius:20px}
  .lt2_panel_title{font-size:22px}
  .lt2_archive{margin-top:48px}
  .lt2_arc_title{font-size:24px;margin-bottom:24px}
  .lt2_filters{margin-bottom:24px}
  /* 모바일은 날짜를 제목 아래 한 줄로 */
  .lt2_row{grid-template-columns:76px 1fr 16px;grid-template-rows:auto auto;row-gap:4px;min-height:0;padding:16px 0}
  .lt2_c_kind{grid-column:1;grid-row:1/3;align-self:center;font-size:12px;padding:3px 8px}
  .lt2_c_title{grid-column:2;grid-row:1;font-size:15px}
  /* 모바일 NEW 는 늘 제목 아래 왼쪽 끝 — 긴 제목에서만 줄이 넘어가 들여쓰기가 들쭉날쭉하던 것 방지 */
  .lt2_new{display:flex;width:max-content;margin:4px 0 0}
  .lt2_c_date{grid-column:2;grid-row:2;font-size:12px;line-height:18px}
  .lt2_row .lt2_arrow{grid-column:3;grid-row:1/3}
}
@media(prefers-reduced-motion:reduce){
  .lt2_submit,.lt2_submit_text,.lt2_card_link .lt2_arrow,.lt2_row .lt2_arrow{transition:none}
}

/* ---------- 모달 ---------- */
.lt_modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  font-family:'Pretendard',-apple-system,sans-serif}
.lt_modal[hidden]{display:none}
.lt_modal_dim{position:absolute;inset:0;background:rgba(20,24,32,.55)}
.lt_modal_box{position:relative;width:min(480px,92vw);background:#fff;border-radius:20px;  /* 홈 모달과 같은 값 (2026-09-29) */
  
  padding:40px 36px;box-shadow:0 24px 60px rgba(0,0,0,.25);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box}
.lt_modal_box *{box-sizing:border-box}
.lt_modal_x{position:absolute;top:18px;right:20px;border:0;background:none;font-size:26px;
  line-height:1;color:#8A9099;cursor:pointer}
/* .lt_step_tag(파란 태그 줄)은 2026-08-06 폐지 — 홈 구독 모달과 상단을 맞췄다 */
.lt_step_title{font-size:22px;font-weight:800;margin:0 0 24px}
.lt_history_notice{margin:0 0 16px;padding:10px 12px;border-radius:var(--radius-md);background:#EFF4FF;
  color:#5A5F66;font-size:13px;line-height:1.55}
.lt_history_notice[hidden]{display:none}
/* 레터 선택 칩 — 홈 구독 모달(newsletter-modal.css .nl_letters)과 같은 값 (2026-09-29 홈에 맞춤:
   회색 면 안 알약 칩. 진행안의 둥근 사각 12px·레터색 테두리는 되돌렸다).
   체크박스는 시각적으로만 숨기고 칩 색으로 선택을 보인다 */
.lt_letters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  background:#F6F7F9;border-radius:var(--radius-lg);padding:12px 16px;margin:0 0 16px}
.lt_letters_label{font-size:13px;font-weight:600;color:var(--text-secondary)}
.lt_letter_check{position:relative;display:inline-flex;cursor:pointer}
.lt_letter_check input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0}
.lt_letter_check span{padding:8px 12px;border:1px solid var(--border-hairline);border-radius:var(--radius-full);
  background:#F6F7F9;font-size:14px;font-weight:600;color:var(--text-faint);transition:var(--transition-control)}
.lt_letter_check input:checked + span{background:#fff;border-color:var(--border-input)}
.lt_letter_check--people input:checked + span{color:var(--brand-people)}
.lt_letter_check--life   input:checked + span{color:var(--brand-life)}
.lt_letter_check input:focus-visible + span{outline:2px solid var(--border-focus);outline-offset:2px}
.lt_letter_check.error span{border-color:#E5484D}
.lt_label{display:block;font-size:14px;font-weight:600;color:#3A3F46;margin-bottom:16px}
.lt_label[hidden]{display:none}
.lt_label input,
.lt_label select{width:100%;margin-top:8px;padding:14px 16px;border:1px solid #DDE0E5;border-radius:var(--radius-lg);
  font-size:16px;font-family:inherit;background:#fff;color:#202020}
.lt_label input:focus,
.lt_label select:focus{outline:none;border-color:var(--accent)}
.lt_label input.error{border-color:#E5484D}
.lt_dd{position:relative;margin-top:8px}
.lt_dd select{display:none}
.lt_dd_btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border:1px solid #DDE0E5;border-radius:var(--radius-lg);background:#fff;
  font-size:16px;font-weight:400;font-family:inherit;color:#8A9099;text-align:left;cursor:pointer}  /* 굵기 400 — 홈 모달과 같이 (2026-09-29) */
.lt_dd_btn.selected{color:#202020}
.lt_dd_btn:focus{outline:none;border-color:var(--accent)}
.lt_dd_btn.error{border-color:#E5484D}
.lt_dd_btn svg{flex-shrink:0;color:#8A9099;transition:transform .15s}
.lt_dd.open .lt_dd_btn svg{transform:rotate(180deg)}
.lt_dd_list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:10;
  margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #ECEDF0;
  border-radius:var(--radius-lg);box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:240px;overflow-y:auto}
.lt_dd_list[hidden]{display:none}
.lt_dd_list li{padding:11px 12px;border-radius:var(--radius-md);font-size:16px;font-weight:400;color:#202020;cursor:pointer}
.lt_dd_list li:hover{background:#F3F6FF}
.lt_dd_list li[aria-selected="true"]{color:var(--accent);background:#EFF4FF}
/* 동의 영역 — 홈 구독 모달(.nl_mcheck_row/.nl_consent_toggle/.nl_consent)과 같은 값.
   두 모듈은 문구뿐 아니라 이 구조도 한 쌍이다 (2026-08-06) */
.lt_check_row{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:4px 10px;margin:4px 0 16px}
.lt_check{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:400;
  color:var(--text-secondary);cursor:pointer;margin:0}  /* 홈 모달(.nl_mcheck)과 같은 보통 굵기 (2026-09-29) */
.lt_check input{margin-top:2px}
.lt_consent_toggle{background:none;border:0;padding:0;margin:0;color:#8A9099;font-size:13px;
  text-decoration:underline;cursor:pointer;font-family:inherit;white-space:nowrap}
.lt_consent{background:#F6F7F9;border-radius:var(--radius-lg);padding:14px 16px;margin:0 0 20px;
  font-size:13px;color:#5A5F66;line-height:1.6;max-height:220px;overflow-y:auto}
.lt_consent p{margin:0}
.lt_consent ul{margin:8px 0 0;padding-left:18px}
.lt_consent li{margin-bottom:8px}
.lt_consent a{color:var(--accent);text-decoration:underline}
.lt_submit,.lt_close{border:0;cursor:pointer;font-size:15px;font-weight:700;
  padding:14px 24px;border-radius:var(--radius-lg);background:var(--accent);color:#fff;width:100%}
.lt_submit:hover,.lt_close:hover{background:#1848c9}
.lt_submit[disabled]{opacity:.6;cursor:default}
.lt_done{text-align:center}
.lt_done_ic{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:#E7EEFF;color:var(--accent);
  font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lt_done_txt{color:#5A5F66;font-size:15px;margin:0 0 28px}
.lt_err{color:#E5484D;font-size:14px;margin:16px 0 0;text-align:center}