/* ===== /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;--lt2-surface-sunken:#f6f5f4;
  
  --lt2-text-strong:#000;--text-body:rgba(0,0,0,.95);--lt2-text-muted:#615d59;--lt2-text-faint:#a39e98;
  --ink-1000:#000;--ink-400:#a39e98;
  --lt2-border-hairline:#e6e6e6;--lt2-border-input:#ddd;
  /* 레터 색 — 사이트 카테고리색으로 통일 (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-sm:5px;--radius-card:12px;
  
  --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}

/* ---------- ① 헤더 ---------- */
/* 카드와의 여백 40 → 72px (2026-08-05 1w안, 이 화면만 넓힌다) */
.lt2_head{text-align:center;margin-bottom:72px}
/* Q 레터 로고 — 타이틀 위 블록에서 타이틀 오른쪽 인라인으로 (2026-08-05 1w안) */
.lt2_qmark{display:inline-flex;vertical-align:middle;margin:0 0 16px 12px}
.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:#7b7b7b;margin:0}

/* ---------- ② 레터 선택 카드 ---------- */
.lt2_cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
/* 좌측 정렬 + 하단 선택 버튼 (2026-08-05 1w안). 카드 자체는 클릭 대상이 아니다.
   내부 세로 리듬은 gap 이 아니라 각 요소의 margin-top 이 만든다 — 칩 10 · 설명 16 · 버튼 28 */
.lt2_card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:0;padding:var(--space-lg);
  background:var(--surface-card);border:1px solid var(--lt2-border-hairline);
  border-radius:var(--radius-card);transition:var(--transition-control)}
