/* 폴더폰 랜딩 — 예전 폴더폰 사이트(my-emo-company.vercel.app)의 톤
   종이 #fffaf8 · 남색 잉크 #071a29 · 핑크 #ff5f9e / #dc347b · 선 #ded8d6 · 밤 #061a29
   조용한 규칙: 1px 가는 선으로 나누고, 크고 촘촘한 제목, 핑크는 짧은 선과 숫자에만.
   카드 테두리·그림자·둥근 모서리·스캔라인·고정폭 글꼴·떠 있는 아이콘 없음.
   이 파일은 폴더폰 랜딩(/digital-detox-app/)에서만 불린다. 구성과 문구는 그대로다. */

:root {
  --booth: #061a29;
  --booth-deep: #061a29;
  --booth-line: #ded8d6;
  --enamel: #071a29;
  --paper: #fffaf8;
  --paper-2: #fff5f1;
  --card: #fffdfc;
  --ink: #071a29;
  --ink-2: #2d3b47;
  --muted: #63676c;
  --rule: #ded8d6;
  --amber: #dc347b;
  --amber-soft: #ff5f9e;
  --signal: #dc347b;
  --radius: 0px;
  --pink: #ff5f9e;
  --pink-dark: #dc347b;
  --night: #061a29;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
}
body[data-app="retrofold"] { --accent: #dc347b; --accent-ink: #fffaf8; --accent-ground: #fff5f1; }

html, body { background: #fffaf8; color: #071a29; }
::selection { background: #ff5f9e; color: #fffaf8; }
:focus-visible { outline-color: #dc347b; }
h2 { letter-spacing: -.055em; font-weight: 800; }

/* 머리 — 종이 위, 아래 선 하나 */
.masthead { background: #fffaf8; background-image: none; color: #071a29; border-bottom: 1px solid var(--rule); }
.plate { border: 0; box-shadow: none; padding: 0; font-size: 21px; letter-spacing: -.045em; color: #071a29; }
.plate img { width: 26px; height: 26px; }
.masthead nav a { color: #071a29; opacity: 1; font-weight: 700; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: #dc347b; border-bottom-color: #dc347b; }
.lang { border: 1px solid var(--rule); border-radius: 0; }
.masthead nav .lang a { color: #071a29; opacity: .7; }
.masthead nav .lang a[aria-current] { background: #071a29; color: #fffaf8; opacity: 1; }

/* 히어로 — 종이 위 큰 제목, 폰 한 대 */
.hero { background: #fffaf8; background-image: none; color: #071a29; padding-block: 76px 88px; }
.hero h1 { font-size: clamp(44px, 7vw, 96px); line-height: 1.02; letter-spacing: -.07em; font-weight: 800; max-width: 14ch; }
html[lang="en"] .hero h1 { font-size: clamp(36px, 5.4vw, 72px); max-width: 16ch; }
.hero-sub { color: #071a29; opacity: 1; font-size: clamp(19px, 2vw, 26px); letter-spacing: -.03em; margin-top: 26px; max-width: 30ch; }
.chips { gap: 10px 28px; margin-top: 30px; }
.chips li { background: none; border: 0; padding: 0; gap: 10px; font-size: 16px; font-weight: 700; color: #071a29; }
.chips li::before { content: ""; width: 10px; height: 10px; background: #ff5f9e; flex: none; }
.chips .i3d { display: none; }
.float { display: none; }
.stage { margin-top: 60px; }
.stage .hero-shot { width: min(290px, 66vw); border: 0; border-radius: 40px; box-shadow: 24px 28px 48px rgba(7, 26, 41, .2); }

/* 버튼 — 각진 2px 테두리 */
.btn { border-radius: 0; border: 2px solid currentColor; min-height: 58px; padding: 0 28px; font-size: 17px; font-weight: 800; letter-spacing: -.025em; box-shadow: none; }
.btn-primary, .btn-solid { background: #dc347b; border-color: #dc347b; color: #fffaf8; }
.btn-primary:hover, .btn-solid:hover { background: #c02a6b; border-color: #c02a6b; }
.btn-ghost, .btn-line { background: transparent; color: #071a29; border-color: #071a29; opacity: 1; }
.btn-ghost:hover, .btn-line:hover { color: #dc347b; border-color: #dc347b; background: transparent; }
.btn[aria-disabled="true"] { border: 2px dashed #c9c1be; color: #8a8f94; background: transparent; }

/* 도입 — 큰 제목과 짧은 핑크 선 */
.intro { padding: 96px 0 48px; border-top: 1px solid var(--rule); }
.intro .i3d-lg { display: none; }
.intro-label { color: #dc347b; }
.intro h2 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.07em; }
.intro h2::after { content: ""; display: block; width: 84px; height: 4px; margin: 28px auto 0; background: #ff5f9e; }

/* 기능 패널 — 가는 선 상자, 그림자 없음 */
.feature { background: #fffdfc; border: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.feature-label { color: #dc347b; }
.feature-label .i3d { display: none; }
.feature h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.055em; }
.feature > p:not(.feature-label) { color: #63676c; }
.feature figure img { border: 0; border-radius: 34px 34px 0 0; box-shadow: 0 -4px 30px rgba(7, 26, 41, .12); }

/* 사용법 — 가는 선 목록, 가는 핑크 숫자 */
.band-tint { background: transparent; border-block: 1px solid var(--rule); }
.howto { counter-reset: rf; gap: 0; border-top: 1px solid var(--rule); }
.howto li { counter-increment: rf; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 28px 24px 28px 0; }
.howto li::before { content: counter(rf, decimal-leading-zero); display: block; margin-bottom: 14px; color: #dc347b; font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: -.06em; }
.howto .i3d, .howto .n { display: none; }
.howto h3 { font-size: 21px; letter-spacing: -.035em; }
.howto p { color: #63676c; }

/* 한눈에 — 네모 칸 체크, 가는 선 */
.stats { gap: 0; border-top: 1px solid var(--rule); }
.stats li { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 26px 20px 26px 0; }
.stats li::before { content: "✓"; width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; border: 2px solid #071a29; color: #ff5f9e; font-size: 22px; }
.stats .i3d { display: none; }
.stats b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.045em; }
.stats span { color: #63676c; }
.status-row { background: transparent; border: 0; border-block: 1px solid var(--rule); border-radius: 0; padding: 16px 0; }
.units { color: #63676c; }
.units i.on, .units.live i.on { background: #ff5f9e; border-color: #ff5f9e; }

/* 장단점 — 위쪽 굵은 선 하나와 네모 칸 */
.panel, .panel.good, .panel.bad { background: transparent; border: 0; border-top: 2px solid #071a29; border-radius: 0; box-shadow: none; padding: 24px 0; }
.panel h3 .i3d-sm { display: none; }
.panel h3::before { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 2px solid #071a29; font-size: 19px; }
.panel.good h3::before { content: "✓"; color: #ff5f9e; }
.panel.bad h3::before { content: "–"; color: #071a29; }
.panel li { color: #2d3b47; }

/* FAQ — 가는 선 목록 */
.faq { gap: 0; border-top: 1px solid var(--rule); }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 6px 0; }
.faq details[open] summary, .faq summary::before { color: #dc347b; }

/* 관련 글 */
.links-list em { color: #dc347b; border-radius: 0; }

/* 개인정보 — 예전 사이트의 남색 마무리 띠 */
.privacy-strip, .privacy-strip.has-icon { background: #061a29; color: #c9d3db; border: 0; border-radius: 0; box-shadow: none; padding: 36px 40px; grid-template-columns: 1fr; }
.privacy-strip .i3d { display: none; }
.privacy-strip strong, .privacy-strip a { color: #ff5f9e; }

/* 바닥 — 종이 위 가는 선 */
.site-footer { background: #fffaf8; background-image: none; color: #63676c; border-top: 1px solid var(--rule); }
.site-footer h2 { color: #071a29; }
.site-footer a { color: #071a29; border-bottom-color: var(--rule); }
.site-footer a:hover { color: #dc347b; border-bottom-color: #dc347b; }
.site-footer .fine { color: #8a8f94; }

@media (min-width: 1040px) {
  .howto li:not(:first-child) { padding-left: 24px; border-left: 1px solid var(--rule); }
}
@media (max-width: 699px) {
  .hero { padding-block: 52px 64px; }
  .privacy-strip, .privacy-strip.has-icon { padding: 28px 24px; }
}