/* =====================================================================
   ltool.net  2026 redesign  (모던 / 반응형 / 다크모드 자동)
   - 기존 origin.css 의 클래스 구조를 그대로 사용하므로 PHP 기능 코드는 변경 없음
   - db.css / table_charts.css / color_charts.css 는 이 파일 뒤에 로드되어 개별 페이지를 보정
   ===================================================================== */

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f1f4fa;
  --text:#1a2030;
  --muted:#5d667a;
  --line:#e2e7f0;
  --line-strong:#aab3c7;
  --cta:#2f5bea;
  --cta-hover:#2144b8;
  --brand:#2f5bea;
  --brand-600:#2549c9;
  --brand-050:#eef2ff;
  --accent:#0ea5a4;
  --danger:#d93a3a;
  --ok:#168a5b;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,30,60,.06),0 8px 24px rgba(20,30,60,.06);
  --shadow-sm:0 1px 2px rgba(20,30,60,.08);
  --ring:0 0 0 3px rgba(47,91,234,.25);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans KR","Noto Sans JP","Noto Sans SC","Noto Sans TC","Malgun Gothic","Apple SD Gothic Neo","Hiragino Sans","Yu Gothic","Microsoft YaHei","PingFang SC",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0e1220;
    --surface:#161b2d;
    --surface-2:#1d2339;
    --text:#e8ebf5;
    --muted:#a0a9bf;
    --line:#2a3250;
    --line-strong:#56628a;
    --brand:#8aa6ff;
    --brand-600:#a9bdff;
    --brand-050:#1f2a52;
    --accent:#3cc9c8;
    --danger:#ff7a7a;
    --ok:#4cd6a0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(138,166,255,.35);
    --cta:#2f5bea;
    --cta-hover:#2144b8;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
    --bg:#0e1220;
    --surface:#161b2d;
    --surface-2:#1d2339;
    --text:#e8ebf5;
    --muted:#a0a9bf;
    --line:#2a3250;
    --line-strong:#56628a;
    --brand:#8aa6ff;
    --brand-600:#a9bdff;
    --brand-050:#1f2a52;
    --accent:#3cc9c8;
    --danger:#ff7a7a;
    --ok:#4cd6a0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(138,166,255,.35);
    --cta:#2f5bea;
    --cta-hover:#2144b8;
}
:root[data-theme="light"]{color-scheme:light}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;padding:0;width:100%;
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.65;
  text-align:left;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
div{max-height:99999999px}
img{border:0;max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none;cursor:pointer}
a:hover{color:var(--brand-600)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.u{text-decoration:underline}
.hidden{display:none}
.smart{display:none}
.cb{clear:both;height:1px;line-height:1px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:12px;color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* ---------- layout ---------- */
#toolwrap{width:100%;max-width:1240px;margin:0 auto;padding:12px 20px 0}
.tool_contents{
  display:grid;grid-template-columns:288px minmax(0,1fr);gap:24px;align-items:start;
  margin:20px 0 0;padding:0;position:relative;overflow:visible;height:auto;
}
.main{min-width:0;margin:0;padding:0;float:none;width:auto;overflow:visible;position:relative;text-align:left}
.main>div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px 32px;min-width:0;
}
#ltool .mobilepadding{padding:0}
#ltool .home_menu_title{display:block}

/* ---------- header / logo / language ---------- */
.site-header{
  position:sticky;top:10px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px 14px;
}
.logo{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  background:none;margin:0;padding:0;text-align:left;width:auto;
}
.logo .title{padding:0;font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.logo .title::before{
  content:"";display:inline-block;width:.7em;height:.7em;margin-right:.45em;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--accent));vertical-align:baseline;
}
.logo .subtitle{padding:0;font-size:.8rem;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.logo a,a.logo-link{color:inherit;text-decoration:none}
a.logo-link{display:block;min-width:0}
a.logo-link:hover .title{color:var(--brand)}

.select_language{position:relative;flex:none;margin:0;padding:0;border:0;background:none;display:block;width:auto;text-align:left}
.select_language button{font:inherit;cursor:pointer}
.select_language #language_list_open,.select_language #language_list_close{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:600;
}
.select_language #language_list_open:hover,.select_language #language_list_close:hover{border-color:var(--brand);color:var(--brand)}
.select_language #language_list_close{display:none}
#language_list{
  display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;
  width:min(780px,92vw);max-height:min(70vh,560px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;
}
#language_list.open,#language_list[style*="block"]{display:grid}
.select_language #language_list a{display:block;color:var(--text);border-radius:8px;border:0;width:auto}
.select_language #language_list a div{display:block;padding:7px 10px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select_language #language_list a:hover{background:var(--brand-050);color:var(--brand)}
.select_language #language_list a.selected div{background:var(--brand);color:#fff;border-radius:8px;font-weight:700}
#language_contents{padding:0;margin:0}

