/* =====================================================================
   assets/css/base.css - 기본 스타일 (색상 변수, 글꼴, 버튼, 입력칸, 알림)
   디자인 방향: 밝고 따뜻한 톤(크림 배경 + 캐러멜 포인트) · 정보 사이트답게 절제
   색을 바꾸고 싶으면 :root 의 변수만 고치면 사이트 전체에 반영된다.
   ===================================================================== */

:root {
    --pw-bg:          #faf7f2;   /* 페이지 배경 (따뜻한 크림) */
    --pw-surface:     #ffffff;   /* 카드·패널 */
    --pw-surface-2:   #f5efe6;   /* 옅은 강조 배경 */
    --pw-border:      #e8dfd2;
    --pw-border-strong:#d8ccbb;
    --pw-text:        #2a2420;   /* 본문 글자 (진한 갈색빛 검정) */
    --pw-text-2:      #574d44;
    --pw-muted:       #85796c;
    --pw-brand:       #c4652a;   /* 캐러멜 - 주요 버튼·강조 */
    --pw-brand-strong:#a24f1b;
    --pw-brand-soft:  #fbede1;
    --pw-link:        #1d6a86;   /* 문서 링크 (청록) */
    --pw-link-missing:#c2402f;   /* 아직 없는 문서 링크 */
    --pw-ok:          #2f7d4f;
    --pw-ok-soft:     #e7f4ec;
    --pw-warn:        #9a6b12;
    --pw-warn-soft:   #fdf4dc;
    --pw-danger:      #b83227;
    --pw-danger-soft: #fcebe8;
    --pw-info-soft:   #e8f2f6;
    --pw-health:      #2b7a78;   /* 건강 문서 안내 색 */
    --pw-health-soft: #e6f4f3;

    --pw-radius:      12px;
    --pw-radius-sm:   8px;
    --pw-shadow:      0 1px 2px rgba(60, 40, 20, .05), 0 4px 14px rgba(60, 40, 20, .05);
    --pw-container:   1180px;
    --pw-read-width:  760px;     /* 문서 본문 최적 글 폭 */
    --pw-header-h:    60px;
    --pw-tabbar-h:    60px;

    --pw-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--pw-bg);
    color: var(--pw-text);
    font-family: var(--pw-font);
    font-size: 16px;
    line-height: 1.65;
    word-break: keep-all;          /* 한글 단어 중간 줄바꿈 방지 */
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--pw-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; letter-spacing: -0.01em; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
       background: var(--pw-surface-2); padding: .1em .35em; border-radius: 4px; }
:focus-visible { outline: 3px solid rgba(196, 101, 42, .45); outline-offset: 2px; border-radius: 4px; }

/* 화면에는 숨기고 화면낭독기에는 읽히는 글자 */
.pw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pw-skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--pw-text); color: #fff;
           padding: 8px 14px; border-radius: 8px; }
.pw-skip:focus { left: 8px; }

/* ---------- 버튼 ---------- */
.pw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 0 16px;
    border: 1px solid var(--pw-border-strong); border-radius: 10px;
    background: var(--pw-surface); color: var(--pw-text);
    font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer;
    text-decoration: none !important; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.pw-btn:hover { background: var(--pw-surface-2); }
.pw-btn-primary { background: var(--pw-brand); border-color: var(--pw-brand); color: #fff; }
.pw-btn-primary:hover { background: var(--pw-brand-strong); border-color: var(--pw-brand-strong); color: #fff; }
.pw-btn-danger { background: var(--pw-danger); border-color: var(--pw-danger); color: #fff; }
.pw-btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.pw-btn-lg { min-height: 50px; padding: 0 22px; font-size: 16px; }
.pw-btn-block { display: flex; width: 100%; }
.pw-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- 입력칸 ---------- */
.pw-input, .pw-select, .pw-textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--pw-border-strong); border-radius: 10px; background: #fff;
}
.pw-textarea { min-height: 160px; line-height: 1.6; resize: vertical; }
.pw-input:focus, .pw-select:focus, .pw-textarea:focus { outline: none; border-color: var(--pw-brand);
    box-shadow: 0 0 0 3px rgba(196, 101, 42, .15); }
.pw-label { display: block; font-weight: 600; margin-bottom: 6px; }
.pw-help { font-size: 13px; color: var(--pw-muted); margin-top: 4px; }

/* ---------- 알림 상자 ---------- */
.pw-alert { padding: 12px 16px; border-radius: var(--pw-radius-sm); margin: 0 0 16px; border: 1px solid transparent; }
.pw-alert-success { background: var(--pw-ok-soft); color: var(--pw-ok); border-color: #cbe7d6; }
.pw-alert-error   { background: var(--pw-danger-soft); color: var(--pw-danger); border-color: #f3cdc7; }
.pw-alert-warning { background: var(--pw-warn-soft); color: var(--pw-warn); border-color: #f1e1b0; }
.pw-alert-info    { background: var(--pw-info-soft); color: #1d5c74; border-color: #cfe3ec; }

/* ---------- 공통 작은 요소 ---------- */
.pw-meta { color: var(--pw-muted); font-size: 14px; }
.pw-count { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px;
            background: var(--pw-surface-2); color: var(--pw-text-2); font-size: 12px; font-weight: 700;
            line-height: 20px; text-align: center; vertical-align: middle; }
.pw-empty { color: var(--pw-muted); padding: 12px 0; margin: 0; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
           background: var(--pw-surface); border: 1px solid var(--pw-border); color: var(--pw-text-2);
           font-size: 14px; text-decoration: none !important; }
.pw-chip:hover { border-color: var(--pw-brand); color: var(--pw-brand-strong); }
.pw-chip-lg { padding: 9px 16px; font-size: 15px; }

.pw-table { width: 100%; border-collapse: collapse; }
.pw-table td, .pw-table th { padding: 10px 8px; border-bottom: 1px solid var(--pw-border); text-align: left; vertical-align: top; }
.pw-table tr:last-child td { border-bottom: 0; }