:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#0b5fff;
  --primary-600:#0a4ddb;
  --border:#e5e7eb;
  --card:#f8fafc;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.fytime{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, Arial, sans-serif;
}

/* containers */
.container{max-width:1000px;margin:0 auto;padding:24px}

/* header */
.site-header{border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.branding .site-title{font-weight:700; font-size:20px; text-decoration:none; color:var(--text)}
.site-description{margin:.25rem 0 0; font-size:12px; color:var(--muted)}
.primary-nav .menu{list-style:none; margin:0; padding:0; display:flex; gap:14px; flex-wrap:wrap}
.primary-nav .menu a{display:inline-block; padding:8px 10px; text-decoration:none; color:var(--text); border-radius:10px}
.primary-nav .menu a:hover{background:#f3f4f6}

/* footer */
.site-footer{border-top:1px solid var(--border); background:#fff; margin-top:48px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; font-size:14px; color:var(--muted)}

/* hero */
.hero{padding:24px; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); text-align:center; margin:16px 0 24px}
.hero h1{margin:0 0 8px; font-size:28px}
.hero p{margin:0; color:var(--muted)}

/* grid of tools */
.section-title{font-size:18px; margin:0 0 12px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px}
.tool-card{border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:inherit; background:#fff; box-shadow:var(--shadow)}
.tool-card-inner{padding:16px}
.tool-card h3{margin:0 0 6px; font-size:16px}
.tool-card p{margin:0; color:var(--muted); font-size:14px}
.tool-card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08)}

/* page / card */
.page-head{margin:0 0 16px}
.page-head .muted{color:var(--muted); margin:6px 0 0}
.card{border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:16px; box-shadow:var(--shadow)}

/* forms */
.form-grid{display:grid; grid-template-columns:1fr; gap:12px}
.form-inline{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end}
label{font-weight:600; font-size:14px}
.hint, .help{display:block; color:var(--muted); font-size:12px; margin-top:4px}
input[type="text"], input[type="number"]{
  width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; font-size:16px; background:#fff;
}
input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(11,95,255,.08)}

.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:700}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600)}
.btn-kakao{background:#fee500; color:#3c1e1e; border-color:#fee500}
.btn-kakao .icon{display:inline-block}

/* center helper */
.center{display:flex; justify-content:center; margin-top:16px}

/* results / errors */
.result{font-size:18px; text-align:center; font-weight:700}
.error{color:#d61e1e; text-align:center}

/* tables */
.table-card h3{margin:0 0 8px}
.table-container{width:100%; overflow:auto}
table{width:100%; border-collapse:collapse; table-layout:fixed}
th,td{border:1px solid var(--border); padding:10px; text-align:center; font-size:14px; vertical-align:middle}
th{background:#f8fafc; font-weight:700}
@media (max-width:768px){
  th,td{font-size:12px; padding:8px}
}

/* modal */
.popup{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(800px,90%); height:70vh; background:#fff; border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; z-index:1000}
.popup-content{display:flex; flex-direction:column; height:100%}
.popup-header{position:sticky; top:0; background:#fff; padding:12px 14px; font-size:18px; font-weight:700; display:flex; justify-content:center; align-items:center; border-bottom:1px solid var(--border); z-index:10}
.close-btn{position:absolute; right:12px; top:8px; font-size:24px; background:none; border:none; cursor:pointer}
.popup-body{flex:1; overflow:auto; padding:12px}

/* post/page */
.post-card, .page{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px}
.post-title, .page-title{margin:0 0 12px}

/* utility */
.muted{color:var(--muted)}