/* ---------- side menu ---------- */
.ltool_menu{
  position:sticky;top:84px;align-self:start;
  max-height:calc(100vh - 100px);overflow:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:8px;margin:0;float:none;width:auto;display:block;text-align:left;
  scrollbar-width:thin;
}
.ltool_menu a{display:block;width:100%;border:0}
.ltool_menu .ltool_main_menu{
  background:none;color:var(--text);margin:6px 0 0;border-radius:8px;display:block;border:0;
}
.ltool_menu .ltool_main_menu div{
  color:var(--muted);text-align:left;padding:8px 10px;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border:0;display:flex;align-items:center;justify-content:space-between;
}
.ltool_menu .ltool_main_menu div::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;opacity:.6}
.ltool_menu .ltool_main_menu:hover div{color:var(--brand)}
.ltool_menu div a div{
  text-align:left;padding:7px 10px;font-size:.9rem;line-height:1.4;font-weight:500;
  border:0;border-radius:8px;color:var(--text);transition:background-color .15s,color .15s;
}
.ltool_menu div a:hover div{background:var(--brand-050);color:var(--brand)}
.ltool_menu div a.selected div,.ltool_menu .selected{background:var(--brand-050);color:var(--brand);font-weight:700}
.ltool_menu .smart,.ltool_menu div.smart{display:none}
.ltool_menu .ltoolpc{display:block}
.ltoolsmartmenu{display:none;background:var(--brand);color:#fff;font-weight:700;padding:0;border-radius:10px;margin:0}
.ltoolsmartmenu div{padding:12px 14px;color:#fff}
.ltoolsmartmenu:hover{background:var(--brand-600);color:#fff}
.ltoolsmartmenu span{margin-right:10px;font-family:Arial,sans-serif;letter-spacing:-.3em}
.top_ad{float:none;position:static;width:100%;margin:14px 0 6px;text-align:center}
.leftaddfp{width:100%;text-align:center}

/* ---------- ads (레이아웃 흔들림 방지) ---------- */
#ltool .ad{margin:20px auto;width:100%;max-width:100%;padding:0;height:auto;text-align:center;display:block;overflow:hidden}
.ad970,.ad336,.ad300{max-width:100%;margin:auto;text-align:center}
.ad970{width:970px;height:90px}.ad336{width:336px;height:280px}.ad300{width:300px;height:250px}
ins.adsbygoogle{max-width:100%}
.ad_left_top{width:300px;height:250px;max-width:100%}

/* ---------- typography in content ---------- */
#ltool h1{
  font-size:clamp(1.45rem,2.3vw + .8rem,2.1rem);line-height:1.25;font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px;padding:0;background:none;border:0;display:block;width:100%;
}
#ltool .tophelp,#ltool .formhelp{margin:0 0 20px;display:block;text-align:left}
#ltool .tophelp h2,#ltool .main_box .main_right h2,#ltool .main_box h2{
  font-size:1.02rem;line-height:1.6;font-weight:400;color:var(--muted);margin:0;padding:0;width:auto;display:block;text-align:left;word-break:normal;
}
#ltool h2{margin:8px 0;display:block}
#ltool .explain,.explain{text-align:left;padding:0;color:var(--muted)}
#ltool ul{margin:10px 0;padding-left:1.3em;font-weight:400}
#ltool li{word-break:break-word}
#ltool .keyword{color:var(--danger);font-weight:700}
#ltool .resultdescription{padding:0;margin-top:8px;color:var(--muted)}

/* ---------- forms ---------- */
#ltool form{margin:0;padding:0}
#ltool .smallform{
  display:block;width:100%;margin:0 0 18px;padding:20px;text-align:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
#ltool .smallform div{text-align:center}
#ltool .smallform .center>center>div,#ltool .smallform .center>div{margin-bottom:6px}
#ltool input,#ltool textarea,#ltool select,#ltool button{font-family:inherit;color:var(--text)}
#ltool input[type=text],#ltool input[type=number],#ltool input[type=search],#ltool input[type=email],#ltool input[type=url],#ltool input[type=password],#ltool input[type=date],#ltool input[type=time],#ltool input:not([type]),#ltool textarea,#ltool select{
  font-size:1rem;line-height:1.4;padding:10px 12px;margin:4px 3px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  max-width:100%;outline:0;transition:border-color .15s,box-shadow .15s;vertical-align:middle;
}
#ltool input[type=text]{text-align:left}
#ltool input[type=number]{text-align:right}
#ltool select{padding:9px 10px;height:auto;display:inline-block}
#ltool textarea{display:block;width:100%;min-height:150px;height:150px;margin:6px 0;background:var(--surface);resize:vertical;line-height:1.55}
#ltool input:focus,#ltool textarea:focus,#ltool select:focus{border-color:var(--brand);box-shadow:var(--ring)}
#ltool input::placeholder,#ltool textarea::placeholder{color:var(--muted);opacity:.75}
textarea:invalid,select:invalid,input:invalid{box-shadow:none}
input[type=checkbox],input[type=radio]{width:1.1em;height:1.1em;margin:0 6px;vertical-align:middle;accent-color:var(--brand);border:0}
#ltool .select{margin-left:0;margin-right:0}
#ltool .center .label{width:35%;float:left;text-align:right;padding:11px 0}
#ltool .center .form{width:65%;float:left;text-align:left}
#ltool .center .form input[type=number]{width:160px}
#ltool .center,#ltool .center div{text-align:center}

