/* ══════════════════════════════════════════════════════════════════
   grigoGl — Bootstrap 호환 레이어
   경로: public/themes/grigogl/css/compat.css   (style.css 다음에 로드)

   아직 grigogl 테마로 옮기지 않은 화면은 ThemeView 폴백으로
   themes/default 의 Bootstrap 마크업이 그대로 렌더된다.
   Bootstrap CSS 를 로드하지 않으므로, 그 화면들이 최소한 브랜드 톤으로
   보이도록 실제로 쓰이는 클래스만 이 파일에서 대신 구현한다.
   → 화면을 grigogl 로 옮길 때마다 이 파일 의존은 줄어든다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 컨테이너 · 그리드 ──────────────────────────────────────────── */
.container,.container-fluid{width:100%;max-width:var(--container-max);margin:0 auto;padding-left:24px;padding-right:24px}
.container-fluid{max-width:none}
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
.row > *{padding-left:8px;padding-right:8px;box-sizing:border-box}
.col{flex:1 0 0%}
.col-auto{flex:0 0 auto;width:auto}
.col-12{flex:0 0 auto;width:100%}
.col-6,.col-md-6,.col-lg-6{flex:0 0 auto;width:50%}
.col-4,.col-md-4,.col-lg-4{flex:0 0 auto;width:33.3333%}
.col-3,.col-md-3,.col-lg-3{flex:0 0 auto;width:25%}
.col-8,.col-md-8,.col-lg-8{flex:0 0 auto;width:66.6667%}
.col-5,.col-md-5,.col-lg-5{flex:0 0 auto;width:41.6667%}
.col-7,.col-md-7,.col-lg-7{flex:0 0 auto;width:58.3333%}
.col-9,.col-lg-9{flex:0 0 auto;width:75%}
.col-sm-3{flex:0 0 auto;width:25%}
.row-cols-1 > *{width:100%}
.row-cols-2 > *{width:50%}
.row-cols-sm-2 > *{width:50%}
.row-cols-3 > *,.row-cols-sm-3 > *{width:33.3333%}
.row-cols-lg-3 > *{width:33.3333%}
.row-cols-4 > *,.row-cols-sm-4 > *,.row-cols-lg-4 > *{width:25%}
.g-1{gap:4px}.g-2{gap:8px}.g-3{gap:12px}.g-4{gap:16px}.g-5{gap:24px}
.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}
.justify-content-end{justify-content:flex-end}.justify-content-start{justify-content:flex-start}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}
.align-items-baseline{align-items:baseline}.align-self-center{align-self:center}
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}
.d-inline-block{display:inline-block}.d-none{display:none}
.d-md-block,.d-lg-inline-flex{display:block}
.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-shrink-0{flex-shrink:0}.flex-grow-1{flex-grow:1}.flex-fill{flex:1 1 auto}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:24px}
.w-100{width:100%}.h-100{height:100%}.mw-100{max-width:100%}.min-width-0{min-width:0}
.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}
.top-0{top:0}.start-0{left:0}.end-0{right:0}.bottom-0{bottom:0}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 간격 ───────────────────────────────────────────────────────── */
.m-0{margin:0}.mb-0{margin-bottom:0}.mt-0{margin-top:0}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:24px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:24px}
.me-1{margin-right:4px}.me-2{margin-right:8px}.me-3{margin-right:12px}.me-auto{margin-right:auto}
.ms-1{margin-left:4px}.ms-2{margin-left:8px}.ms-3{margin-left:12px}.ms-auto{margin-left:auto}
.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin:12px 0}.my-4{margin:16px 0}.my-5{margin:24px 0}
.p-0{padding:0}.p-1{padding:4px}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:24px}
.pt-2{padding-top:8px}.pt-3{padding-top:12px}.pb-1{padding-bottom:4px}.pb-2{padding-bottom:8px}.pb-3{padding-bottom:12px}
.px-0{padding-left:0;padding-right:0}.px-2{padding:0 8px}.px-3{padding-left:12px;padding-right:12px}
.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:24px;padding-right:24px}
.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:16px;padding-bottom:16px}.py-4{padding-top:32px;padding-bottom:32px}.py-5{padding-top:48px;padding-bottom:48px}
.ps-3{padding-left:12px}.pe-2{padding-right:8px}

