/* ============================================================
   집수호 · 청라 아크원 푸르지오 관심고객 등록  style.css (v1, 2026-10-24)
   한 장짜리 등록 페이지. 밝은 종이 바탕 + 먹색 글자 + 형광펜 포인트.
   외부 라이브러리 없음.
   ============================================================ */

:root{
  --paper:#FBFAF7;      /* 종이 바탕 */
  --paper-2:#F2EFE8;    /* 한 칸 눌린 바탕 */
  --ink:#14110F;        /* 먹색 */
  --ink-2:#3D3833;      /* 본문 */
  --mute:#746C63;       /* 보조 */
  --line:#DDD6CB;
  --hl:#FFE94A;         /* 형광펜 */
  --hl-soft:#FFF6B8;
  --accent:#1B3A5C;     /* 버튼 남색 */
  --accent-d:#122840;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;
  line-height:1.72;
  word-break:keep-all;
  overflow-wrap:break-word;
  padding-bottom:84px; /* 하단 고정 막대 자리 */
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.inner{max-width:720px;margin:0 auto;padding:0 20px}
.fine{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--mute)}

/* ---------- 머리띠 ---------- */
.top{background:var(--ink);color:var(--paper)}
.top__in{display:flex;align-items:baseline;gap:10px;padding-top:13px;padding-bottom:13px}
.brand{font-weight:900;font-size:17px;letter-spacing:-.02em}
.brand__sub{font-size:12px;color:#B9B1A6;letter-spacing:-.01em}

/* ---------- 01 첫 화면 ---------- */
.hero{padding:46px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{
  margin:0 0 18px;font-size:13px;font-weight:700;color:var(--mute);
  letter-spacing:-.01em;line-height:1.5;
}
.hero__h{
  margin:0;
  font-size:30px;font-weight:900;line-height:1.42;letter-spacing:-.035em;
  color:var(--ink);
}
.hero__h mark{
  background:linear-gradient(transparent 58%, var(--hl) 58%);
  color:var(--ink);padding:0 2px;
}
.hero__sub{margin:22px 0 0;font-size:16px;font-weight:500;color:var(--ink-2)}
.dday{
  display:inline-block;margin:12px 0 0;padding:5px 12px;
  background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:700;border-radius:2px;letter-spacing:-.01em;
}
.hero__cta{margin-top:28px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 34px;
  background:var(--accent);color:#fff;
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  text-decoration:none;border:0;border-radius:3px;cursor:pointer;
  font-family:inherit;
  transition:background .15s ease;
}
.btn:hover{background:var(--accent-d)}
.btn:disabled{background:var(--mute);cursor:default}
.btn--full{width:100%}
.btn--bar{width:100%;min-height:52px;font-size:16px}

/* ---------- 02 날짜 셋 ---------- */
.dates{padding:34px 0 36px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.dates__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.dates__list li{
  background:var(--paper);
  display:flex;align-items:baseline;gap:14px;
  padding:15px 18px;
}
.dates__list b{
  font-size:21px;font-weight:900;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dates__list b i{font-style:normal;font-size:15px;font-weight:700}
.dates__list span{font-size:14px;color:var(--ink-2)}
.dates__list .is-now{background:var(--hl-soft)}
.dates__list .is-now b{color:var(--ink)}

/* ---------- 03 무엇을 같이 보나 ---------- */
.check{padding:48px 0 46px;border-bottom:1px solid var(--line)}
.h2{
  margin:0 0 26px;
  font-size:21px;font-weight:900;line-height:1.5;letter-spacing:-.03em;color:var(--ink);
}
.check__list{list-style:none;margin:0;padding:0;counter-reset:ck}
.check__list li{
  counter-increment:ck;
  padding:18px 0 18px 42px;
  border-top:1px solid var(--line);
  position:relative;
}
.check__list li:last-child{border-bottom:1px solid var(--line)}
.check__list li::before{
  content:counter(ck);
  position:absolute;left:0;top:19px;
  width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.check__list h3{
  margin:0 0 4px;font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--ink);
}
.check__list p{margin:0;font-size:15px;line-height:1.72;color:var(--ink-2)}

/* ---------- 04 관심고객 등록 ---------- */
.enroll{padding:48px 0 54px;background:var(--ink);color:var(--paper)}
.h2--light{color:#fff}
.enroll__sub{margin:-14px 0 28px;font-size:15px;color:#C9C1B6}

.form{margin:0}
.field{margin-bottom:18px}
.field label{
  display:block;margin-bottom:7px;
  font-size:14px;font-weight:700;color:#D8D1C6;letter-spacing:-.01em;
}
.field input{
  width:100%;min-height:54px;padding:0 16px;
  background:#211D1A;color:#fff;
  border:1px solid #403932;border-radius:3px;
  font-family:inherit;font-size:16px; /* 16px 미만이면 폰에서 화면이 확대된다 */
  line-height:1.4;
}
.field input:focus{border-color:var(--hl);outline:none}
.field input[aria-invalid="true"]{border-color:#E4725F}
.err{margin:6px 0 0;font-size:13px;color:#F0A294;min-height:0}
.err:empty{display:none}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.agree{margin:22px 0 26px}
.agree__check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.agree__check input{
  width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;
  accent-color:var(--hl);cursor:pointer;
}
.agree__check span{font-size:15px;line-height:1.6;color:#D8D1C6}
.agree details{margin:12px 0 0 32px}
.agree summary{
  font-size:13px;color:#A79E93;cursor:pointer;
  min-height:32px;display:flex;align-items:center;width:fit-content;
}
.agree details ul{
  margin:6px 0 0;padding:14px 16px;list-style:none;
  background:#211D1A;border:1px solid #37312B;border-radius:3px;
  font-size:13px;line-height:1.7;color:#B9B1A6;
}
.agree details li{margin-bottom:4px}
.agree details li b{
  display:inline-block;min-width:44px;margin-right:6px;
  color:#D8D1C6;font-weight:700;
}
.agree details a{display:inline-block;margin-top:10px;font-size:13px;color:#D8D1C6}

.msg{margin:14px 0 0;font-size:14px;color:#F0A294}
.msg:empty{display:none}
.done{
  padding:24px 20px;
  background:#211D1A;border:1px solid var(--hl);border-radius:3px;
  font-size:16px;font-weight:700;line-height:1.6;color:#fff;
}

/* ---------- 푸터 ---------- */
.foot{padding:34px 0 38px;background:var(--paper-2);border-top:1px solid var(--line)}
.foot p{margin:0 0 7px;font-size:13px;line-height:1.68;color:var(--mute)}
.foot__lead{font-weight:700;color:var(--ink-2) !important}
.foot a{color:var(--ink-2);text-underline-offset:3px}

/* ---------- 하단 고정 막대 ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.96);
  border-top:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  transition:transform .2s ease, opacity .2s ease;
}
.bar.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}

/* ---------- 넓은 화면 ---------- */
@media (min-width:620px){
  .hero{padding:66px 0 56px}
  .hero__h{font-size:40px;line-height:1.38}
  .hero__sub{font-size:17px}
  .dates__list{grid-template-columns:repeat(3,1fr)}
  .dates__list li{flex-direction:column;gap:5px;padding:18px}
  .h2{font-size:24px}
  .check{padding:60px 0}
  .enroll{padding:60px 0 66px}
  .btn--full{width:auto;min-width:220px}
  .bar{display:none}
  body{padding-bottom:0}
}