#ltool .btn,#ltool input[type=submit],#ltool input[type=button],#ltool input[type=reset],#ltool button.btn,.btn,input[type=submit],input[type=button]{
  display:inline-block;margin:6px 4px;padding:11px 26px;font-size:1rem;font-weight:700;line-height:1.3;
  color:#fff;background:var(--brand);border:0;border-radius:var(--radius-sm);cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background-color .15s,transform .05s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;text-align:center;width:auto;
}
#ltool .btn:hover,#ltool input[type=submit]:hover,#ltool input[type=button]:hover,#ltool input[type=reset]:hover,.btn:hover,input[type=submit]:hover,input[type=button]:hover{background:var(--brand-600);color:#fff;border:0}
#ltool .btn:active,#ltool input[type=submit]:active,#ltool input[type=button]:active{transform:translateY(1px)}
#ltool input[type=reset]{background:var(--muted)}
#ltool .btn_outline{width:100%;display:block;padding:0}
#ltool .btn_outline div,#ltool .btn_outline a{color:#fff}
#ltool .mainbtn{display:inline-block;margin:10px auto 0;text-align:center;padding:10px 18px;background:var(--surface-2);color:var(--text);border-radius:var(--radius-sm)}
#ltool .mainbtn:hover{background:var(--brand);color:#fff}
#ltool .left{float:left;width:auto;text-align:left}
#ltool .right{float:right;width:auto;text-align:right}
#ltool .halfleft{float:left;width:49%}
#ltool .halfright{float:right;width:49%}
#ltool .halfright textarea{margin:0;height:9.2em}
#ltool .halflayout{width:100%;padding:10px 0;margin:0;display:block}
#contents{margin-bottom:10px}
#ltool .ltool_listing{width:100%;display:block}

/* ---------- result ---------- */
#ltool #result{
  display:block;width:100%;margin:6px 0 18px;line-height:1.6;word-break:break-word;overflow-wrap:anywhere;
  background:var(--brand-050);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);
}
#ltool .resultcenter{padding:26px 22px}
#ltool .resultleft{padding:20px;min-height:160px}
#ltool .bigfont .finalresult{font-size:1.5rem;line-height:1.45;font-weight:700}
#ltool .bigfont .finalresult div{margin:2px 0}
#ltool #result .simpleresult{font-size:1.2rem;margin:10px auto;border:0;width:auto}
#ltool #result .simpleresult td,#ltool #result .simpleresult tr{border:0;background:transparent}
#ltool #result .simpleresult span{color:var(--muted);font-size:.7em}
#ltool #result .simpleresult .title{text-align:right;color:var(--muted)}
#ltool #result .simpleresult .title div{text-align:right;background:none;color:var(--muted)}
#ltool #result .simpleresult .result{text-align:left;white-space:nowrap}
#ltool .noresult{width:100%;text-align:center;padding:56px 16px;font-size:1.1rem;color:var(--muted);background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius)}
.toolong{display:block;color:var(--danger);font-weight:700;margin:0 auto 10px;text-align:center}

/* ---------- tables ---------- */
#ltool table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0;display:table;font-size:.95rem}
#ltool tr{border:0}
#ltool th,#ltool td{border:0;border-bottom:1px solid var(--line);padding:10px 12px;text-align:center;vertical-align:middle;background:transparent}
#ltool th,#ltool th div{background:var(--surface-2);color:var(--text);font-weight:700}
#ltool thead th:first-child{border-top-left-radius:10px}
#ltool thead th:last-child{border-top-right-radius:10px}
#ltool td div,#ltool th div{text-align:center}
#ltool tbody tr:hover td{background:var(--brand-050)}
#ltool .number td{text-align:right}
#result table,#result th,#result td{border-color:var(--line)}
#ltool .black th{background:var(--text);color:var(--surface);text-align:left}
#ltool .ltool_option tr,#ltool .ltool_option td,#ltool .ltool_option th{border:0}
.anniversary tr,.anniversary th,.anniversary td{background:transparent;font-weight:400}
.anniversary th{background:var(--surface-2);white-space:nowrap;font-weight:700}
#ltool .cndic{margin:20px auto 0;padding:0;width:100%;border:0;display:none}
#ltool .cndic tr{background:transparent}
#ltool .cndicleft{text-align:center;width:40px;font-size:1.8em;height:40px;background:var(--surface-2)}
#ltool .cndic span{color:#fff;background:var(--brand);width:20px;display:inline-table;text-align:center;font-size:.8em;border-radius:4px}
#ltool #result .cndic div{text-align:left}
th{word-break:keep-all}
.no{width:10%;text-align:center}
.table2{display:table;width:100%}
.tr2{display:table-row}
.td2{display:table-cell;padding:.7em;width:50%;vertical-align:middle;border-bottom:1px solid var(--line);word-break:break-all}
.id2{background:var(--surface-2)}
.id2,.value2{font-size:1.05em}
.value2{text-align:center}
.day{color:#f49500}
.night{color:var(--brand)}

/* ---------- 탭/순서 버튼/페이지 ---------- */
#ltool .idxbtn{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:8px 0 16px}
#ltool .idxbtn a{float:none;width:auto;display:flex;flex:1 1 140px;text-align:center;height:auto}
#ltool .idxbtn a>div,#ltool .idxbtn a>span{flex:1;display:flex;width:100%}
#ltool .idxbtn2 a{flex:1 1 45%}
#ltool .w10 a{flex:0 0 auto;min-width:44px}
#ltool .idxbtn div{padding:0;text-align:center}
#ltool .idxbtn a span{display:flex;align-items:center;justify-content:center;flex:1;width:100%;padding:10px 12px;background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:600;transition:background-color .15s,color .15s,border-color .15s}
#ltool .idxbtn a span:hover{background:var(--brand-050);border-color:var(--brand);color:var(--brand)}
#ltool .idxbtn .selected span{background:var(--brand);border-color:var(--brand);color:#fff}
#ltool .ord{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;margin:4px 0 10px;padding:0;color:var(--muted);font-size:.9rem}
#ltool .ord .btn{margin:0;padding:6px 12px;font-size:.82rem;font-weight:600;background:var(--surface-2);color:var(--text);border:1px solid var(--line);box-shadow:none;border-radius:999px}
#ltool .ord .btn:hover{background:var(--brand-050);color:var(--brand);border-color:var(--brand)}
#ltool .ord .selected,#ltool .ord .btn.selected{background:var(--brand);color:#fff;border-color:var(--brand)}
#ltool .pages{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0 20px;width:100%}
#ltool .pages a{margin:0;padding:7px 14px;display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text)}
#ltool .pages a:hover{border-color:var(--brand);color:var(--brand)}
#ltool .pages .selected{background:var(--brand);color:#fff;border-color:var(--brand)}
#ltool .pages .black{background:var(--surface-2);color:var(--text)}

/* ---------- home / 툴 카드 ---------- */
#ltool .mainlistout{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:0 auto;padding:0;
}
#ltool .mainlistout .home_menu_title{
  grid-column:1/-1;margin:22px 0 0;display:block;width:auto;padding:0 0 8px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;
  border-bottom:2px solid var(--line);color:var(--text);
}
#ltool .mainlistout .home_menu_title:first-child{margin-top:4px}
#ltool .mainlistout>.ad,#ltool .mainlistout>div:not(.home_menu_title){grid-column:1/-1}
#ltool .mainlist{
  display:block;margin:0;padding:16px 18px;width:auto;line-height:1.55;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
