/* ============================================================
   jakmyeong-app - LOCAL COPY of the sajubot portal theme
   ------------------------------------------------------------
   origin        : C:/sajuai/sajubot-web/static/theme.css
   origin-url    : https://sajubot.com/static/theme.css
   origin-sha256 : 5d6653bc2ce1bda966e1791ab74af70c6ed8922bd81abca160200a387ff6b001
   body-sha256   : 5d6653bc2ce1bda966e1791ab74af70c6ed8922bd81abca160200a387ff6b001
   copied-at     : 2026-09-20

   WHY A LOCAL COPY (not the remote <link>):
     the portal gate (sajubot-web/app.py:31-48) exempts only /login,
     /favicon.ico and /healthz. /static is NOT exempt, so an
     unauthenticated browser fetching the remote CSS gets 302 -> /login
     (content-type text/html) and refuses to apply it as a stylesheet.

   DO NOT EDIT THIS FILE.
     jakmyeong-app styles belong in static/app.css.
     tools/predeploy_check.py re-hashes the body below and compares it
     with the portal file; any drift is reported.
   ============================================================ */
/* ---8<--- theme body below : byte-identical to origin ---8<--- */
/* sajubot theme.css — 허브와 22개 앱이 함께 쓰는 공통 스타일
   사용: <link rel="stylesheet" href="https://sajubot.com/static/theme.css">
   원칙: 색은 회색조 + 강조색 하나. 카드는 그림자·테두리 없이 면(面)으로 구분. 모바일 우선. */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;900&display=swap');

:root{
  --bg:#ffffff;
  --ink:#161616;
  --muted:#6f6f73;
  --surface:#f4f4f6;
  --surface-2:#eaeaee;
  --line:#e6e6ea;
  --accent:#2457d6;            /* 허브에서는 오늘의 오행 색으로 덮어씀 */
  --danger:#c7392b;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
         'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --serif:'Noto Serif KR',serif;
  --r:16px;
  --wrap:560px;
}

/* ── 기본 (body.sb 안에서만 작동 — 기존 앱 스타일과 충돌 방지) ── */
body.sb{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
        font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
        word-break:keep-all}
body.sb *,body.sb *::before,body.sb *::after{box-sizing:border-box}
body.sb a{color:inherit;text-decoration:none}
body.sb :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
body.sb h1,body.sb h2,body.sb h3{margin:0;font-weight:700;letter-spacing:-.01em}
body.sb p{margin:0}

.sb-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:960px){.sb-wrap{max-width:1040px;padding:0 32px}}

/* ── 앱 상단 바: 허브로 돌아가는 링크 + 앱 이름 ── */
.sb-top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
        -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sb-top .sb-wrap{display:flex;align-items:center;gap:12px;height:52px}
.sb-top .back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
              border-radius:50%;background:var(--surface);font-size:18px;line-height:1}
.sb-top .name{font-weight:600;font-size:16px;letter-spacing:-.01em}
.sb-top .name small{font-family:var(--serif);font-weight:600;color:var(--muted);margin-left:6px;font-size:12px}

/* ── 버튼 ── */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
        min-height:48px;padding:0 22px;border-radius:12px;border:0;
        background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:600;
        cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .12s}
.sb-btn:hover{opacity:.88}
.sb-btn:active{opacity:.76}
.sb-btn:disabled{opacity:.4;cursor:default}
.sb-btn.accent{background:var(--accent)}
.sb-btn.soft{background:var(--surface);color:var(--ink)}
.sb-btn.soft:hover{background:var(--surface-2);opacity:1}
.sb-btn.block{width:100%}
.sb-btn.sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}

/* ── 카드 ── */
.sb-card{background:var(--surface);border-radius:var(--r);padding:18px}
.sb-card+.sb-card{margin-top:10px}
.sb-card h3{font-size:16px;margin-bottom:8px}
.sb-card.accent{background:var(--accent);color:#fff}

/* ── 입력 ── */
.sb-field{display:block;margin-bottom:14px}
.sb-field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.sb-input,.sb-select,.sb-textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;
        border:1.5px solid transparent;background:var(--surface);color:var(--ink);
        font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.sb-textarea{min-height:120px;resize:vertical}
.sb-input:focus,.sb-select:focus,.sb-textarea:focus{outline:0;border-color:var(--accent);background:#fff}
.sb-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f6f73' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
           background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.sb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── 결과 표시 ── */
.sb-result{background:var(--surface);border-radius:var(--r);padding:18px;line-height:1.75}
.sb-result h3{font-size:15px;color:var(--muted);font-weight:500;margin-bottom:6px}
.sb-result .big{font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.sb-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.sb-kv dt{color:var(--muted)}
.sb-kv dd{margin:0}

/* ── 표 (간지·명식) ── */
.sb-table{width:100%;border-collapse:collapse;font-size:14px}
.sb-table th,.sb-table td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line)}
.sb-table th{font-weight:500;color:var(--muted);font-size:12px}
.sb-table .hj{font-family:var(--serif);font-size:20px;font-weight:600}

/* ── 보조 ── */
.sb-muted{color:var(--muted)}
.sb-note{font-size:12.5px;color:var(--muted);line-height:1.6}
.sb-chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
         background:var(--accent);color:#fff}
.sb-chip.soft{background:var(--surface-2);color:var(--ink)}
.sb-loading{display:inline-block;width:18px;height:18px;border:2px solid var(--line);
            border-top-color:var(--ink);border-radius:50%;animation:sb-spin .8s linear infinite}
@keyframes sb-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sb-loading{animation:none}}

/* ── 오행 색 (앱에서 span.sb-oh[data-oh="목"] 처럼 사용) ── */
.sb-oh[data-oh="목"]{color:#1f7a4d}
.sb-oh[data-oh="화"]{color:#c7392b}
.sb-oh[data-oh="토"]{color:#b4771f}
.sb-oh[data-oh="금"]{color:#5f6673}
.sb-oh[data-oh="수"]{color:#2457d6}