:root{
  --bg:#f7f8fb; --card:#ffffff; --text:#1a1d29; --muted:#6b7280;
  --primary:#4f6df5; --primary-dark:#3b54d1; --border:#e5e7eb; --accent:#eef1ff;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12141c; --card:#1b1e2a; --text:#eef0f5; --muted:#9aa1b4; --border:#2a2e3d; --accent:#20233a; }
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

header.site-header{ padding:22px 16px 10px; text-align:center; }
header.site-header h1{ font-size:20px; margin:0 0 6px; }
header.site-header h1 a{ color:var(--text); }
header.site-header p{ color:var(--muted); margin:0; font-size:13px; }

nav.main-nav{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  padding:10px 16px 4px; max-width:860px; margin:0 auto;
}
nav.main-nav a{
  flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:13px; white-space:nowrap;
}
nav.main-nav a.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
nav.main-nav a:hover{ text-decoration:none; border-color:var(--primary); }

.container{ max-width:720px; margin:0 auto; padding:16px; }
.wide{ max-width:860px; }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:22px; margin-bottom:16px;
}
.card h2{ font-size:18px; margin:0 0 4px; }
.card .desc{ color:var(--muted); font-size:13px; margin:0 0 18px; }

.row{ display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.field{ flex:1; min-width:120px; }
label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
input, select{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:15px;
}
input:focus, select:focus{ outline:2px solid var(--primary); outline-offset:1px; }
button{
  width:100%; padding:13px; border-radius:10px; border:none; background:var(--primary);
  color:#fff; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px;
}
button:hover{ background:var(--primary-dark); }

.result{
  margin-top:16px; padding:16px; border-radius:12px; background:var(--accent);
  font-size:15px; display:none;
}
.result.show{ display:block; }
.result .big{ font-size:26px; font-weight:700; color:var(--primary); }
.result .line{ margin:4px 0; }

.disclaimer{ font-size:12px; color:var(--muted); margin-top:10px; }

.ad-slot{
  max-width:720px; margin:0 auto 16px; padding:10px; text-align:center;
  color:var(--muted); font-size:12px; border:1px dashed var(--border); border-radius:12px;
}

/* 콘텐츠(사용법/설명/예시/FAQ) 영역 */
article.content h2{ font-size:17px; margin:26px 0 10px; }
article.content h3{ font-size:15px; margin:18px 0 8px; }
article.content p, article.content li{ font-size:14px; color:var(--text); }
article.content ol, article.content ul{ padding-left:20px; margin:8px 0; }
article.content .example{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin:10px 0; font-size:14px;
}
.faq-item{ border-bottom:1px solid var(--border); padding:12px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item .q{ font-weight:600; font-size:14px; margin-bottom:6px; }
.faq-item .a{ font-size:14px; color:var(--muted); margin:0; }

.related{
  display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0;
}
.related a{
  padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); font-size:13px;
}

.breadcrumb{ font-size:12px; color:var(--muted); max-width:720px; margin:0 auto; padding:4px 16px 0; }
.breadcrumb a{ color:var(--muted); }

.home-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0;
}
.home-grid a.tool-card{
  display:block; background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; color:var(--text);
}
.home-grid a.tool-card:hover{ border-color:var(--primary); text-decoration:none; }
.home-grid a.tool-card .t{ font-weight:700; font-size:15px; margin-bottom:4px; }
.home-grid a.tool-card .d{ font-size:12px; color:var(--muted); }

footer{ text-align:center; color:var(--muted); font-size:12px; padding:24px 16px 40px; }
footer a{ color:var(--muted); }

/* ============ 언어 선택 모달 (Language Picker Modal) ============ */
.lang-modal-overlay{
  position:fixed; inset:0; background:rgba(8,10,18,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:1000;
}
.lang-modal-overlay[hidden]{ display:none; }
.lang-modal{
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  width:100%; max-width:600px; max-height:85vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px 22px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  animation:langModalIn .18s ease-out;
  outline:none;
}
@keyframes langModalIn{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.lang-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px;
}
.lang-modal-title{ font-size:17px; font-weight:700; margin:0; color:var(--text); }
.lang-modal-close{
  width:32px; height:32px; min-width:32px; padding:0; margin:0;
  border-radius:10px; border:1px solid var(--border); background:var(--bg);
  color:var(--text); font-size:18px; line-height:1; cursor:pointer;
}
.lang-modal-close:hover{ border-color:var(--primary); background:var(--accent); }
.lang-modal .lang-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
@media (min-width:520px){
  .lang-modal .lang-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:760px){
  .lang-modal .lang-grid{ grid-template-columns:repeat(4,1fr); }
}
.lang-modal .lang-item{
  display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px;
}
.lang-modal .lang-item:hover{ border-color:var(--primary); background:var(--accent); text-decoration:none; }
.lang-modal .lang-item.current{ border-color:var(--primary); background:var(--accent); box-shadow:0 0 0 1px var(--primary) inset; }
.lang-modal .lang-item .flag{ font-size:17px; line-height:1; }
.lang-modal .lang-item .names{ display:flex; flex-direction:column; line-height:1.25; overflow:hidden; }
.lang-modal .lang-item .country{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lang-modal .lang-item .langname{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lang-modal-dontshow{
  display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); cursor:pointer;
}
.lang-modal-dontshow input{ width:16px; height:16px; margin:0; accent-color:var(--primary); cursor:pointer; }

.lang-fab{
  position:fixed; right:16px; bottom:16px; z-index:900;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:13px; font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,0.18); cursor:pointer; width:auto; margin:0;
  max-width:calc(100vw - 32px); overflow:hidden;
}
.lang-fab span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.lang-fab:hover{ border-color:var(--primary); }

@media (max-width:480px){
  .lang-modal{ padding:18px 16px 16px; border-radius:18px; }
  .lang-modal-title{ font-size:16px; }
}

/* ============ RTL(아랍어/페르시아어/우르두어) 지원 ============ */
html[dir="rtl"] body{ direction:rtl; }
html[dir="rtl"] .tabs, html[dir="rtl"] nav.main-nav, html[dir="rtl"] .related, html[dir="rtl"] .row{
  direction:rtl;
}
html[dir="rtl"] label{ text-align:right; }
html[dir="rtl"] .breadcrumb{ text-align:right; }
html[dir="rtl"] .lang-modal .lang-item{ flex-direction:row-reverse; text-align:right; }
html[dir="rtl"] .lang-modal-head{ flex-direction:row-reverse; }
html[dir="rtl"] .lang-modal-dontshow{ flex-direction:row-reverse; }
html[dir="rtl"] .lang-fab{ flex-direction:row-reverse; }
html[dir="rtl"] article.content ul, html[dir="rtl"] article.content ol{ padding-right:20px; padding-left:0; }