#ltool .mainlist:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
#ltool .mainlist h3,#ltool .mainlist h2{display:block;margin:0 0 6px;padding:0;font-size:1.05rem;font-weight:700;line-height:1.4;color:var(--brand);text-align:left;width:auto}
#ltool .mainlist .ltool_title{margin:0 0 6px;width:auto;font-size:1.05rem;font-weight:700;line-height:1.4;color:var(--brand)}
#ltool .mainlist:hover .ltool_title{text-decoration:none;font-weight:700}
#ltool .mainlist div ul{list-style:none;padding-left:0;margin:0;color:var(--muted);font-size:.9rem}
#ltool .mainlist li{margin:2px 0}

/* 관련 도구 카드 (.boxout > a > .box) */
.boxout{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:26px 0 20px;width:100%}
.boxout a{display:block;color:inherit}
.box{
  float:none;display:block;position:relative;overflow:hidden;
  width:auto;height:100%;margin:0;padding:16px 18px;line-height:1.5;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.box:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);background:var(--surface)}
.box span{display:block;text-align:left;font-size:1rem;line-height:1.4}
.box .image,.box:hover .image{display:block;color:var(--brand);font-weight:700;margin-bottom:6px}
.box .exp,.box:hover .exp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:.86rem;line-height:1.5;padding:0;font-weight:400}
.box .exp div{margin:0 0 3px}
.box .screen,.box:hover .screen{display:none}
.box .arrow{font-size:1em;margin:0;text-align:left;display:inline}
.box31,.box21,.box30,.box20,.box32{margin:0}

.tag{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8rem;color:var(--muted);margin:18px 0 6px}
.tag span,.tagt{float:none;background:var(--surface-2);color:var(--muted);padding:3px 10px;margin:0;border-radius:999px;border:1px solid var(--line)}
.tagt{background:var(--text);color:var(--surface);border-color:var(--text);font-weight:700}

#ltool .main_box{margin:22px 0 4px;height:auto;overflow:visible;width:100%}
#ltool .main_box .main_left{margin:0 0 16px;text-align:center;width:100%;float:none}
#ltool .main_box .main_right{text-align:left;float:none;width:100%;overflow:visible}
#ltool .main_box .main_right h2,#ltool .tophelp,#ltool .formhelp{text-align:left;display:block}
#ltool #sourcemain{height:84px;min-height:84px;font-size:.85rem;color:var(--muted);background:var(--surface-2)}

