/* 첫 화면 전용 설정: 값만 바꾸면 시작 화면에 적용됩니다. */
#welcome {
  --welcome-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --welcome-background: #fffcfa;
  --welcome-title-color: #17212b;
  --welcome-accent-color: #ec5675;
  --welcome-description-color: #17212b;
  --welcome-button-color: #f35c7b;
  --welcome-button-text: #ffffff;
  --welcome-title-size: 45px;
  --welcome-title-weight: 900;
  --welcome-title-spacing: -0.09em;
  --welcome-description-size: 17px;
  --welcome-illustration-width: 280px;
  --welcome-side-padding: 25px;
  --welcome-button-radius: 12px;
  font-family: var(--welcome-font);
  background: var(--welcome-background);
  padding-left: var(--welcome-side-padding);
  padding-right: var(--welcome-side-padding);
}
#welcome h1 { color: var(--welcome-title-color); font-size: var(--welcome-title-size); font-weight: var(--welcome-title-weight); letter-spacing: var(--welcome-title-spacing); }
#welcome h1 span { color: var(--welcome-accent-color); }
#welcome .welcome-center p { color: var(--welcome-description-color); font-size: var(--welcome-description-size); }
#welcome img { width: min(100%, var(--welcome-illustration-width)); }
#welcome .primary { background: var(--welcome-button-color); color: var(--welcome-button-text); border-radius: var(--welcome-button-radius); }
#welcome .link-button { color: var(--welcome-accent-color); }

/* 링크 저장 일러스트와 이어지는 파스텔 시작 화면 */
#welcome{--welcome-title-size:48px;--welcome-title-spacing:-.075em;--welcome-title-color:#30303b;--welcome-accent-color:#ef7892;--welcome-description-color:#67616b;--welcome-illustration-width:340px;--welcome-button-radius:20px;background:radial-gradient(ellipse at 15% 20%,#fff0f3 0,transparent 52%),radial-gradient(ellipse at 95% 65%,#f1f6e9 0,transparent 45%),#fffcfa;padding-top:36px;gap:20px}
#welcome .welcome-eyebrow{display:inline-block;background:#fff6f1;border:1px solid #f4e2da;color:#92776e;border-radius:999px;padding:7px 14px;font-size:12px;letter-spacing:.02em;margin-bottom:18px}
#welcome h1{margin-bottom:16px;line-height:1.15}
#welcome .welcome-center p{line-height:1.65;margin-bottom:8px;letter-spacing:-.025em}
#welcome img{height:auto;display:block;mix-blend-mode:multiply;border-radius:32px}
#welcome .primary{min-height:56px;background:linear-gradient(120deg,#f890a6,#ef708f);box-shadow:0 8px 20px #ec76912b;font-size:16px;transition:transform .15s,box-shadow .15s}
#welcome .primary:active{transform:scale(.98);box-shadow:0 3px 10px #ec769120}
#welcome .primary:focus-visible{outline:3px solid #a84863;outline-offset:4px}
#welcome .welcome-actions p{color:#8b8086;font-size:12px;margin-top:18px}
@media(max-height:690px){#welcome{padding-top:22px;padding-bottom:24px;gap:14px}#welcome .welcome-eyebrow{margin-bottom:12px}#welcome img{max-width:260px}#welcome h1{font-size:43px;margin-bottom:10px}}

/* Jua — Copyright 2018 The Jua Project Authors, SIL OFL 1.1 */
@font-face{font-family:"Salkka Jua";src:url("assets/Jua-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
#welcome{--welcome-font:"Salkka Jua",system-ui,sans-serif;--welcome-title-weight:400;--welcome-title-spacing:-.035em;--welcome-title-size:52px;font-synthesis:none}
#welcome .welcome-center p{font-size:20px;font-weight:400;letter-spacing:0;line-height:1.55}
#welcome .welcome-eyebrow{font-size:14px;letter-spacing:0}
#welcome .primary{font-family:var(--welcome-font);font-size:21px;font-weight:400}
#welcome .welcome-actions p{font-size:14px}#welcome .link-button{font-family:var(--welcome-font);font-weight:400}
@media(max-height:690px){#welcome h1{font-size:46px}#welcome .welcome-center p{font-size:18px}}

/* 공통 화면·대화상자 제목: 주아체. 상품명과 기록 본문은 기존 서체 유지. */
.screen h1:not(#product-title),.screen h2:not(#stats-persona-text),dialog h2{
 font-family:"Salkka Jua",system-ui,sans-serif;
 font-weight:400;
 font-synthesis:none;
 letter-spacing:-.025em;
}
.top h1{font-size:27px;line-height:1.2}

/* 공통 제목·여백 기준: 화면 26px, 섹션 18px, 팝업 22px */
:root{--page-title-size:26px;--section-title-size:18px;--dialog-title-size:22px;--page-gutter:20px;--page-top:28px;--title-gap:20px}
.wishlist,.category-screen,.timeline-screen,.stats-screen{padding-top:var(--page-top);padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.top h1,.category-header h1,.timeline-header h1,.stats-screen header h1,.link-content h1{font-size:var(--page-title-size);line-height:1.3;letter-spacing:-.025em;padding:0;margin:0}
.top-line{min-height:36px}.top{padding-bottom:var(--title-gap)}.categories{margin-top:var(--title-gap)}
.category-header,.timeline-header,.stats-screen>header{margin-bottom:var(--title-gap)}
.timeline-header p{margin:8px 0 0;line-height:1.5}
.link-screen{padding-top:var(--page-top);padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.link-screen>.back{width:36px;height:36px;line-height:1;display:grid;place-items:center}
.link-content{padding-top:var(--title-gap)}.link-content h1{margin-bottom:24px;line-height:1.4}
.link-content h2,.stats-panel h2,.timeline-group h2{font-size:var(--section-title-size);line-height:1.4;letter-spacing:-.02em;margin:0 0 12px}
.dialog-head{min-height:36px;margin-bottom:16px;align-items:center}
.dialog-head h2{font-size:var(--dialog-title-size);line-height:1.35;margin:0;letter-spacing:-.025em}

#welcome .social-login-options{display:grid;gap:10px;margin-top:14px}
#welcome .social-login{display:flex;align-items:center;justify-content:center;position:relative;gap:12px;width:100%;min-height:48px;padding:12px 18px;border-radius:16px;font-family:system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:14px;font-weight:600;line-height:1.4}
#welcome .social-login svg{width:20px;height:20px;flex-shrink:0}
#welcome .google-login{background:#fff;color:#31343a;border:1px solid #ded9dc}
#welcome .kakao-login{background:#fee500;color:#191919;border:1px solid #fee500}
#welcome .social-login:focus-visible{outline:3px solid #c35a79;outline-offset:3px}
#welcome .social-login:active{transform:scale(.98)}
#welcome .welcome-actions{width:100%}

/* Keep navigation dimensions consistent with detail navigation. */
.link-screen>.back-button{width:34px;height:34px}