@charset "utf-8";

@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/500.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/600.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/800.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5.2.8/900.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-gov.min.css");

/* =========================================================
   basic.css : 색상 토큰, 리셋, 공통 요소
   - 색은 모두 :root 변수로 관리 (다크 모드는 아래에서 값만 바꿈)
   - 브레이크포인트 : 1024px(태블릿), 768px(모바일)
   ========================================================= */

:root {
  --paper: #F5F7F9;      /* 페이지 바탕 */
  --surface: #FFFFFF;    /* 이미지 틀, 패널 */
  --ink: #16202A;        /* 본문 글자 */
  --muted: #5A6774;      /* 보조 글자 */
  --line: #D8DFE6;       /* 구분선 */
  --button-blue: #0D7FD9;
  --button-blue-hover: #0863AD;
  --select: #0D7FD9;     /* 선택 박스, 링크, 포커스 */
  --select-ink: #FFFFFF; /* select 위 글자 */
  --todo: #B54708;       /* 채워야 할 자리 표시 */

  --font-kr: 'Pretendard GOV';
  --font-display: 'Montserrat';

  --inner: 1200px;
  --gutter: 40px;
  --header-h: 68px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F151B;
    --surface: #18212A;
    --ink: #E7ECF1;
    --muted: #98A6B3;
    --line: #2B3743;
    --select: #4CB0FF;
    --select-ink: #06121C;
    --todo: #F5A35B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F151B;
  --surface: #18212A;
  --ink: #E7ECF1;
  --muted: #98A6B3;
  --line: #2B3743;
  --select: #4CB0FF;
  --select-ink: #06121C;
  --todo: #F5A35B;
  color-scheme: dark;
}

/* ---------- reset ---------- */
:where(*), :where(*::before), :where(*::after) {margin: 0; padding: 0; box-sizing: border-box;}

:root {box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);}
html {scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; overflow-x: clip;}
body {background: var(--paper); color: var(--ink); font-family: var(--font-kr); font-size: 17px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;}

h1, h2, h3, h4 {font-weight: 700; line-height: 1.3;}
ul, ol {list-style: none;}
a {color: inherit; text-decoration: none;}
img {display: block; max-width: 100%; height: auto;}
button {font: inherit; color: inherit; background: none; border: none; cursor: pointer;}
dl, dd {margin: 0;}

:focus-visible {outline: 3px solid var(--select); outline-offset: 3px; border-radius: 2px;}

/* ---------- layout ---------- */
.inner {width: 100%; max-width: calc(var(--inner) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);}
.inner.row {display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.section_area {padding: 120px 0; border-top: 1px solid var(--line);}

.pc_br {display: inline;}

/* ---------- 접근성 보조 ---------- */
.sr_only {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.skip_link {position: fixed; top: -100px; left: 16px; z-index: 6000; padding: 10px 16px; background: var(--select); color: var(--select-ink); font-weight: 600; border-radius: 4px;}
.skip_link:focus {top: calc(12px + env(safe-area-inset-top, 0px));}

/* ---------- 버튼 ---------- */
.btn {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s;}
.btn_fill {background: var(--button-blue); color: #fff;}
.btn_fill:hover {background: var(--button-blue-hover); color: #fff;}
.btn_line {border: 1px solid #E7ECF1; color: #E7ECF1;}
.btn_line:hover {background: var(--button-blue); border-color: var(--button-blue); color: #fff;}

/* ---------- 채워야 할 자리 : 제출 전에 모두 없애기 ---------- */
.todo {color: var(--todo); background: color-mix(in srgb, var(--todo) 10%, transparent); border-bottom: 1px dashed var(--todo); padding: 0 2px; font-weight: inherit;}

/* ---------- 맨 위로 ---------- */
.top_btn {position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 4000; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--button-blue); color: #fff; border: 1px solid var(--button-blue); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease, border-color .3s ease, color .3s ease;}
.top_btn.show {opacity: 1; visibility: visible; transform: translateY(0);}
.top_btn.show:hover {background: var(--button-blue-hover); border-color: var(--button-blue-hover); color: #fff; transform: translateY(-5px);}

/* ---------- 알림 ---------- */
.toast {position: fixed; left: 50%; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); z-index: 5000; transform: translate(-50%, 16px); max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 4px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;}
.toast.show {opacity: 1; transform: translate(-50%, 0);}

@media screen and (max-width: 1024px) {
  :root {--gutter: 28px;}
  .section_area {padding: 96px 0;}
}

@media screen and (max-width: 768px) {
  :root {--gutter: 20px; --header-h: 60px;}
  body {font-size: 16px;}
  .section_area {padding: 72px 0;}
  .pc_br {display: none;}
  .top_btn {right: 16px;}
}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .top_btn, .top_btn.show, .top_btn.show:hover {transform: none;}
  *, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;}
}