/* ---------- 기타 컴포넌트 ---------- */
.flag{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.flag a{display:block;padding:12px 8px;text-align:center;width:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.flag a:hover{border-color:var(--brand)}
.flag div{text-align:center;display:block;height:auto;margin-top:6px;font-size:.88rem}
.flag img{width:70%;max-width:90px}
.selected_flag{width:100%;text-align:center;margin:1em 0;border-bottom:1px solid var(--line);padding:2em 0}
.selected_flag div{font-size:2em;padding:1em}
.selected_flag img{width:80%;max-width:360px}
#ltool .university{border-bottom:1px solid var(--line);padding:6px 0}
#ltool .university:hover{background:var(--surface-2)}
#ltool .university .otherlng{padding:7px 4px;float:right;width:50px;text-align:center;background:var(--surface-2);color:var(--text);margin-right:4px;border-radius:6px}
#ltool .university .otherlng span{display:none}
#ltool .university a .otherlng:hover{background:var(--brand);color:#fff}
#ltool .university .orignlng{display:table;padding:7px}
#ltool .idx{font-weight:700;font-size:1.15em;border-bottom:1px solid var(--line);margin-top:12px}
#ltool .idx div{padding:5px;background:var(--brand);width:34px;text-align:center;color:#fff;border-radius:6px 6px 0 0}
.ascii{font-size:1em;display:table}
#ltool img{display:inline-block;border:0;padding:0;margin:0;vertical-align:middle}
#ltool .allfreeimages{border-radius:var(--radius-sm)}
.tool_contents .center{text-align:center}

/* ---------- footer ---------- */
.copyright,.site-footer{
  width:100%;margin:28px 0 0;padding:26px 16px 36px;text-align:center;color:var(--muted);background:none;
  border-top:1px solid var(--line);font-size:.88rem;line-height:1.8;
}
.copyright a,.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.copyright a:hover,.site-footer a:hover{color:var(--brand)}
.site-footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:6px 0}
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow);cursor:pointer;font-size:1.1rem;
  display:none;align-items:center;justify-content:center;
}
.to-top.show{display:flex}
.to-top:hover{color:var(--brand);border-color:var(--brand)}

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
  .tool_contents{grid-template-columns:250px minmax(0,1fr);gap:18px}
  .main>div{padding:24px}
}
@media (max-width:900px){
  #toolwrap{padding:10px 14px 0}
  .tool_contents{display:block;margin-top:14px}
  .ltool_menu{position:static;max-height:none;overflow:visible;margin:0 0 14px}
  .ltool_menu .ltoolsmartmenu{display:block}
  .ltool_menu .ltoolpc{display:none}
  .ltool_menu #ltoolmenu{margin-top:8px}
  .ltool_menu #ltoolmenu:not(.ltoolpc){display:block;max-height:60vh;overflow:auto}
  .top_ad{margin:10px 0 0}
  .leftaddfp{display:none}
  .main>div{padding:20px 18px}
  .logo .subtitle{max-width:52vw}
  #ltool .halfleft,#ltool .halfright{width:100%;float:none;clear:both;margin:0 0 12px}
  #ltool .center .label,#ltool .center .form{width:100%;float:none;text-align:center;padding:4px 0}
  #ltool .onlypcmain{display:none}
  #ltool #result .simpleresult{font-size:1.1rem}
  #ltool #result .simpleresult .title{text-align:left;font-size:.78rem;float:left;border:0;padding:0;margin:0;width:100%}
  #ltool #result .simpleresult .title div{text-align:left;padding:4px 8px;background:var(--surface-2);border-radius:8px}
  #ltool #result .simpleresult .title span{display:none}
  #ltool #result .simpleresult .result{padding:5px;margin:0 0 8px;float:left;border:0}
}
@media (max-width:600px){
  html{scroll-padding-top:72px}
  .site-header{top:6px;padding:8px 10px}
  .logo .title{font-size:1.15rem}
  .logo .subtitle{display:none}
  #language_list{position:fixed;left:10px;right:10px;top:68px;width:auto;max-height:70vh}
  .main>div{padding:16px 14px;border-radius:12px}
  #ltool .smallform{padding:14px 10px}
  #ltool .bigfont .finalresult{font-size:1.25rem}
  #ltool .mainlistout,.boxout{grid-template-columns:1fr}
  #ltool textarea{height:180px}
  #ltool .btn,#ltool input[type=submit],#ltool input[type=button]{padding:12px 22px}
  #ltool .idxbtn a{flex:1 1 45%}
  #ltool .ord{justify-content:flex-start}
  #ltool table{font-size:.88rem}
  #ltool th,#ltool td{padding:8px 6px}
}
@media print{
  .site-header,.ltool_menu,.ad,.to-top,.site-footer,.copyright,ins.adsbygoogle{display:none!important}
  .tool_contents{display:block}.main>div{box-shadow:none;border:0;padding:0}
}

/* ---------- 개별 페이지 보정 (컬러피커 등 좁은 입력칸) ---------- */
#ltool .noborder input[type=text],#ltool .noborder input[type=number]{padding:5px 6px;margin:0;border-radius:6px}
#ltool .noborder td{background:transparent}
/* 데모용 표(CSS 표 템플릿 미리보기)는 항상 밝은 종이 위에 놓인 것처럼 표시 */
#ltool table[class^="table"]{color:#1a2030;background:#fff}
#ltool table[class^="table"] tr:hover td{background:inherit}

/* =====================================================================
   v2 개선 (체크/라디오 확대, 메뉴, 다크/라이트 토글, 언어별 폰트, 폼 정렬)
   ===================================================================== */

