/* ════════════════════════════════════════════════════════════════
 * /_shared/theme.css  — 수린이 통합 디자인 토큰
 *
 * 사용:
 *   - portal_bar.php 가 자동으로 <link> 주입 (모든 통합 모듈)
 *   - 직접 사용: <link rel="stylesheet" href="/_shared/theme.css">
 *
 * 원칙:
 *   1) 토큰은 `--sh-*` 네임스페이스 (모듈 기존 변수와 충돌 방지)
 *   2) 컴포넌트는 `.sh-*` 클래스 (옵트인 — 적용하고 싶을 때만 사용)
 *   3) 강제 오버라이드 없음 — 모듈별 디자인 자유 유지
 * ════════════════════════════════════════════════════════════════ */

:root {
    /* ─── 컬러 팔레트 ─── */
    --sh-primary       : #1a73e8;
    --sh-primary-dark  : #0d5cbf;
    --sh-primary-soft  : rgba(26,115,232,0.15);
    --sh-accent        : #f59f00;
    --sh-danger        : #e53935;
    --sh-success       : #34a853;
    --sh-warn          : #f59f00;
    --sh-info          : #1a73e8;

    /* ─── 배경/표면 (다크 우선) ─── */
    --sh-bg            : #0f1217;
    --sh-bg-2          : #16191f;
    --sh-surface       : #1a1f2a;
    --sh-surface-2     : #252b38;
    --sh-surface-3     : #2d3441;

    /* ─── 텍스트 ─── */
    --sh-text          : #f5f7fa;
    --sh-text-sub      : #a8b1c2;
    --sh-text-mute     : #6b7585;
    --sh-text-inv      : #0f1217;

    /* ─── 보더 ─── */
    --sh-border        : #2a3142;
    --sh-border-strong : #3a4255;

    /* ─── 형태 ─── */
    --sh-radius-xs     : 4px;
    --sh-radius-sm     : 6px;
    --sh-radius        : 10px;
    --sh-radius-lg     : 14px;
    --sh-radius-pill   : 999px;

    /* ─── 그림자 ─── */
    --sh-shadow-sm     : 0 2px 6px rgba(0,0,0,0.20);
    --sh-shadow        : 0 4px 12px rgba(0,0,0,0.25);
    --sh-shadow-md     : 0 6px 18px rgba(0,0,0,0.35);
    --sh-shadow-lg     : 0 10px 30px rgba(0,0,0,0.45);

    /* ─── 간격 ─── */
    --sh-gap-xs        : 4px;
    --sh-gap-sm        : 8px;
    --sh-gap           : 12px;
    --sh-gap-md        : 16px;
    --sh-gap-lg        : 24px;
    --sh-gap-xl        : 32px;

    /* ─── 폰트 ─── */
    --sh-font          : -apple-system, BlinkMacSystemFont, "Segoe UI",
                         "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
                         "Noto Sans KR", sans-serif;
    --sh-font-mono     : "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

    /* ─── 트랜지션 ─── */
    --sh-tr-fast       : 0.12s ease;
    --sh-tr            : 0.2s ease;
    --sh-tr-slow       : 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ─── 라이트 테마 대응 (모듈에서 data-theme="light" 사용 시) ─── */
:root[data-theme="light"],
[data-theme="light"]:root {
    --sh-bg            : #f7f8fb;
    --sh-bg-2          : #ffffff;
    --sh-surface       : #ffffff;
    --sh-surface-2     : #f0f3f8;
    --sh-surface-3     : #e3e8f0;
    --sh-text          : #1a2030;
    --sh-text-sub      : #5b6680;
    --sh-text-mute     : #9aa3b5;
    --sh-text-inv      : #ffffff;
    --sh-border        : #dde4f0;
    --sh-border-strong : #c2cbdb;
    --sh-shadow-sm     : 0 2px 6px rgba(0,0,0,0.06);
    --sh-shadow        : 0 4px 12px rgba(0,0,0,0.08);
    --sh-shadow-md     : 0 6px 18px rgba(0,0,0,0.10);
    --sh-shadow-lg     : 0 10px 30px rgba(0,0,0,0.14);
}

/* ══════════════════════════════════════════════════════════════
 *  옵트인 컴포넌트 (.sh-* 클래스)
 *  필요한 곳에 클래스로 적용 — 모듈 기존 스타일 안 건드림
 * ══════════════════════════════════════════════════════════════ */

/* ─── 버튼 ─── */
.sh-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 18px;
    background:var(--sh-primary); color:#fff;
    border:1px solid transparent; border-radius:var(--sh-radius-sm);
    font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-0.01em;
    cursor:pointer;
    transition:background var(--sh-tr-fast), transform .08s ease, box-shadow var(--sh-tr-fast);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.sh-btn:hover    { background:var(--sh-primary-dark); }
.sh-btn:active   { transform:scale(0.97); }
.sh-btn:disabled { opacity:0.5; cursor:not-allowed; }

.sh-btn-ghost {
    background:transparent; color:var(--sh-text);
    border-color:var(--sh-border);
}
.sh-btn-ghost:hover { background:var(--sh-surface-2); border-color:var(--sh-border-strong); }

.sh-btn-danger  { background:var(--sh-danger); }
.sh-btn-danger:hover  { background:#b3221d; }
.sh-btn-success { background:var(--sh-success); }
.sh-btn-success:hover { background:#1e7c3f; }
.sh-btn-warn    { background:var(--sh-warn); }
.sh-btn-warn:hover    { background:#cf8500; }

.sh-btn-sm { padding:6px 12px; font-size:12.5px; }
.sh-btn-lg { padding:12px 22px; font-size:15px; }

/* ─── 카드/패널 ─── */
.sh-card{
    background:var(--sh-surface);
    border:1px solid var(--sh-border);
    border-radius:var(--sh-radius);
    padding:var(--sh-gap-md);
    box-shadow:var(--sh-shadow-sm);
}
.sh-card-flat   { box-shadow:none; }
.sh-card-raised { box-shadow:var(--sh-shadow); }

/* ─── 입력 ─── */
.sh-input,
.sh-textarea,
.sh-select{
    width:100%;
    background:var(--sh-surface-2); color:var(--sh-text);
    border:1px solid var(--sh-border); border-radius:var(--sh-radius-sm);
    padding:9px 12px;
    font-family:inherit; font-size:14px;
    transition:border-color var(--sh-tr-fast), box-shadow var(--sh-tr-fast);
}
.sh-input:focus,
.sh-textarea:focus,
.sh-select:focus{
    outline:none;
    border-color:var(--sh-primary);
    box-shadow:0 0 0 3px var(--sh-primary-soft);
}

/* ─── 뱃지/태그 ─── */
.sh-badge{
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px;
    background:var(--sh-surface-2); color:var(--sh-text-sub);
    border:1px solid var(--sh-border); border-radius:var(--sh-radius-pill);
    font-size:11.5px; font-weight:600; letter-spacing:-0.01em;
    line-height:1.5;
}
.sh-badge-primary { background:var(--sh-primary-soft); color:#90c2ff; border-color:rgba(26,115,232,0.4); }
.sh-badge-danger  { background:rgba(229,57,53,0.15); color:#ff9c9c; border-color:rgba(229,57,53,0.45); }
.sh-badge-success { background:rgba(52,168,83,0.15); color:#9adfa9; border-color:rgba(52,168,83,0.45); }
.sh-badge-warn    { background:rgba(245,159,0,0.15); color:#ffd180; border-color:rgba(245,159,0,0.45); }

/* ─── 알림/토스트 ─── */
.sh-alert{
    padding:10px 14px;
    background:var(--sh-surface-2); color:var(--sh-text);
    border:1px solid var(--sh-border); border-left:3px solid var(--sh-primary);
    border-radius:var(--sh-radius-sm);
    font-size:13.5px;
}
.sh-alert-danger  { border-left-color:var(--sh-danger);  background:rgba(229,57,53,0.08); }
.sh-alert-success { border-left-color:var(--sh-success); background:rgba(52,168,83,0.08); }
.sh-alert-warn    { border-left-color:var(--sh-warn);    background:rgba(245,159,0,0.08); }

/* ─── 구분선 ─── */
.sh-divider {
    height:1px; background:var(--sh-border);
    margin:var(--sh-gap-md) 0; border:0;
}

/* ─── 유틸 ─── */
.sh-mut  { color:var(--sh-text-sub); }
.sh-mono { font-family:var(--sh-font-mono); }
.sh-truncate {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sh-elevation-1 { box-shadow:var(--sh-shadow-sm); }
.sh-elevation-2 { box-shadow:var(--sh-shadow); }
.sh-elevation-3 { box-shadow:var(--sh-shadow-md); }

/* ─── 통합 베이스 — :where() 사용해 모듈 CSS 가 항상 이김 ─── */
:where(html, body) {
    font-family: var(--sh-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* 텍스트 선택 영역 */
::selection { background: var(--sh-primary-soft); color: var(--sh-text); }

/* 스크롤바 (Webkit/Blink) */
:where(*)::-webkit-scrollbar { width: 10px; height: 10px; }
:where(*)::-webkit-scrollbar-track { background: transparent; }
:where(*)::-webkit-scrollbar-thumb {
    background: var(--sh-border);
    border-radius: 5px;
}
:where(*)::-webkit-scrollbar-thumb:hover { background: var(--sh-border-strong); }

/* 모션 감소 환경 — 트랜지션/애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* ─── 접근성 ─── */
.sh-sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
*:focus-visible { outline:2px solid var(--sh-primary); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════
 *  공통 알림 / 다이얼로그 / 로딩 컴포넌트  (window.sh API 가 사용)
 * ══════════════════════════════════════════════════════════════ */

/* ─── Toast ─── */
.sh-toast-host{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0) + 16px);
    left:50%; transform:translateX(-50%);
    z-index:99500;
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
    max-width:min(92vw, 420px);
}
.sh-toast{
    pointer-events:auto;
    padding:11px 16px;
    background:var(--sh-surface);
    color:var(--sh-text);
    border:1px solid var(--sh-border);
    border-left:3px solid var(--sh-primary);
    border-radius:var(--sh-radius-sm);
    box-shadow:var(--sh-shadow-md);
    font-size:13.5px; font-weight:500;
    line-height:1.45; letter-spacing:-0.01em;
    display:flex; align-items:center; gap:10px;
    transform:translateY(-12px); opacity:0;
    transition:transform .22s ease, opacity .18s ease;
    will-change:transform, opacity;
}
.sh-toast.show{ transform:translateY(0); opacity:1; }
.sh-toast.leave{ transform:translateY(-8px); opacity:0; }
.sh-toast .sh-toast-ico{ font-size:16px; line-height:1; flex-shrink:0; }
.sh-toast .sh-toast-body{ flex:1; min-width:0; word-break:break-word; }
.sh-toast.sh-toast-ok      { border-left-color:var(--sh-success); }
.sh-toast.sh-toast-err     { border-left-color:var(--sh-danger); }
.sh-toast.sh-toast-warn    { border-left-color:var(--sh-warn); }
.sh-toast.sh-toast-info    { border-left-color:var(--sh-info); }

/* ─── Modal ─── */
.sh-modal-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,0); pointer-events:none;
    z-index:99400;
    transition:background .22s ease;
    -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
}
.sh-modal-backdrop.open{
    background:rgba(0,0,0,0.55);
    pointer-events:auto;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.sh-modal{
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%, -46%) scale(0.96);
    width:min(92vw, 440px);
    max-height:84vh; max-height:84dvh;
    background:var(--sh-surface);
    color:var(--sh-text);
    border:1px solid var(--sh-border);
    border-radius:var(--sh-radius);
    box-shadow:var(--sh-shadow-lg);
    opacity:0; pointer-events:none;
    z-index:99401;
    display:flex; flex-direction:column;
    transition:opacity .18s ease, transform .2s ease;
}
.sh-modal.open{
    opacity:1; pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
}
.sh-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 10px;
    border-bottom:1px solid var(--sh-border);
    flex-shrink:0;
}
.sh-modal-title{
    font-size:15px; font-weight:700; letter-spacing:-0.02em;
    margin:0;
}
.sh-modal-close{
    width:30px; height:30px;
    background:transparent; border:0; border-radius:6px;
    color:var(--sh-text-sub); font-size:16px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-family:inherit;
}
.sh-modal-close:hover{ background:var(--sh-surface-2); color:var(--sh-text); }
.sh-modal-body{
    padding:14px 16px;
    overflow-y:auto;
    font-size:14px; line-height:1.55; color:var(--sh-text);
    flex:1;
}
.sh-modal-foot{
    display:flex; gap:8px; justify-content:flex-end;
    padding:12px 16px 14px;
    border-top:1px solid var(--sh-border);
    flex-shrink:0;
}
.sh-modal-foot .sh-btn{ min-width:80px; padding:8px 16px; font-size:13.5px; }

/* ─── Global loading overlay ─── */
.sh-loading{
    position:fixed; inset:0;
    background:rgba(15,18,23,0.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    z-index:99600;
    display:none; align-items:center; justify-content:center;
    pointer-events:none;
}
.sh-loading.open{ display:flex; pointer-events:auto; }
.sh-loading .sh-spinner{
    width:44px; height:44px;
    border:3px solid rgba(255,255,255,0.15);
    border-top-color:var(--sh-module-color, var(--sh-primary));
    border-radius:50%;
    animation:sh-spin 0.8s linear infinite;
}
@keyframes sh-spin{ to { transform:rotate(360deg); } }

/* 인라인 스피너 — sh.spinner() 또는 .sh-spinner-inline 클래스 사용 */
.sh-spinner-inline{
    display:inline-block;
    width:1em; height:1em;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:sh-spin 0.7s linear infinite;
    vertical-align:-0.15em;
}

/* ══════════════════════════════════════════════════════════════
 *  레이아웃 안전망 — portal bar / stripe / 컨트라스트 보호
 * ══════════════════════════════════════════════════════════════ */

/* portal_bar (top-right 36x36) 회피 — 우상단에 자기 UI 가 있는 모듈은 이 클래스 부착 */
.sh-pb-safe-right { padding-right: calc(56px + env(safe-area-inset-right, 0)) !important; }

/* 상단 stripe (3px) 회피 — sticky/fixed top:0 요소는 stripe 가 위에 떠있음을 인지 */
.sh-stripe-safe { padding-top: 3px !important; }

/* 텍스트 컨트라스트 강제 (라이트/다크 토글 시 일부 모듈에서 깨질 때 응급용) */
[data-theme="light"] .sh-force-contrast,
[data-theme="light"] .sh-force-contrast * { color: var(--sh-text) !important; }
[data-theme="light"] .sh-force-contrast { background: var(--sh-bg) !important; }

/* z-index 규약 — 모듈 내 컴포넌트는 다음 범위 안에서 사용 권장
 *   0-9       : 일반 콘텐츠
 *   10-99     : 모듈 헤더 / 푸터
 *   100-499   : 모듈 드롭다운 / 팝오버
 *   500-999   : 모듈 모달 / 다이얼로그
 *   1000-9999 : 모듈 전역 오버레이
 *   99000+    : 공통 portal/theme/identity 영역 — 모듈 사용 금지
 *     99000-99099 : portal bar
 *     99400-99499 : sh-modal
 *     99500-99599 : sh-toast
 *     99600-99699 : sh-loading
 */

/* 이미지/미디어 안전 */
:where(img, video, svg, canvas) { max-width: 100%; height: auto; }

/* 링크 기본 색상 (모듈 미지정 시) */
:where(a:not([class])) { color: var(--sh-primary); text-decoration: underline; text-underline-offset: 2px; }
:where(a:not([class])):hover { color: var(--sh-primary-dark); }

/* 코드 블록 */
:where(code, pre, kbd, samp) { font-family: var(--sh-font-mono); font-size: 0.92em; }
:where(code, kbd) { padding: 0.1em 0.4em; background: var(--sh-surface-2); border-radius: var(--sh-radius-xs); }
:where(pre) { padding: 12px; background: var(--sh-surface-2); border: 1px solid var(--sh-border); border-radius: var(--sh-radius-sm); overflow-x: auto; }

/* color-scheme — 폼/스크롤바 색이 시스템과 일치하도록 */
[data-theme="light"] :where(body) { color-scheme: light; }
:where(body) { color-scheme: dark; }

/* 일반 input/textarea/select 기본값 — 모듈 미지정 시 토큰 사용 (:where() 로 모듈 CSS 우선) */
:where(input[type="text"], input[type="email"], input[type="password"],
       input[type="number"], input[type="search"], input[type="tel"],
       input[type="url"], input[type="date"], input[type="time"],
       input[type="datetime-local"], textarea, select) {
    color: inherit;
    background-color: var(--sh-surface-2);
}
:where(::placeholder) { color: var(--sh-text-mute); opacity: 1; }