/* 안심이음 입구 화면(허브)
   디자인 토큰: CLAUDE.md 4절 (demo.css 와 같은 값)
   외부 폰트와 외부 자원 없음. 360x800 기준으로 시작 버튼 하나를 먼저 보여 준다. */
:root {
  /* 2026-11-03: 옛 파랑 토큰을 brand-v1 값으로 맞췄다(brand-v1.css 가 늦게 불려 같은 값으로 덮는다) */
  --primary: #20594F;
  --panel: #DDEBE3;
  --cream: #F7F5EF;
  --danger: #A6423C;
  --ink: #263C36;
  --muted: #52675F;  /* 바탕 위 대비 5.5:1 */
  --line: #D2DDD5;
  --focus: #20594F;
  /* 홈과 훈련 공통 이름(train.css 와 같은 값) */
  --primary-press: #173F38;  /* 주 버튼 눌림 */
  --sub-press: #E8F0EA;      /* 부 버튼 눌림 */
  --on-primary: #FFFFFF;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans KR", "Noto Sans CJK KR", "NanumGothic", "나눔고딕", sans-serif;
  font-size: 22px;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 20px;
}

/* 머리글 */
.top { margin-bottom: 16px; }
h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
  color: var(--primary);
}
.logo { width: 38px; height: 38px; flex: none; }
.lead { margin: 6px 0 0; font-size: 22px; font-weight: 600; }
.intro { margin: 16px 0 0; }
.reassurance { margin: 8px 0 0; }

/* 안내부터 이어지는 큰 시작 버튼 하나 */
.actions { display: flex; flex-direction: column; }
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease-out;
}
/* 시작 버튼 글자는 세 화면 공통 24px */
.btn-main {
  min-height: 72px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 24px;
}
.btn-main:active { background: var(--primary-press); border-color: var(--primary-press); }
.btn-icon { width: 28px; height: 28px; flex: none; }
a:focus-visible, summary:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* 실제 받은 문자 확인은 보조 링크로 구분한다 */
.check-message { margin-top: 20px; }
.check-message p { margin: 0; }
.check-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 필요할 때 펼치는 긴급 연락처 */
.contacts {
  margin-top: 16px;
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-radius: 14px;
}
.contacts summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 10px 12px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.contacts summary::-webkit-details-marker { display: none; }
.disclosure { width: 24px; height: 24px; flex: none; margin-left: auto; }
.contacts[open] .disclosure { transform: rotate(180deg); }
.contacts[open] summary { border-bottom: 1px solid var(--line); }
.phone { width: 24px; height: 24px; flex: none; color: var(--danger); }
.contacts ul { margin: 0; padding: 6px 14px 10px; list-style: none; }
.contacts li + li { border-top: 1px solid var(--line); }
.tel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 0;
  color: var(--ink);
  text-decoration: none;
}
.num {
  flex: none;
  min-width: 80px;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  text-decoration: underline;  /* 누르면 전화가 걸리는 글자라 밑줄로 알린다 */
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.what { font-size: 20px; }
.tel-urgent .num { color: var(--danger); }
.tel-urgent .what { font-weight: 700; }

/* 맨 아래 고지 */
.foot { margin-top: 14px; color: var(--muted); font-size: 20px; line-height: 1.4; }
.foot p { margin: 0; }
.foot p + p { margin-top: 8px; }
.privacy-link { color: var(--primary); font-size: 20px; text-decoration: underline; text-underline-offset: 4px; }

/* 넓은 화면: 가운데 정렬만 유지하고 여백을 조금 넓힌다 */
@media (min-width: 600px) {
  .wrap { padding-top: 40px; }
  h1 { font-size: 40px; }
}


/* 브랜드 적용 후보: 기존 구조와 링크를 유지한 여백·위계 정리 */
.brand-refresh .wrap { max-width: 480px; padding: 20px 22px 32px; }
.brand-refresh .top { margin-bottom: 18px; }
.brand-refresh h1 { font-size: 24px; line-height: 1.3; gap: 7px; letter-spacing: -0.04em; }
.brand-refresh .logo { width: 38px; height: 32px; }
.ieum-welcome { margin-top: 22px; }
.ieum-welcome h2 { margin: 0; font-size: 29px; font-weight: 800; line-height: 1.35; letter-spacing: -0.04em; }
.ieum-welcome-scene { position: relative; min-height: 144px; display: flex; flex-wrap: wrap; row-gap: 8px; align-items: end; justify-content: space-between; margin-top: 8px; }
.ieum-welcome-scene::before { content: ""; position: absolute; right: 0; bottom: 0; width: 140px; height: 128px; border-radius: 82px 82px 12px 12px; background: var(--panel); }
.ieum-welcome-scene .ieum-character { position: relative; width: 130px; height: 130px; }
.ieum-welcome-scene span { max-width: 150px; margin-bottom: 25px; font-size: 18px; color: var(--primary); font-weight: 600; }
.brand-refresh .lead { margin-top: 18px; font-size: 22px; line-height: 1.45; letter-spacing: -0.025em; }
.brand-refresh .intro { margin-top: 8px; color: var(--muted); font-size: 20px; line-height: 1.5; }
.brand-refresh .intro br { display: none; }
.brand-refresh .reassurance { margin-top: 6px; font-size: 20px; }
.brand-refresh .check-message { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.brand-refresh .check-message p { font-size: 20px; }
.brand-refresh .check-link { font-size: 22px; min-height: 52px; }
.brand-refresh .contacts { margin-top: 14px; border-width: 1px; border-radius: 14px; }
.brand-refresh .contacts summary { gap: 8px; min-height: 60px; padding: 12px 14px; font-size: 20px; }
.brand-refresh .phone { color: var(--primary); }
.brand-refresh .tel { min-height: 52px; gap: 8px; }
.brand-refresh .num { min-width: 72px; }
.brand-refresh .what { font-size: 20px; }
.brand-refresh .foot { margin-top: 20px; font-size: 18px; line-height: 1.55; }
.brand-refresh .privacy-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; }
@media (max-width: 340px) {
  .brand-refresh .wrap { padding-left: 18px; padding-right: 18px; }
  .ieum-welcome h2 { font-size: 28px; }
  .ieum-welcome-scene span { max-width: 120px; }
}

/* 내 폰에 놓기(앱 설치 안내, 2026-11-03). home.js 가 하나만 보인다 */
[hidden] { display: none !important; }
.install { margin-top: 20px; padding: 18px 16px; background: var(--panel); border-radius: 12px 24px 12px 12px; }
.install h2 { margin: 0; font-size: 22px; line-height: 1.4; color: var(--primary); }
.install-lead { margin: 4px 0 0; font-size: 20px; line-height: 1.5; }
.install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
}
.install-btn:active { background: var(--primary-press); }
.install-btn:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.install-steps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: step; }
.install-steps li { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 20px; line-height: 1.5; }
.install-steps li::before { counter-increment: step; content: counter(step); flex: none; width: 1.4em; font-size: 24px; font-weight: 800; color: var(--primary); text-align: center; }
.step-pic { width: 48px; height: 48px; flex: none; }
.install-note { margin: 12px 0 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.install-done { margin: 12px 0 0; font-size: 22px; font-weight: 700; color: var(--primary); }