/* SyBlog 공용 UI 키트 (sy-*) : 신규 앱 전용. 기존 CSS 변수와 html.dark-mode 를 그대로 따라간다. */
.sy-app{--sy-r:16px;--sy-r-sm:10px;--sy-pri:var(--primary,#6c63ff);--sy-sec:var(--secondary,#48cfad);--sy-card:var(--card-bg,#fff);--sy-txt:var(--text-color,#2d3436);--sy-mut:var(--text-muted,#636e72);--sy-bd:var(--border-color,#eee);--sy-sh:0 10px 30px rgba(108,99,255,.10);--sy-grad:linear-gradient(135deg,#6c63ff 0%,#8b7bff 45%,#48cfad 100%);--sy-ok:#20c997;--sy-warn:#f59f00;--sy-bad:#f03e3e;color:var(--sy-txt)}
html.dark-mode .sy-app{--sy-sh:0 10px 30px rgba(0,0,0,.45)}
.sy-hero{position:relative;overflow:hidden;border-radius:calc(var(--sy-r) + 6px);padding:2.2rem 2rem;margin-bottom:1.5rem;color:#fff;background:var(--sy-grad);box-shadow:var(--sy-sh)}
.sy-hero:before,.sy-hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.sy-hero:before{width:260px;height:260px;right:-70px;top:-90px}.sy-hero:after{width:150px;height:150px;left:-40px;bottom:-70px}
.sy-hero h1,.sy-hero h2{font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;position:relative}
.sy-hero p{margin:0;opacity:.92;position:relative;max-width:46rem}
.sy-hero .sy-actions{position:relative;margin-top:1.1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.sy-card{background:var(--sy-card);border:1px solid var(--sy-bd);border-radius:var(--sy-r);box-shadow:var(--sy-sh);padding:1.25rem;transition:transform .18s ease,box-shadow .18s ease}
.sy-card.sy-hover:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(108,99,255,.18)}
.sy-card h3,.sy-card h4,.sy-card h5{font-weight:700}
.sy-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sy-grid.sy-g3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.sy-stat{display:flex;flex-direction:column;gap:.15rem}
.sy-stat .sy-num{font-size:1.9rem;font-weight:800;line-height:1.1;background:var(--sy-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sy-stat .sy-lbl{font-size:.8rem;color:var(--sy-mut);font-weight:600}
.sy-btn{display:inline-flex;align-items:center;gap:.4rem;border:0;border-radius:999px;padding:.55rem 1.1rem;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none!important;transition:transform .15s,box-shadow .15s,opacity .15s}
.sy-btn:hover{transform:translateY(-1px)}
.sy-btn-pri{background:var(--sy-grad);color:#fff!important;box-shadow:0 6px 16px rgba(108,99,255,.35)}
.sy-btn-ghost{background:rgba(255,255,255,.18);color:#fff!important;border:1px solid rgba(255,255,255,.45)}
.sy-btn-line{background:transparent;color:var(--sy-pri)!important;border:1.5px solid var(--sy-pri)}
.sy-btn-danger{background:var(--sy-bad);color:#fff!important}
.sy-btn-sm{padding:.3rem .75rem;font-size:.8rem}
.sy-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700;background:rgba(108,99,255,.12);color:var(--sy-pri)}
.sy-chip.ok{background:rgba(32,201,151,.15);color:var(--sy-ok)}.sy-chip.warn{background:rgba(245,159,0,.15);color:var(--sy-warn)}.sy-chip.bad{background:rgba(240,62,62,.14);color:var(--sy-bad)}
.sy-bar{height:10px;border-radius:999px;background:var(--sy-bd);overflow:hidden}.sy-bar>i{display:block;height:100%;border-radius:999px;background:var(--sy-grad);transition:width .6s ease}
.sy-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem;border-bottom:1px solid var(--sy-bd);padding-bottom:.6rem}
.sy-tabs a{padding:.45rem .95rem;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--sy-mut)!important;text-decoration:none!important}
.sy-tabs a.on,.sy-tabs a:hover{background:rgba(108,99,255,.12);color:var(--sy-pri)!important}
.sy-empty{text-align:center;padding:2.6rem 1rem;color:var(--sy-mut)}.sy-empty i{font-size:2.4rem;opacity:.35;display:block;margin-bottom:.6rem}
.sy-form label{font-weight:700;font-size:.85rem;margin-bottom:.25rem}
.sy-form input:not([type=checkbox]):not([type=radio]),.sy-form select,.sy-form textarea{width:100%;border:1.5px solid var(--sy-bd);border-radius:var(--sy-r-sm);padding:.55rem .8rem;background:var(--input-bg,#fff);color:var(--sy-txt)}
.sy-form input:focus,.sy-form select:focus,.sy-form textarea:focus{outline:0;border-color:var(--sy-pri);box-shadow:0 0 0 3px rgba(108,99,255,.18)}
.sy-table{width:100%;border-collapse:separate;border-spacing:0 .4rem}.sy-table th{font-size:.75rem;color:var(--sy-mut);text-transform:uppercase;letter-spacing:.04em;padding:.3rem .8rem;text-align:left}
.sy-table td{background:var(--sy-card);padding:.7rem .8rem;border-top:1px solid var(--sy-bd);border-bottom:1px solid var(--sy-bd)}.sy-table td:first-child{border-left:1px solid var(--sy-bd);border-radius:12px 0 0 12px}.sy-table td:last-child{border-right:1px solid var(--sy-bd);border-radius:0 12px 12px 0}
.sy-timeline{position:relative;padding-left:1.5rem}.sy-timeline:before{content:"";position:absolute;left:.45rem;top:.3rem;bottom:.3rem;width:2px;background:var(--sy-bd)}
.sy-timeline .sy-tl{position:relative;margin-bottom:1rem}.sy-timeline .sy-tl:before{content:"";position:absolute;left:-1.3rem;top:.35rem;width:11px;height:11px;border-radius:50%;background:var(--sy-grad);box-shadow:0 0 0 3px var(--sy-card)}
.sy-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--sy-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.sy-toast{position:fixed;right:1rem;bottom:1rem;z-index:2000;background:var(--sy-card);border:1px solid var(--sy-bd);border-left:4px solid var(--sy-pri);border-radius:12px;padding:.8rem 1.1rem;box-shadow:var(--sy-sh);animation:syin .25s ease}
@keyframes syin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:576px){.sy-hero{padding:1.5rem 1.2rem}.sy-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sy-app *{transition:none!important;animation:none!important}}

/* ===== 라이트 모드 가독성 + 입력란 공통 스타일 (신규 앱 12종 공용) ===== */
/* 1) 고스트 버튼: 히어로(보라 그라데이션) 안에서만 흰색, 밖(흰 카드/본문)에서는 보라색 윤곽선 버튼 */
.sy-app .sy-btn-ghost{background:rgba(108,99,255,.08);color:var(--sy-pri)!important;border:1px solid rgba(108,99,255,.45)}
.sy-app .sy-btn-ghost:hover{background:rgba(108,99,255,.16)}
.sy-app .sy-hero .sy-btn-ghost{background:rgba(255,255,255,.18);color:#fff!important;border:1px solid rgba(255,255,255,.55)}
.sy-app .sy-hero .sy-btn-ghost:hover{background:rgba(255,255,255,.3)}
html.dark-mode .sy-app .sy-btn-ghost{background:rgba(255,255,255,.1);color:#fff!important;border-color:rgba(255,255,255,.4)}
/* 링크형 버튼도 라이트 모드에서 밑줄/기본 파랑으로 보이지 않게 */
.sy-app a.sy-btn{text-decoration:none}

/* 2) 입력란: .sy-input 과 sy-app 안의 모든 폼 컨트롤을 같은 모양으로 */
.sy-app .sy-input,
.sy-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
.sy-app select,
.sy-app textarea{
  display:block;width:100%;max-width:100%;box-sizing:border-box;
  border:1.5px solid var(--sy-bd);border-radius:var(--sy-r-sm);
  padding:.55rem .8rem;margin:.2rem 0 .7rem;font:inherit;line-height:1.4;
  background:var(--input-bg,#fff);color:var(--sy-txt);
}
.sy-app textarea{min-height:5.5rem;resize:vertical}
.sy-app .sy-input:focus,.sy-app input:focus,.sy-app select:focus,.sy-app textarea:focus{
  outline:0;border-color:var(--sy-pri);box-shadow:0 0 0 3px rgba(108,99,255,.18);
}
.sy-app ::placeholder{color:var(--sy-mut);opacity:.75}
.sy-app input[type=file]{display:block;width:100%;margin:.2rem 0 .7rem}
.sy-app input[type=checkbox],.sy-app input[type=radio]{margin-right:.35rem;vertical-align:middle}
/* 한 줄 검색창처럼 가로로 놓고 싶을 때는 .sy-inline 을 붙인다 */
.sy-app .sy-inline,.sy-app form.sy-inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.sy-app .sy-inline .sy-input,.sy-app .sy-inline input,.sy-app .sy-inline select{width:auto;flex:1 1 12rem;margin:0}

/* 3) 라벨은 항상 입력란 위에 한 줄로 */
.sy-app label{display:block;font-weight:700;font-size:.85rem;margin:.4rem 0 .1rem;color:var(--sy-txt)}
.sy-app label input[type=checkbox],.sy-app label input[type=radio]{display:inline-block;width:auto;margin:0 .35rem 0 0}
.sy-app label.sy-check{display:flex;align-items:center;font-weight:500}
.sy-app .sy-inline label{display:inline-block;margin:0}

/* 4) 라이트 모드 미세 보정: 글자 대비 4.5 이상, 입력란 테두리가 흰 카드에서 보이도록 */
.sy-app{--sy-field-bd:#c9cde0;--sy-ghost-txt:#4b43d6}
html.dark-mode .sy-app{--sy-field-bd:#3d3d6b;--sy-ghost-txt:#fff}
.sy-app .sy-btn-ghost{color:var(--sy-ghost-txt)!important}
.sy-app .sy-hero .sy-btn-ghost{color:#fff!important}
.sy-app .sy-btn-line{color:var(--sy-ghost-txt)!important;border-color:var(--sy-ghost-txt)}
.sy-app .sy-input,
.sy-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
.sy-app select,
.sy-app textarea{border-color:var(--sy-field-bd)}