/* ── 타이포 ─────────────────────────────────────────────────────── */
h1,.h1{font-size:2.25rem}h2,.h2{font-size:1.75rem}h3,.h3{font-size:1.375rem}
h4,.h4{font-size:1.25rem;font-family:var(--font-serif);font-weight:700;color:var(--text-title);margin:0}
h5,.h5{font-size:1.0625rem;font-family:var(--font-sans);font-weight:700;color:var(--text-title);margin:0}
h6,.h6{font-size:.9375rem;font-family:var(--font-sans);font-weight:700;color:var(--text-title);margin:0}
p{margin:0 0 1em}
.small,small{font-size:.8125rem}
.fs-1{font-size:2rem}.fs-2{font-size:1.75rem}.fs-3{font-size:1.5rem}.fs-4{font-size:1.25rem}
.fs-5{font-size:1.125rem}.fs-6{font-size:1rem}
.fw-bold{font-weight:700}.fw-semibold{font-weight:700}.fw-normal{font-weight:400}
.lh-sm{line-height:1.35}.lh-base{line-height:1.6}.lh-lg{line-height:1.9}
.text-center{text-align:center}.text-start{text-align:left}.text-end{text-align:right}
.text-uppercase{text-transform:uppercase}
.text-decoration-none{text-decoration:none}
.text-muted,.text-secondary{color:var(--text-muted)}
.text-dark{color:var(--text-title)}
.text-primary{color:var(--brand-text)}
.text-success{color:var(--state-success)}
.text-danger{color:var(--state-danger)}
.text-warning{color:var(--sun-600,#D9A518)}
.text-white{color:#fff}
a.text-muted:hover,a.text-dark:hover{color:var(--brand-text)}

/* ── 카드 ───────────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
 box-shadow:var(--shadow-sm);overflow:hidden}
.card.border-0{border:1px solid var(--border-hairline)}
.card-body{padding:16px}
.card-header{padding:16px;background:var(--surface-card);border-bottom:1px solid var(--border-hairline)}
.card-footer{padding:12px 16px;background:var(--surface-card);border-top:1px solid var(--border-hairline)}
.card.h-100{height:100%}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.border{border:1px solid var(--border-hairline)}
.border-0{border:none}
.border-top{border-top:1px solid var(--border-hairline)}
.border-bottom{border-bottom:1px solid var(--border-hairline)}
.border-start{border-left:1px solid var(--border-hairline)}
.rounded{border-radius:var(--radius-md)}.rounded-2{border-radius:var(--radius-md)}
.rounded-3{border-radius:var(--radius-lg)}.rounded-circle{border-radius:50%}.rounded-pill{border-radius:var(--radius-pill)}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}
.object-fit-cover{object-fit:cover}
.bg-white{background:var(--surface-card)}
.bg-light{background:var(--paper-100)}
.bg-primary{background:var(--brand)}
.bg-dark{background:var(--surface-inverse)}
.bg-secondary{background:var(--paper-300)}
.bg-success{background:var(--accent)}
.bg-primary.bg-opacity-10{background:var(--brand-soft)}
.bg-secondary.bg-opacity-25{background:var(--paper-200)}

/* ── 버튼 ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;
 font:500 .875rem/1.4 var(--font-sans);color:var(--text-body);background:var(--surface-sunken);
 border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;
 transition:background .12s var(--ease-out),color .12s var(--ease-out)}
.btn:hover{text-decoration:none;background:var(--paper-300);color:var(--text-title)}
.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:var(--radius-sm)}
.btn-lg{padding:14px 28px;font-size:1rem;border-radius:var(--radius-lg)}
.btn-primary,.btn-dark{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}
.btn-primary:hover,.btn-dark:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--text-on-brand)}
.btn-success{background:var(--accent);border-color:var(--accent);color:var(--text-on-brand)}
.btn-success:hover{background:var(--mint-600);border-color:var(--mint-600);color:var(--text-on-brand)}
.btn-warning{background:var(--sun-400);border-color:var(--sun-400);color:#6B4E06}
.btn-outline-primary{background:transparent;color:var(--brand-text);border-color:var(--border-brand)}
.btn-outline-primary:hover{background:var(--brand-soft);color:var(--brand-text)}
.btn-outline-secondary,.btn-outline-dark{background:transparent;color:var(--text-body);border-color:var(--border-hairline)}
.btn-outline-secondary:hover,.btn-outline-dark:hover{background:var(--paper-100);color:var(--text-title)}
.btn-outline-danger{background:transparent;color:var(--state-danger);border-color:rgba(194,74,87,.35)}
.btn-outline-danger:hover{background:var(--state-danger-bg);color:var(--state-danger)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-light:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-link{background:none;border:none;color:var(--text-link);padding:0}
.btn-link:hover{background:none;color:var(--text-link-hover);text-decoration:underline}
.btn:disabled,.btn.disabled{opacity:.45;pointer-events:none}
.btn-close{width:20px;height:20px;background:none;border:none;cursor:pointer;opacity:.5;position:relative}
.btn-close::before{content:"×";font-size:1.25rem;line-height:1;color:inherit}

/* ── 폼 ─────────────────────────────────────────────────────────── */
.form-label{display:block;margin-bottom:6px;font:500 .875rem/1.4 var(--font-sans);color:var(--text-muted)}
.form-control,.form-select{width:100%;padding:11px 14px;font:400 1rem/1.6 var(--font-sans);color:var(--text-title);
 background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);outline:none;
 transition:border-color .12s var(--ease-out),box-shadow .12s var(--ease-out)}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:var(--focus-ring)}
.form-control-sm,.form-select-sm{padding:7px 12px;font-size:.875rem}
.form-select{appearance:none;padding-right:36px;cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A99A85' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center}
.form-check{display:flex;align-items:center;gap:8px}
.form-check-input{accent-color:var(--brand)}
textarea.form-control{resize:vertical;min-height:88px}

/* ── 표 · 목록 ──────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;background:var(--surface-card);
 border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden}
.table th{padding:12px 14px;text-align:left;font:500 .8125rem/1.4 var(--font-sans);color:var(--text-muted);
 background:var(--paper-100);border-bottom:1px solid var(--border-hairline)}
.table td{padding:14px;font-size:.875rem;border-bottom:1px solid var(--border-hairline);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table-hover tbody tr:hover{background:var(--paper-50)}
.table-warning{background:var(--badge-notice-bg)}
.list-group{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}
.list-group-item{padding:14px 16px;background:var(--surface-card);border:1px solid var(--border-hairline);
 border-radius:var(--radius-md);color:var(--text-body);text-decoration:none}
.list-group-item-action:hover{background:var(--paper-50);color:var(--brand-text);text-decoration:none}
.list-group-flush .list-group-item{border-left:none;border-right:none;border-radius:0}
.list-unstyled{list-style:none;margin:0;padding:0}

/* ── 배지 · 알림 · 페이저 · 진도 ────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);
 font:500 .75rem/1.5 var(--font-sans);background:var(--surface-sunken);color:var(--text-muted);white-space:nowrap}
.badge.bg-primary{background:var(--brand);color:var(--text-on-brand)}
.badge.bg-dark{background:rgba(44,34,24,.72);color:#fff}
.badge.bg-success{background:var(--badge-free-bg);color:var(--badge-free-text)}
.badge.bg-light{background:transparent;border:1px solid var(--border-hairline);color:var(--text-muted)}
.badge.bg-secondary{background:var(--paper-200);color:var(--text-muted)}
.badge.bg-warning{background:var(--badge-notice-bg);color:var(--badge-notice-text)}
.badge-notice{display:inline-flex;padding:2px 8px;border-radius:var(--radius-pill);
 background:var(--badge-notice-bg);color:var(--badge-notice-text);font-size:.75rem;font-weight:500}
.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border:none;color:var(--text-body);
 border-radius:var(--radius-lg);font-size:.875rem;margin-bottom:12px}
/* style.css 의 .gg-alert 와 같은 구조 — 본문은 잉크, 상태색은 아이콘 */
.alert-success{background:var(--state-success-bg)}
.alert-warning{background:var(--state-warning-bg)}
.alert-danger{background:var(--state-danger-bg)}
.alert-info,.alert-primary{background:var(--state-info-bg)}
.alert-success > i:first-child{color:var(--state-success)}
.alert-warning > i:first-child{color:var(--state-warning)}
.alert-danger > i:first-child{color:var(--state-danger)}
.alert-info > i:first-child,.alert-primary > i:first-child{color:var(--state-info)}
.alert-secondary{background:var(--surface-sunken)}
.alert-light{background:var(--surface-card);border:1px solid var(--border-hairline)}
.alert-dismissible .btn-close{margin-left:auto}
.pagination{display:flex;gap:6px;justify-content:center;list-style:none;margin:0;padding:0}
.page-link{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;
 font:500 .875rem/1 var(--font-sans);color:var(--text-muted);background:transparent;
 border:1px solid var(--border-hairline);border-radius:var(--radius-pill);text-decoration:none}
.page-link:hover{background:var(--paper-100);color:var(--text-title);text-decoration:none}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}
.progress{height:6px;background:var(--paper-200);border-radius:var(--radius-pill);overflow:hidden}
.progress-bar{height:100%;background:var(--brand)}
.progress-bar.bg-primary{background:var(--brand)}
.img-thumbnail{padding:4px;background:var(--surface-card);border:1px solid var(--border-hairline);
 border-radius:var(--radius-md)}

/* ── 에디터 본문 (page_content / post_content) ──────────────────── */
.page-content,.post-content,.brunchbook-content{max-width:var(--prose-max);
 font-family:var(--font-serif);font-size:1.125rem;line-height:1.9;color:var(--text-body);text-wrap:pretty}
.page-content h2,.page-content h3,.post-content h2,.post-content h3{margin:1.6em 0 .6em}
.page-content img,.post-content img{border-radius:var(--radius-md);margin:1.5em 0}
.page-content ul,.post-content ul,.page-content ol,.post-content ol{padding-left:1.4em}

/* ── 모달 · 드롭다운 (Bootstrap JS 없이도 깨지지 않게) ──────────── */
.modal{display:none}
.modal.show{display:block;position:fixed;inset:0;z-index:1000;background:rgba(44,34,24,.55)}
.modal-dialog{max-width:420px;margin:10vh auto}
.modal-content{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.modal-header,.modal-footer{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-header{border-bottom:1px solid var(--border-hairline)}
.modal-footer{border-top:1px solid var(--border-hairline);justify-content:flex-end}
.modal-body{padding:16px}
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface-card);
 border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
 padding:8px;list-style:none;margin:0;display:none;z-index:30}
.dropdown-menu.show{display:block}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);
 font-size:.875rem;color:var(--text-body);text-decoration:none}
.dropdown-item:hover{background:var(--paper-50);color:var(--brand-text);text-decoration:none}
.dropdown-header{padding:6px 10px;font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.dropdown-divider{height:1px;background:var(--border-hairline);margin:6px 4px;border:none}
.collapse:not(.show){display:none}

@media (max-width:900px){
 .col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{width:100%}
 .row-cols-sm-2 > *,.row-cols-sm-3 > *,.row-cols-lg-3 > *,.row-cols-sm-4 > *,.row-cols-lg-4 > *{width:50%}
 .d-none.d-md-block{display:none}
}