/* dowa 공통 스타일 (login.html, privacy.html): 따뜻한 종이 바탕, 언어별 명조 제목, 남색(藍) 포인트, 검은 알약 버튼.
   index.html은 같은 값을 자기 <style>에 따로 씁니다. 색이나 글꼴을 바꾸면 두 곳을 같이 바꾸세요. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..600,0..100&family=Gowun+Batang:wght@400;700&family=Zen+Old+Mincho:wght@500;700&family=Noto+Serif+SC:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --paper: #f4f0e8;
  --ink: #16181b;
  --sub: #5d6168;
  --faint: #9a9ea5;
  --line: rgba(22, 24, 27, 0.09);
  --soft: #f1ede5;
  --accent: #1f4fa3;
  --red: #d33a32;
  --sans: "Zen Kaku Gothic New", "Pretendard Variable", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --serif: "Fraunces", "Gowun Batang", Georgia, serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
html:lang(ko) { --sans: "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --serif: "Gowun Batang", "Fraunces", serif; }
html:lang(ja) { --serif: "Zen Old Mincho", "Fraunces", serif; }
html:lang(zh) { --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Pretendard Variable", sans-serif; --serif: "Noto Serif SC", "Fraunces", serif; }

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 16px/1.75 var(--sans);
  word-break: normal; word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}
html:lang(ko) body { word-break: keep-all; }
html:lang(ja) body { font-feature-settings: "palt"; }
a { color: inherit; }
[hidden] { display: none !important; }

/* 제목: 언어별 명조 */
.serif { font-family: var(--serif); font-weight: 400; font-variation-settings: "SOFT" 60; }
html:lang(ko) .serif { font-weight: 700; }
html:lang(ja) .serif, html:lang(zh) .serif { font-weight: 500; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 56px); }

/* 위쪽 메뉴: 떠 있는 알약 */
.site-nav { position: sticky; top: 0; z-index: 50; padding: 12px clamp(12px, 3vw, 24px) 0; }
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  max-width: 980px; min-height: 54px; padding: 7px 7px 7px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(251, 250, 247, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; letter-spacing: 0.01em; text-decoration: none; }
.logo svg { width: 32px; height: 22px; }
.nav-right { display: flex; align-items: center; gap: 4px; }
.nav-link { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--sub); text-decoration: none; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--ink); background: rgba(22, 24, 27, 0.05); }

.lang { position: relative; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.lang:hover { background: rgba(22, 24, 27, 0.05); }
.lang svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lang svg.chev { width: 10px; height: 10px; stroke-width: 2.2; }
.lang select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.lang:focus-within { box-shadow: 0 0 0 2px var(--ink) inset; }

/* 버튼: 검은 알약 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--ink); color: #ffffff;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 18px rgba(22, 24, 27, 0.16);
  transition: background .15s, transform .15s var(--ease), box-shadow .2s;
}
.btn:hover { background: #2a2d31; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 24px rgba(22, 24, 27, 0.2); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-dark { background: var(--ink); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.btn-small:hover { transform: none; box-shadow: none; }
.btn:disabled { background: rgba(22, 24, 27, 0.07); color: var(--faint); box-shadow: none; cursor: default; transform: none; }

/* 아래쪽 */
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 32px 40px; font-size: 14px; color: var(--sub); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

@media (max-width: 719px) {
  .nav-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}