/*
 * 솥긱 브랜드 스타일 — docs/brand-guide.md 의 '대표 색'을 따른다.
 * 바탕은 모두 나무, 글자는 한지 계열, 누르는 곳만 한지빛. 그림자·그라데이션·흐림은 쓰지 않는다.
 * 기존 페이지와 겹치지 않도록 새 부품은 sg- 로 시작한다.
 */
:root {
    --wood: #3A2B24;          /* 먹감나무: 모든 바탕 */
    --hanji: #EEE7DC;         /* 한지: 본문 글자 */
    --hanji-bright: #FBF6EF;  /* 한지 밝은 면: 입력 글자 */
    --hanji-title: #F5ECDF;   /* 한지 제목: 제목 */
    --glow: #C9975F;          /* 한지빛: 주 버튼 면, 큰 글자 강조 */
    --glow-hover: #D6A773;
    --glow-deep: #AE8250;     /* 깊은 한지빛: 눌림 */
    --hanji-dim: #B9A48F;     /* 흐린 한지: 보조 글자 */
    --ink: #2A1F19;           /* 먹: 한지빛·한지 위 글자 */
    --error: #C0392B;         /* 오류에만 */
    --error-text: #F2A99F;

    --line: rgba(238, 231, 220, 0.14);
    --line-strong: rgba(238, 231, 220, 0.30);
    --sink: rgba(42, 31, 25, 0.45);

    --serif: 'MaruBuri', 'Gowun Batang', 'Nanum Myeongjo', serif;
    --sans: 'Pretendard', 'Pretendard-Regular', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    /* 글자 크기: 13 · 15 · 17 · 20 · 26 · 34 · 48 */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-md: 1.0625rem;
    --t-lg: 1.25rem;
    --t-xl: 1.625rem;
    --t-2xl: 2.125rem;
    --t-3xl: clamp(2rem, 5vw, 3rem);

    /* 간격: 8의 배수 */
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

    --r-sm: 4px;
    --r-md: 12px;
    --r-pill: 999px;

    --gut: clamp(16px, 4vw, 40px);
    --head-h: 61px;
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

html { background: var(--wood); }
/* globals.css 의 height:100% 가 sticky 머리를 한 화면에서 멈추게 하므로 풀어 준다 */
html, body { height: auto; min-height: 100%; }
body {
    background: var(--wood);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
/* Bootstrap 을 걷어내며 옮긴 기본값: hidden 속성은 언제나 숨긴다 */
[hidden] { display: none !important; }
/* 한 줄 소개 글 (Bootstrap .lead 와 같은 값. 페이지 스타일이 크기를 정하면 그쪽이 이긴다) */
.lead { font-size: 1.25rem; font-weight: 300; }
/* 그 밖에 Bootstrap 이 정해 주던 기본값 */
a { color: var(--hanji-title); }
input, button, select, optgroup, textarea { margin: 0; line-height: inherit; }
button { border-radius: 0; }
button:not(:disabled), [type="button"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; }
textarea { overflow: auto; resize: vertical; }
/* 입력칸이 기본 너비 때문에 좁은 화면에서 칸을 밀어내지 않게 */
input, select, textarea { max-width: 100%; }
th { text-align: inherit; }
label { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── 공통 틀 ─────────────────────────────── */
.sg-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gut); }
.sg-page { color: var(--hanji); text-align: left; font-size: var(--t-md); line-height: 1.75; word-break: keep-all; }
.sg-page h1, .sg-page h2, .sg-page h3 {
    font-family: var(--serif); color: var(--hanji-title); font-weight: 400;
    line-height: 1.4; letter-spacing: -0.01em; text-wrap: balance; margin: 0;
}
.sg-page p { margin: 0; }
.sg-page img { margin: 0; max-width: 100%; height: auto; }
.sg-page a { color: inherit; }
.sg-page a:hover { text-decoration: none; }
.sg-page :focus-visible { outline: 2px solid var(--glow) !important; outline-offset: 3px; }
.sg-kicker { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hanji-dim); }
.sg-muted { color: var(--hanji-dim); }
.sg-num { font-variant-numeric: tabular-nums; }

