/* =====================================================================
   [당도] 공통 디자인 틀 — 생활 앱처럼 익숙하고 차분하게, 따뜻한 색으로
   - 바탕·글씨·강조(캐러멜) 세 가지 색, 흰 카드, 테두리 없는 입력칸, 아래에 붙는 주 버튼
   - 휴대폰 세로(폭 약 390px)로 녹화해 릴스에 넣는다: 결과는 크게, 대비는 강하게
   - 줄바꿈·문구 규칙: docs/design-system.md
   ===================================================================== */

@font-face {
  font-family: "Pretendard";
  src: url("fonts/pretendard-subset.woff2") format("woff2-variations"), url("fonts/pretendard-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* 색 */
  --dd-bg: #f7f3ee;            /* 따뜻한 옅은 바탕 */
  --dd-surface: #ffffff;       /* 카드 */
  --dd-fill: #f3ede6;          /* 입력칸 채움 */
  --dd-ink: #2a2320;           /* 글씨 */
  --dd-sub: #6b5f57;           /* 보조 글씨 */
  --dd-faint: #716660;         /* 흐린 글씨 (입력칸 채움 위 4.7:1) */
  --dd-line: #e6ddd3;
  --dd-accent: #b9501c;        /* 캐러멜: 주 버튼·강조 하나 */
  --dd-accent-press: #a2451a;
  --dd-accent-soft: #fbe9dc;
  --dd-accent-ink: #9a3f12;    /* 옅은 캐러멜 위 글씨 */
  --dd-secondary: #ece4db;     /* 보조 버튼 */
  --dd-secondary-ink: #3b322d;
  --dd-danger: #b42318;
  --dd-warn-soft: #fff1d6;

  /* 글꼴 */
  --dd-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "Segoe UI", sans-serif;

  /* 모양 */
  --dd-radius-sm: 12px;
  --dd-radius: 16px;
  --dd-radius-lg: 22px;
  --dd-gutter: 20px;
  --dd-header-h: 56px;
  --dd-shadow: 0 1px 2px rgba(42, 35, 32, 0.04), 0 8px 24px rgba(42, 35, 32, 0.06);

  /* 움직임 */
  --dd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dd-reveal-ms: 480ms;
}

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

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

body {
  margin: 0;
  background: var(--dd-bg);
  color: var(--dd-ink);
  font-family: var(--dd-font);
  font-size: 17px;
  line-height: 1.5;
  /* 줄바꿈 규칙: 낱말 중간에서 끊지 않고, 한두 글자만 남는 줄을 피한다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

::selection {
  background: var(--dd-accent-soft);
  color: var(--dd-ink);
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

input {
  caret-color: var(--dd-accent);
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--dd-accent);
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.dd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 앱 틀 ---------- */
.dd-app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--dd-gutter);
}

/* ---------- 머리말 ---------- */
.dd-header {
  height: var(--dd-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.dd-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--dd-ink);
}

.dd-logo .dd-bracket {
  color: var(--dd-accent);
}

.dd-badge {
  font-size: 14px;
  font-weight: 600;
  color: var(--dd-sub);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dd-badge b {
  font-weight: 700;
  color: var(--dd-ink);
}

/* ---------- 제목·글 ---------- */
.dd-lead {
  margin: 14px 4px 18px;
  font-size: 27px;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.dd-lead em {
  font-style: normal;
  color: var(--dd-accent);
}

.dd-title {
  margin: 6px 4px 16px;
  font-size: 24px;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dd-sub {
  margin: -8px 4px 16px;
  color: var(--dd-sub);
  font-size: 16px;
}

.dd-section-label {
  margin: 28px 4px 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dd-sub);
}

/* ---------- 카드 (흰 묶음) ---------- */
.dd-card {
  background: var(--dd-surface);
  border-radius: var(--dd-radius-lg);
  padding: 20px 18px;
}

/* ---------- 안내 문구 ---------- */
.dd-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: var(--dd-radius);
  background: var(--dd-surface);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.dd-notice svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

/* 요구사항이 정한 안심 문구 전용 — 크게 */
.dd-notice--safe {
  background: var(--dd-accent-soft);
  color: var(--dd-accent-ink);
  font-size: 17px;
  font-weight: 700;
}

.dd-notice--warn {
  background: var(--dd-warn-soft);
  font-size: 15px;
}

/* ---------- 입력 ---------- */
.dd-field {
  margin: 0 0 16px;
}

.dd-label {
  display: block;
  margin: 0 0 8px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dd-sub);
}

.dd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.dd-input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--dd-fill);
  font-size: 19px;
  font-weight: 600;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.dd-input::placeholder {
  color: var(--dd-faint);
  font-weight: 500;
}

.dd-input:focus {
  background: var(--dd-surface);
  box-shadow: inset 0 0 0 2px var(--dd-accent);
}

.dd-input[aria-invalid="true"] {
  background: var(--dd-surface);
  box-shadow: inset 0 0 0 2px var(--dd-danger);
}