/* 선택 = 코발트 테두리 1px (애플 옵션 카드 패턴, 2026-08-03 더 얇게 조정) */
.lt2_card.is-on{border-color:var(--accent)}
/* 제목이 레터 브랜드색을 갖는다 — 1w안에서 키커(.lt2_kicker)를 없애고 그 역할을 흡수했다 */
.lt2_card_title{margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.lt2_card--people .lt2_card_title{color:var(--brand-people)}
.lt2_card--life .lt2_card_title{color:var(--brand-life)}
/* 발송 요일 — 원형 배지에서 알약형 칩으로. 레터별 연한 배경 + 브랜드색 텍스트 */
.lt2_card_sub{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;
  padding:5px 12px 5px 10px;border-radius:var(--radius-full);
  font-size:12.5px;font-weight:600;letter-spacing:.01em}
.lt2_card--people .lt2_card_sub{background:var(--brand-people-bg);color:var(--brand-people)}
.lt2_card--life .lt2_card_sub{background:var(--brand-life-bg);color:var(--brand-life)}
/* 본문 3줄 고정 카피(<br> 줄바꿈). keep-all(래퍼 상속)로 어절 끊김 방지,
   text-wrap:pretty 로 좁은 폭에서 줄이 접힐 때 고아 줄 방지 */
.lt2_desc{margin:16px 0 0;font-size:15px;font-weight:400;line-height:1.7;
  color:#000;text-align:left;text-wrap:pretty}
/* 선택 버튼 — 카드 폭 100%, 알약형. 선택 여부가 배경·테두리·글자색·라벨로 함께 드러난다 */
.lt2_select_btn{appearance:none;width:100%;margin-top:28px;
  height:46px;border-radius:var(--radius-full);font-size:14px;font-weight:600;
  cursor:pointer;transition:var(--transition-control);
  display:flex;align-items:center;justify-content:center}
.lt2_select_btn.is-selected{border:none;background:var(--accent);color:var(--on-accent)}
.lt2_select_btn.is-selected:hover{background:var(--accent-pressed)}
.lt2_select_btn.is-off{background:#fff;border:1px solid var(--lt2-border-hairline);color:var(--lt2-text-muted)}
.lt2_select_btn.is-off:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- ③ 구독 패널 — 메인 홈 구독 섹션 스타일 + 가운데 정렬 (2026-08-03 피드백 3차) ----------
   연회색 라운드 패널, 제목 → 레터 선택 체크박스 → 폼. 회색은 사이트 표준 #F6F7F9 */
.lt2_panel{margin-top:56px;padding:48px 44px;background:#F6F7F9;
  border-radius:24px;text-align:center}
.lt2_panel_title{margin:0;font-size:var(--heading-2-size);font-weight:700;
  letter-spacing:var(--heading-2-tracking);line-height:var(--heading-2-leading);
  color:#202020}
.lt2_checks{display:flex;align-items:center;justify-content:center;gap:8px 20px;
  flex-wrap:wrap;margin-top:18px}
.lt2_check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:var(--body-sm-size);font-weight:600;color:#202020}
.lt2_check input{width:18px;height:18px;margin:0;cursor:pointer}
.lt2_check input{accent-color:var(--accent)}
.lt2_form{display:flex;gap:12px;max-width:520px;margin:28px auto 0}
.lt2_email_box{flex:1;min-width:0;display:flex;align-items:center;height:56px;
  background:#fff;border:1px solid #DDE0E5;
  border-radius:12px;padding:0 18px;transition:var(--transition-control)}
.lt2_email_box:focus-within{border-color:#1E5AF0}
/* 16px 미만이면 iOS가 포커스 시 자동 확대 (H13) */
.lt2_email{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:16px;color:#202020}
.lt2_email::placeholder{color:#8A9099}
.lt2_submit{flex-shrink:0;height:56px;padding:0 32px;border:none;
  border-radius:12px;background:#1E5AF0;color:#fff;
  cursor:pointer;font-size:var(--button-size);font-weight:700;
  transition:var(--transition-control);white-space:nowrap}
.lt2_submit:hover{background:#1848C9}
.lt2_submit:disabled{background:#A0A5AD;opacity:.5;cursor:default}
.lt2_hero_msg{margin:14px 0 0;font-size:var(--caption-size);font-weight:600;color:#E5484D}

/* ---------- ④ 아카이브 ---------- */
.lt2_archive{margin-top:var(--space-section)}
.lt2_arc_head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--lt2-border-hairline)}
.lt2_tabs{display:flex;align-items:center;gap:var(--space-lg)}
.lt2_tab{background:none;border:none;cursor:pointer;padding:0 0 16px;
  font-size:var(--title-size);font-weight:700;letter-spacing:var(--title-tracking);
  color:var(--lt2-text-faint);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:var(--transition-control)}
/* 탭 밑줄 — 색 단순화로 잉크색 통일 */
.lt2_tab.is-active{color:var(--lt2-text-strong);border-bottom-color:#202020}
.lt2_list{list-style:none;margin:0;padding:0}
.lt2_item{border-bottom:1px solid var(--lt2-border-hairline)}
.lt2_row{display:flex;align-items:baseline;gap:var(--space-md);padding:20px 10px;
  margin:0 -10px;border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  transition:var(--transition-control)}
.lt2_row:hover{background:var(--surface-hover)}
.lt2_c_vol{flex-shrink:0;width:52px;font-size:12px;font-weight:600;
  letter-spacing:.3px;color:var(--lt2-text-faint)}
.lt2_c_title{flex:1;min-width:0;font-size:var(--body-sm-size);font-weight:600;
  line-height:1.4;color:var(--lt2-text-strong)}
.lt2_c_date{flex-shrink:0;font-size:var(--caption-size);color:var(--lt2-text-faint);
  font-variant-numeric:tabular-nums}
.lt2_arc_empty_txt{color:var(--lt2-text-faint);font-size:var(--body-sm-size);padding:40px 0}

/* 페이지네이션 */
.lt2_pager{display:flex;justify-content:center;align-items:center;gap:var(--space-xs);
  margin-top:var(--space-xxl)}
.lt2_pg{min-width:32px;height:32px;padding:0 4px;border-radius:var(--radius-md);
  border:1px solid var(--lt2-border-hairline);background:var(--surface-card);
  color:var(--lt2-text-strong);font-size:var(--body-sm-size);font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:var(--transition-control)}
.lt2_pg:hover{background:var(--surface-hover)}
.lt2_pg:disabled{opacity:.4;cursor:default;background:var(--surface-card)}
.lt2_pg_nums{display:inline-flex;gap:var(--space-xs)}
.lt2_pg.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lt2_pg.is-active:hover{background:var(--accent)}

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

/* ---------- 반응형 (시안은 데스크톱 기준 — 최소 적응) ---------- */
@media(max-width:600px){
  .lt2_h1{font-size:44px;letter-spacing:-1.4px}
  .lt2_cards{grid-template-columns:1fr}
  .lt2_panel{padding:32px 20px}
  .lt2_form{flex-direction:column;gap:12px}
  /* ⚠ column 이 되면 주축이 height 다. 주축에서는 flex-basis 가 height 보다 우선하므로
     .lt2_email_box 의 flex:1(=flex-basis:0%)이 height:56px 을 무시해 입력창이
     min-height:auto(글자 높이)까지 찌그러진다 — 데스크톱(row)에서는 flex-basis 가
     width 에 걸려 안 드러난다. flex:none 으로 되돌려 height 가 다시 먹게 한다.
     ⚠ .lt2_form 을 다시 row 로 바꾸지 않는 한 이 규칙을 지우지 말 것 */
  .lt2_email_box{flex:none;height:52px}
  .lt2_submit{height:52px}
  .lt2_c_date{display:none}
}

/* ---------- 모달 — 기존 new_newsletter_module 스타일 그대로 ---------- */
.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;
  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:8px;background:#EFF4FF;
  color:#5A5F66;font-size:13px;line-height:1.55}
.lt_history_notice[hidden]{display:none}
.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:10px;
  font-size:16px;font-family:inherit;background:#fff;color:#202020}
.lt_label input:focus,
.lt_label select:focus{outline:none;border-color:#1E5AF0}
.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:10px;background:#fff;
  font-size:16px;font-family:inherit;color:#8A9099;text-align:left;cursor:pointer}
.lt_dd_btn.selected{color:#202020}
.lt_dd_btn:focus{outline:none;border-color:#1E5AF0}
.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:12px;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:8px;font-size:16px;color:#202020;cursor:pointer}
.lt_dd_list li:hover{background:#F3F6FF}
.lt_dd_list li[aria-selected="true"]{color:#1E5AF0;font-weight:700;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:600;
  color:#3A3F46;cursor:pointer;margin:0}
.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:10px;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:#1E5AF0;text-decoration:underline}
.lt_submit,.lt_close{border:0;cursor:pointer;font-size:15px;font-weight:700;
  padding:14px 24px;border-radius:10px;background:#1E5AF0;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:#1E5AF0;
  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}