/* 버튼 */
.sg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--r-sm);
    font: 600 var(--t-sm)/1 var(--sans); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.sg-btn:hover { text-decoration: none; }
.sg-btn-primary, a.sg-btn-primary { background: var(--glow); color: var(--ink); }
.sg-btn-primary:hover, a.sg-btn-primary:hover { background: var(--glow-hover); color: var(--ink); }
.sg-btn-primary:active { background: var(--glow-deep); }
.sg-btn-line, a.sg-btn-line { background: transparent; border-color: var(--line-strong); color: var(--hanji); }
.sg-btn-line:hover, a.sg-btn-line:hover { border-color: var(--hanji); color: var(--hanji); }
.sg-btn[disabled], .sg-btn[aria-disabled="true"] { background: transparent; border-color: var(--line); color: var(--hanji-dim); cursor: default; }
.sg-link, a.sg-link {
    color: var(--hanji-title); text-decoration: underline; text-decoration-color: var(--hanji-dim);
    text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.sg-link:hover, a.sg-link:hover { color: var(--hanji-title); text-decoration: underline; text-decoration-color: var(--glow); }

/* ── 머리 ───────────────────────────────── */
.sg-head {
    position: sticky; top: 0; z-index: 900;
    background: var(--wood); border-bottom: 1px solid var(--line);
    text-align: left; color: var(--hanji);
}
.sg-head .sg-wrap { display: flex; align-items: center; gap: var(--s3); min-height: var(--head-h); padding-block: 8px; }
.sg-logo { display: block; flex: none; }
.sg-logo img { display: block; height: 40px; width: auto; margin: 0; }
.sg-menu { margin-left: auto; }
.sg-menu ul, .sg-account { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.sg-menu a, .sg-account a, .sg-account button {
    display: inline-block; padding-block: 6px; border: 0; border-bottom: 1px solid transparent; background: none;
    color: var(--hanji); font-size: var(--t-sm); line-height: 1.4; text-decoration: none; cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}
.sg-account a, .sg-account button { color: var(--hanji-dim); font-size: var(--t-xs); }
.sg-menu a:hover, .sg-account a:hover, .sg-account button:hover { color: var(--hanji-title); border-color: var(--hanji-dim); text-decoration: none; }
.sg-menu a[aria-current="page"] { color: var(--hanji-title); border-color: var(--glow); }
.sg-account { padding-left: var(--s3); border-left: 1px solid var(--line); }
.sg-menu-btn { display: none; }

.sg-adminbar { border-bottom: 1px solid var(--line); background: var(--sink); font-size: var(--t-xs); text-align: left; }
.sg-adminbar .sg-wrap { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-block: 8px; }
.sg-adminbar span { color: var(--hanji-dim); letter-spacing: 0.08em; }
.sg-adminbar a { color: var(--hanji); text-decoration: none; }
.sg-adminbar a:hover { color: var(--hanji-title); text-decoration: underline; text-underline-offset: 4px; }
.sg-badge {
    display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: var(--r-pill);
    background: var(--glow); color: var(--ink); font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}

.sg-sheet { display: none; }

/* 알림 (예전 Bootstrap .alert 모양을 옮김) */
.sg-flash { text-align: left; }
.sg-flash .alert { position: relative; padding: 12px 56px 12px 20px; line-height: 1.6; }
.sg-flash .alert.fade { transition: opacity .15s linear; }
.sg-flash .alert.fade:not(.show) { opacity: 0; }
.sg-flash .alert .close {
    position: absolute; top: 0; right: 0; height: 100%; padding: 0 20px; border: 0; background: none;
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sg-flash .alert {
    max-width: 1200px; margin: var(--s2) auto 0; border-radius: var(--r-sm);
    background: var(--wood); color: var(--hanji); border: 1px solid var(--hanji-dim); font-size: var(--t-sm);
}
.sg-flash .alert-danger { border-color: var(--error); background: rgba(192, 57, 43, 0.12); }
.sg-flash .alert .close { color: var(--hanji); text-shadow: none; opacity: .7; }
@media (max-width: 1240px) { .sg-flash .alert { margin-inline: var(--gut); } }

/* ── 발 ─────────────────────────────────── */
.sg-foot { margin-top: var(--s8); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); text-align: left; color: var(--hanji); }
.sg-foot .sg-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s4); }
.sg-foot-brand { display: grid; gap: var(--s1); align-content: start; }
.sg-foot-brand b { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); color: var(--hanji-title); }
.sg-foot-brand p { margin: 0; font-size: var(--t-sm); color: var(--hanji-dim); }
.sg-foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.sg-foot-links a { color: var(--hanji-dim); text-decoration: none; }
.sg-foot-links a:hover { color: var(--hanji); text-decoration: none; }
.sg-foot-biz { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3); margin: 0; font-size: var(--t-xs); line-height: 1.7; }
.sg-foot-biz dt { color: var(--hanji-dim); font-weight: 400; }
.sg-foot-biz dd { margin: 0; color: var(--hanji); }
.sg-foot small { grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--hanji-dim); }