/* ---------- 언어별 폰트 (OS 기본 내장 폰트 중 가독성 좋은 순서) ---------- */
body{font-family:var(--font)}
html:lang(ko){--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Nanum Gothic",sans-serif}
html:lang(ja){--font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Segoe UI",sans-serif}
html:lang(zh-CN),html:lang(zh-Hans){--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB","Segoe UI",sans-serif}
html:lang(zh-TW),html:lang(zh-Hant){--font:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC","Source Han Sans TC","Segoe UI",sans-serif}
html:lang(th){--font:"Segoe UI","Leelawadee UI","Thonburi","Sukhumvit Set","Noto Sans Thai",Tahoma,sans-serif}
html:lang(km){--font:"Segoe UI","Khmer UI","Leelawadee UI","Khmer Sangam MN","Noto Sans Khmer",sans-serif}
html:lang(ar),html:lang(fa),html:lang(ur),html:lang(ug){--font:"Segoe UI","Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif}
html:lang(he){--font:"Segoe UI","Arial Hebrew","Noto Sans Hebrew",Arial,sans-serif}
html:lang(hi),html:lang(mr),html:lang(ne){--font:"Segoe UI","Nirmala UI","Kohinoor Devanagari","Devanagari Sangam MN","Noto Sans Devanagari",Mangal,sans-serif}
html:lang(bn),html:lang(as){--font:"Segoe UI","Nirmala UI","Kohinoor Bangla","Bangla Sangam MN","Noto Sans Bengali",Vrinda,sans-serif}
html:lang(ta){--font:"Segoe UI","Nirmala UI","Tamil Sangam MN","Noto Sans Tamil",Latha,sans-serif}
html:lang(te){--font:"Segoe UI","Nirmala UI","Kohinoor Telugu","Telugu Sangam MN","Noto Sans Telugu",Gautami,sans-serif}
html:lang(kn){--font:"Segoe UI","Nirmala UI","Kannada Sangam MN","Noto Sans Kannada",Tunga,sans-serif}
html:lang(ml){--font:"Segoe UI","Nirmala UI","Malayalam Sangam MN","Noto Sans Malayalam",Kartika,sans-serif}
html:lang(gu){--font:"Segoe UI","Nirmala UI","Gujarati Sangam MN","Noto Sans Gujarati",Shruti,sans-serif}
html:lang(pa){--font:"Segoe UI","Nirmala UI","Gurmukhi Sangam MN","Noto Sans Gurmukhi",Raavi,sans-serif}
html:lang(or){--font:"Segoe UI","Nirmala UI","Oriya Sangam MN","Noto Sans Oriya",sans-serif}
html:lang(si){--font:"Segoe UI","Nirmala UI","Sinhala Sangam MN","Noto Sans Sinhala",sans-serif}
html:lang(am),html:lang(ti){--font:"Segoe UI","Nyala","Kefa","Noto Sans Ethiopic",sans-serif}
html:lang(ka){--font:"Segoe UI","Sylfaen","Noto Sans Georgian",sans-serif}
html:lang(hy){--font:"Segoe UI","Sylfaen","Noto Sans Armenian",sans-serif}
html:lang(el),html:lang(ru),html:lang(uk),html:lang(bg),html:lang(be),html:lang(kk),html:lang(ky),html:lang(mk),html:lang(mn),html:lang(sr),html:lang(tt){--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}

/* ---------- 입력 테두리 진하게 + 같은 줄 정렬 ---------- */
#ltool input[type=text],#ltool input[type=number],#ltool input[type=search],#ltool input[type=email],#ltool input[type=url],#ltool input[type=password],#ltool input[type=date],#ltool input[type=time],#ltool input:not([type]),#ltool textarea,#ltool select{
  border:1.5px solid var(--line-strong);
}
#ltool input[type=text],#ltool input[type=number],#ltool input[type=search],#ltool input[type=email],#ltool input[type=url],#ltool input[type=password],#ltool input[type=date],#ltool input[type=time],#ltool input:not([type]),#ltool select,#ltool input[type=submit],#ltool input[type=button],#ltool input[type=reset],#ltool button.btn{
  height:46px;margin:4px 3px;vertical-align:middle;box-sizing:border-box;
}
#ltool input[type=submit],#ltool input[type=button],#ltool input[type=reset],#ltool button.btn{padding-top:0;padding-bottom:0;line-height:1.2}
#ltool a.btn,#ltool .btn{vertical-align:middle}
#ltool input[type=submit]:hover,#ltool .btn:hover,#ltool input[type=button]:hover{background:var(--cta-hover)}
#ltool input[type=submit],#ltool input[type=button],#ltool .btn{background:var(--cta);color:#fff}
#ltool .noborder input[type=text],#ltool .noborder input[type=number]{height:auto}

/* ---------- 체크박스 / 라디오 1.5배 ---------- */
input[type=checkbox],input[type=radio],#ltool input[type=checkbox],#ltool input[type=radio]{
  width:1.65em;height:1.65em;min-width:1.65em;margin:0 8px;vertical-align:middle;cursor:pointer;accent-color:var(--brand);
}
#ltool .ltool_option td{font-size:1.45rem;line-height:1.5;padding:8px 10px;vertical-align:top;text-align:center}
#ltool .ltool_option td div{text-align:center}
@media (max-width:600px){#ltool .ltool_option td{font-size:1.25rem;padding:6px}}

/* ---------- 왼쪽 메뉴 ---------- */
.side-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ltool_menu{position:relative;top:auto;max-height:calc(100vh - 110px);overflow:auto;padding:10px}
.ltool_menu .ltool_main_menu{
  margin:8px 0 4px;background:var(--surface-2);border-radius:12px;transition:background-color .15s;
}
.ltool_menu .ltool_main_menu:first-of-type,.ltool_menu .ltoolsmartmenu+.ltoolpc .ltool_main_menu:first-child{margin-top:0}
.ltool_menu .ltool_main_menu div{
  color:var(--text);font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;padding:10px 14px;
}
.ltool_menu .ltool_main_menu:hover{background:var(--brand-050)}
.ltool_menu .ltool_main_menu:hover div{color:var(--brand)}
.ltool_menu .ltool_main_menu.current{background:color-mix(in srgb,var(--brand) 22%,var(--surface-2));border-radius:12px}
.ltool_menu .ltool_main_menu.current div{color:var(--brand)}
.ltool_menu div a div{font-size:1rem;padding:9px 14px}
.ltool_menu div[id^=submenu]{padding:2px 0 6px}
.side-extra{display:flex;flex-direction:column;gap:14px}
.side-extra>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;margin:0;overflow:hidden}
.side-extra .top_ad{margin:0}
.side-extra .side-banner{padding:0}
.side-extra .side-banner img{display:block;width:100%}

/* ---------- CTA 버튼(펜팔 링크) ---------- */
#ltool .mainbtn{
  display:inline-block;margin:10px auto 0;padding:12px 22px;background:var(--cta);color:#fff;font-weight:700;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);text-align:center;transition:background-color .15s;
}
#ltool .mainbtn:hover{background:var(--cta-hover);color:#fff}

/* ---------- 헤더 도구(언어 + 테마) ---------- */
.header-tools{display:flex;align-items:center;gap:8px;flex:none}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  cursor:pointer;font-size:1.2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:inline}
}

