/* 기본 커스텀 스타일: PicoCSS 위에 얹기 */
:root{
  --brand: #2563eb;
  --bg-elev: color-mix(in oklab, var(--pico-background-color), black 6%);
}

html, body { height: 100%; }
body { background: var(--pico-background-color); }

.tabs, .subtabs { display:flex; gap:.5rem; margin-bottom: .75rem; }
.tabs.seg, .subtabs.seg{ background: var(--bg-elev); padding:.25rem; border-radius: .8rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25); }
.tab-button { border: 0; background: transparent; padding:.5rem .9rem; border-radius: .6rem; transition: all .15s ease; }
.tab-button[aria-selected="true"]{ background: var(--brand); color:white; box-shadow: 0 2px 8px color-mix(in oklab, var(--brand), black 40%); }
.tab-button[aria-selected="false"]{ color: #111; }
[data-theme="dark"] .tab-button[aria-selected="false"]{ color: #d1d5db; }
.tab-button.small{ padding:.35rem .7rem; font-size:.95rem; }

.grid{ display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 720px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

.card-list .item{ cursor:pointer; border:1px solid var(--pico-muted-border-color); padding:.9rem; border-radius:.9rem; background: var(--bg-elev); }
.card-list .item header{ display:flex; align-items:baseline; gap:.75rem; }
.card-list .item .code{ font-weight:700; min-width:116px; color: var(--brand); }
.card-list .item .title{ font-weight:600; }
.card-list .item:hover{ border-color: var(--brand); box-shadow: 0 4px 20px rgba(0,0,0,.35); transform: translateY(-1px); }

.modal-card header{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.modal-card .content{ max-height:min(68vh, 600px); overflow:auto; }
.prewrap{ white-space:pre-wrap; }

dialog::backdrop{ backdrop-filter: blur(2px); }
dialog{ border: none; border-radius: 12px; padding: 0; }
.modal-card{ padding: 1rem 1.25rem; }

/* iOS PWA safe-area */
:root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
body { padding-bottom: var(--safe-bottom); }