/* ── 가물가물 작은 메뉴 (모든 가물가물 페이지 공통, 페이지 안 옛 스타일보다 우선) ── */
body .gm-subnav {
    display: flex; justify-content: flex-start; gap: var(--s4); max-width: 1200px; margin: 0 auto;
    padding: 0 var(--gut); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; text-align: left;
}
body .gm-subnav::-webkit-scrollbar { display: none; }
body .gm-subnav .gm-subnav-item {
    flex: none; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
    color: var(--hanji-dim); font-size: var(--t-sm); font-weight: 400; white-space: nowrap; text-decoration: none;
}
body .gm-subnav .gm-subnav-item:hover { background: none; color: var(--hanji); }
body .gm-subnav .gm-subnav-item.active { background: none; color: var(--hanji-title); border-bottom-color: var(--hanji-title); }

/* 언어 전환 */
.sg-lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 2px; }
.sg-lang button {
    padding: 4px 12px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
    color: var(--hanji-dim); font-size: var(--t-xs); line-height: 1.4;
}
.sg-lang button.active, .sg-lang button[aria-pressed="true"] { background: var(--hanji); color: var(--ink); }

/* ── 스마트폰 ───────────────────────────── */
@media (max-width: 860px) {
    .sg-menu, .sg-account { display: none; }
    .sg-logo img { height: 32px; }
    .sg-menu-btn {
        display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 4px;
        border: 0; background: none; color: var(--hanji); font-size: var(--t-sm); cursor: pointer;
    }
    .sg-sheet:not([hidden]) {
        display: grid; position: fixed; left: 0; right: 0; bottom: 0; top: var(--head-h); z-index: 899;
        align-content: space-between; gap: var(--s4); overflow: auto; text-align: left;
        padding: var(--s3) 16px calc(var(--s4) + env(safe-area-inset-bottom, 0px));
        background: var(--wood); border-top: 1px solid var(--line);
    }
    .sg-sheet ul { display: grid; margin: 0; padding: 0; list-style: none; }
    .sg-sheet li a {
        display: block; padding-block: 16px; border-bottom: 1px solid var(--line);
        font-family: var(--serif); font-size: var(--t-xl); color: var(--hanji-title); text-decoration: none;
    }
    .sg-sheet li a[aria-current="page"] { color: var(--glow); }
    .sg-sheet .sg-sheet-sub { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
    .sg-sheet .sg-sheet-sub a, .sg-sheet .sg-sheet-sub button {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
        color: var(--hanji-dim); font-size: var(--t-sm); text-decoration: none; cursor: pointer;
    }
    body.sg-lock { overflow: hidden; }
    .sg-adminbar .sg-wrap { gap: var(--s2); }
    .sg-foot .sg-wrap { grid-template-columns: 1fr; }
    body .gm-subnav { gap: var(--s3); }
}