.dd-input--with-btn {
  padding-right: 84px;
}

.dd-input-btn {
  position: absolute;
  right: 8px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dd-sub);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.dd-error {
  margin: 8px 2px 0;
  color: var(--dd-danger);
  font-size: 15px;
  font-weight: 600;
}

/* 접히는 자세한 설정 */
.dd-more {
  margin: 0;
}

.dd-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dd-sub);
}

.dd-more > summary::-webkit-details-marker {
  display: none;
}

.dd-more > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
}

.dd-more[open] > summary::after {
  transform: rotate(-135deg) translateY(-3px);
}

.dd-more-body {
  padding: 4px 0 6px;
}

/* 여러 개 중 하나 고르기 */
.dd-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: var(--dd-fill);
}

.dd-seg legend {
  padding: 0;
}

.dd-seg label {
  flex: 1;
  position: relative;
}

.dd-seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.dd-seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: var(--dd-sub);
  transition: background 0.15s, color 0.15s;
}

.dd-seg input:checked + span {
  background: var(--dd-surface);
  color: var(--dd-ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(42, 35, 32, 0.12);
}

.dd-seg input:focus-visible + span {
  outline: 3px solid var(--dd-accent);
}

/* 켜고 끄기 */
.dd-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.dd-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.dd-switch .dd-switch-ui {
  flex: none;
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: #d8cec4;
  transition: background 0.2s;
}

.dd-switch .dd-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(42, 35, 32, 0.25);
  transition: transform 0.2s var(--dd-ease-out);
}

.dd-switch input:checked + .dd-switch-ui {
  background: var(--dd-accent);
}

.dd-switch input:checked + .dd-switch-ui::after {
  transform: translateX(20px);
}

.dd-switch input:focus-visible + .dd-switch-ui {
  outline: 3px solid var(--dd-accent);
  outline-offset: 2px;
}

/* ---------- 버튼 ---------- */
.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--dd-radius);
  background: var(--dd-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.dd-btn:hover {
  background: var(--dd-accent-press);
}

.dd-btn:active {
  transform: scale(0.98);
}

.dd-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.dd-btn--secondary {
  background: var(--dd-secondary);
  color: var(--dd-secondary-ink);
}

.dd-btn--secondary:hover {
  background: #e3d9ce;
}

.dd-btn--ghost,
.dd-btn--demo {
  min-height: 44px;
  background: transparent;
  color: var(--dd-sub);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dd-btn--ghost:hover,
.dd-btn--demo:hover {
  background: transparent;
  color: var(--dd-ink);
}

.dd-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.dd-actions--row {
  grid-template-columns: 1fr 1.4fr;
}

/* 화면 아래에 붙는 버튼 자리 */
.dd-bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: auto calc(var(--dd-gutter) * -1) 0;
  padding: 18px var(--dd-gutter) calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(247, 243, 238, 0), var(--dd-bg) 22px);
}

.dd-bottom .dd-actions {
  margin-top: 0;
}

.dd-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  margin-left: -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--dd-sub);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.dd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--dd-surface);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.dd-chip .dd-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-chip .dd-chip-edit {
  flex: none;
  color: var(--dd-accent);
  font-weight: 700;
}

/* ---------- 결과 ---------- */
.dd-result-card {
  background: var(--dd-surface);
  border-radius: 24px;
  padding: 20px 18px;
}

/* 결과가 나오는 순간: 이미 보이는 상태에서 짧게 떠오르는 효과 */
.dd-reveal {
  animation: dd-rise var(--dd-reveal-ms) var(--dd-ease-out) both;
}

@keyframes dd-rise {
  from {
    opacity: 0.25;
    transform: translateY(14px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.dd-fade-in {
  animation: dd-fade 300ms var(--dd-ease-out) both;
}

@keyframes dd-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 바닥 시트 (안내 창) ---------- */
.dd-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(42, 35, 32, 0.45);
  animation: dd-fade 200ms ease-out both;
}

.dd-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  padding: 24px var(--dd-gutter) calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--dd-surface);
}

.dd-sheet h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dd-sheet p {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--dd-sub);
}

.dd-sheet ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 16px;
  font-weight: 600;
}

.dd-sheet-img {
  display: block;
  width: 100%;
  max-height: 56vh;
  object-fit: contain;
  margin: 8px 0 12px;
  border-radius: 14px;
  background: var(--dd-fill);
  -webkit-touch-callout: default;
  user-select: auto;
}

/* ---------- 토스트 ---------- */
.dd-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--dd-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(42, 35, 32, 0.2);
  animation: dd-fade 200ms ease-out both;
}

.dd-toast button {
  flex: none;
  border: 0;
  background: none;
  color: #f5c6a5;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 인쇄: 공통 ---------- */
.dd-print-area {
  display: none;
}

@media print {
  * {
    animation: none !important;
    transition: none !important;
  }

  html,
  body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > :not(.dd-print-area) {
    display: none !important;
  }

  .dd-print-area {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}