/* ---------- 모바일 3선 버튼 ---------- */
.menu-fab{
  position:fixed;left:16px;bottom:16px;z-index:45;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cta);box-shadow:0 4px 14px rgba(0,0,0,.3);display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
}
.menu-fab span{display:block;width:22px;height:2.5px;border-radius:2px;background:#fff}
@media (max-width:900px){
  .menu-fab{display:flex}
  .side-col{display:block}
  .ltool_menu{max-height:none}
  .side-extra{margin-top:12px}
}
.side-col>.ltool_menu{align-self:stretch;width:100%}
.ltool_menu .ltool_main_menu div{gap:8px}

/* ---------- v3 조정 ---------- */
.ltool_menu div a div,.ltool_menu div a.selected div{font-weight:400}
.ltool_menu div a.selected,.ltool_menu div a.selected:hover{background:transparent}
.ltool_menu div a.selected div{background:var(--brand-050);color:var(--brand);border-radius:10px}
.ltool_menu div a div{border-radius:10px}
input[type=checkbox],input[type=radio],#ltool input[type=checkbox],#ltool input[type=radio]{width:1.15em;height:1.15em;min-width:1.15em;margin:0 6px}
#ltool .ltool_option td{font-size:1rem}
@media (max-width:600px){#ltool .ltool_option td{font-size:.9rem}}

/* ---------- v4 조정 ---------- */
#ltool input[type=text],#ltool input[type=search],#ltool input:not([type]){text-align:center}
input[type=checkbox],input[type=radio],#ltool input[type=checkbox],#ltool input[type=radio]{width:1.38em;height:1.38em;min-width:1.38em}
#ltool .ltool_option td{font-size:1.2rem}
@media (max-width:600px){#ltool .ltool_option td{font-size:1.08rem}}
/* 일본 이름 목록 인덱스 버튼: PC 20개 / 모바일 5개 */
#ltool .idxbtn.w10{display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
#ltool .idxbtn.w10 a{flex:none;min-width:0;width:auto}
#ltool .idxbtn.w10 a span{padding:9px 0;font-size:.9rem}
@media (max-width:600px){
  #ltool .idxbtn.w10{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  #ltool .idxbtn.w10 a span{padding:11px 0;font-size:1rem}
}

/* ---------- v5: 모바일 3선 버튼 / 메뉴 ---------- */
.menu-fab{opacity:0;pointer-events:none;transition:opacity .25s}
.menu-fab.show{opacity:.8;pointer-events:auto}
@media (max-width:900px){
  .ltool_menu #ltoolmenu:not(.ltoolpc){max-height:none;overflow:visible}
  .ltool_menu{overflow:visible;max-height:none}
}

/* ===== v6 ===== */
/* 국기 목록: 4열, 테두리 없음, 국가명 높이 일정 */
.flag{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.flag a{border:0;background:transparent;padding:8px 4px}
.flag a:hover{background:var(--surface-2)}
.flag div{height:3.2em;line-height:1.6;overflow:hidden;margin-top:6px}
.flag img{width:80%;max-width:90px}

/* 가로 스크롤 표 */
.unitable,#ltool div.number{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (max-width:900px){
  .unitable table,#ltool div.number table{width:auto;min-width:100%;white-space:nowrap}
  #ltool #result .simpleresult .title div{background:var(--line-strong,#cfd6e4);padding:2px 4px;font-weight:600}
  #ltool #result .simpleresult .result{padding:2px;margin:0 0 6px}

  /* 대출계산기 모바일 배치 */
  #ltool .loanform .center>center{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:10px}
  #ltool .loanform .center .label{width:auto;text-align:left;padding:0;font-weight:600}
  #ltool .loanform .center .form{width:auto;text-align:right;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:6px}
  #ltool .loanform .center .form input[type=number]{width:100%;max-width:200px;text-align:right}
  #ltool .loanform .center:nth-of-type(2)>center{display:block;text-align:center}
  #ltool .loanform .center:nth-of-type(2) .label{display:none}
  #ltool .loanform .center:nth-of-type(2) .form{justify-content:center}
  #ltool .loanform .resultdescription{font-size:.8rem;text-align:left;margin-top:8px}
}

/* 메뉴 애니메이션 */
.ltool_menu .ltool_main_menu,.ltool_menu div[id^=submenu] a{transition:background-color .2s,color .2s,transform .2s,padding-left .2s}
.ltool_menu div[id^=submenu] a:hover{transform:translateX(3px)}
.ltool_menu div[id^=submenu]:not(.smart){animation:ltSub .28s ease both;transform-origin:top}
.ltool_menu div[id^=submenu]:not(.smart) a{animation:ltItem .3s ease both}
.ltool_menu div[id^=submenu]:not(.smart) a:nth-child(2){animation-delay:.03s}
.ltool_menu div[id^=submenu]:not(.smart) a:nth-child(3){animation-delay:.06s}
.ltool_menu div[id^=submenu]:not(.smart) a:nth-child(4){animation-delay:.09s}
.ltool_menu div[id^=submenu]:not(.smart) a:nth-child(n+5){animation-delay:.12s}
@keyframes ltSub{from{opacity:0;transform:translateY(-6px) scaleY(.92)}to{opacity:1;transform:none}}
@keyframes ltItem{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  #ltoolmenu:not(.ltoolpc){animation:ltSub .3s ease both}
}
@media (max-width:900px){#ltool .loanform .center .form{white-space:nowrap}#ltool .loanform .center .form input[type=number]{min-width:0;flex:1 1 auto}}

/* ===== v7 ===== */
.flag{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px;align-items:stretch}
.flag a{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:6px 2px;height:100%}
.flag a img{width:100%;max-width:165px;height:72px;object-fit:contain;object-position:center bottom;margin:0 auto}
.flag a div{height:3.4em;margin-top:8px;line-height:1.5;width:100%;overflow:hidden}
@media (min-width:640px){.flag a img{height:110px}}

/* 대출계산기 폼: 라벨 우측정렬 / 입력칸 동일 / 단위 좌측정렬 */
#ltool .loanform .center>center{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:12px;row-gap:12px;max-width:460px;margin:0 auto}
#ltool .loanform .center .label{width:auto;float:none;text-align:right;padding:0;font-weight:600}
#ltool .loanform .center .form{width:auto;float:none;display:flex;align-items:center;justify-content:flex-start;gap:6px;text-align:left;padding:0;white-space:nowrap}
#ltool .loanform .center .form input[type=number]{flex:0 0 auto;width:130px;max-width:none;min-width:0;height:44px;box-sizing:border-box;text-align:right;margin:0}
#ltool .loanform .center:nth-of-type(2)>center{display:block;text-align:center}
#ltool .loanform .center:nth-of-type(2) .label{display:none}
#ltool .loanform .center:nth-of-type(2) .form{justify-content:center}
#ltool .loanform .center:nth-of-type(2) input[type=submit]{width:auto}
#ltool .loanform .resultdescription{font-size:.8rem;text-align:center;margin-top:10px}
@media (max-width:380px){#ltool .loanform .center .form input[type=number]{width:110px}}

.ltool_menu div[id^=submenu]:not(.smart){animation:ltSub .38s cubic-bezier(.2,.8,.2,1) both}
.ltool_menu div[id^=submenu]:not(.smart) a{animation:ltItem .4s cubic-bezier(.2,.8,.2,1) both}
#ltool .loanform .center>center{grid-template-columns:auto auto;justify-content:center;column-gap:14px}
@media (max-width:900px){#ltool .loanform .center .form input[type=number]{width:120px}}
/* 페이지 네비게이션 hover: 숫자 밝게 */
#ltool .pages a{transition:background-color .2s,color .2s,border-color .2s}
#ltool .pages a:hover{background:#4c76f2;border-color:#4c76f2;color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #ltool .pages a:hover{background:#3d56a8;border-color:#8aa6ff;color:#fff}}
:root[data-theme=dark] #ltool .pages a:hover{background:#3d56a8;border-color:#8aa6ff;color:#fff}
/* 언어 선택 목록: 각 언어 옅은 회색 라운드 배경 상시 표시 */
.select_language #language_list a div{background:#eef0f4;border-radius:8px}
.select_language #language_list a:hover div{background:var(--brand-050);color:var(--brand)}
.select_language #language_list a.selected div{background:var(--brand);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .select_language #language_list a div{background:#262c3b}}
:root[data-theme=dark] .select_language #language_list a div{background:#262c3b}
.select_language #language_list{gap:6px}