/* ═══ 韓服前輩工具箱 공용 테마 오버레이 v1 ═══
   각 페이지 인라인 스타일 위에 덮어써서 광택만 입힘 (레이아웃 불변) */

/* 서체: Noto Sans TC (모비라이프 Pretendard 등가) */
body,button,input,textarea,select,dialog{font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif !important}

/* 배경: 은은한 오렌지·블루 글로우 */
body{
  background:
    radial-gradient(1100px 520px at 85% -120px, rgba(240,163,94,.09), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(97,124,201,.08), transparent 55%),
    #0d1016 !important;
}

/* 페이지 진입 애니메이션 */
.wrap{animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 상단바: 유리감 + 브랜드 글로우 */
.topnav{background:rgba(10,13,19,.88) !important;box-shadow:0 1px 0 rgba(240,163,94,.08)}
.nbrand{text-shadow:0 0 18px rgba(240,163,94,.35)}
.nlinks a.on{color:#ffd9a8 !important;text-shadow:0 0 12px rgba(240,163,94,.4)}

/* 카드류: 입체 그라데이션 + 호버 리프트 */
.sec,.card,.tool,.job,.dir,.qa,.box,.patch,.baseline,.prereg,.why,.news .item,.sched,.honest,.tldr,.keybox,.chip2{
  background:linear-gradient(180deg,#1d2331,#161b26) !important;
  border-color:#333d54 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.tool,.news .item{transition:border-color .18s,box-shadow .18s,transform .12s}
.tool:hover,.news a.item:hover{
  border-color:var(--accent) !important;
  box-shadow:0 8px 26px rgba(240,163,94,.14);
  transform:translateY(-2px);
}
.tool:active{transform:scale(.98)}

/* 색 있는 특수 박스는 톤 유지하되 깊이만 */
.keybox,.tldr{background:linear-gradient(180deg,rgba(94,201,138,.10),rgba(94,201,138,.04)) !important;border-color:rgba(94,201,138,.4) !important}
.honest{background:linear-gradient(180deg,rgba(240,163,94,.10),rgba(240,163,94,.04)) !important;border-color:rgba(240,163,94,.45) !important}
.prereg{border-color:rgba(240,163,94,.55) !important;box-shadow:0 0 22px rgba(240,163,94,.08)}

/* 제목 하이라이트: 골드 그라데이션 텍스트 */
header h1 .hl,h1.title .hl,.hero h1 .hl{
  background:linear-gradient(92deg,#ffd9a8,#f0a35e 55%,#e8894a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#f0a35e;
}

/* 개서 카운트다운: 글로우 링 + 숫자 강조 */
.cd{
  border-color:rgba(240,163,94,.5) !important;
  box-shadow:0 0 0 1px rgba(240,163,94,.25),0 10px 34px rgba(240,163,94,.16);
  background:linear-gradient(180deg,#1e2433,#171c28) !important;
}
.cd b{
  font-size:1.35rem;
  background:linear-gradient(90deg,#ffd9a8,#f0a35e);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#f0a35e;
}

/* 버튼·CTA: 그라데이션 + 그림자 */
.cta,.addtask button,.drow button.pri{
  background:linear-gradient(135deg,#f6b26e,#e8894a) !important;
  box-shadow:0 5px 20px rgba(232,137,74,.28);
  transition:box-shadow .15s,transform .12s;
}
.cta:hover{box-shadow:0 8px 28px rgba(232,137,74,.4);transform:translateY(-1px)}
.chip.on{background:linear-gradient(135deg,#f6b26e,#e8894a) !important;box-shadow:0 3px 14px rgba(232,137,74,.3)}

/* 진행바: 글로우 */
.bar i{box-shadow:0 0 12px rgba(240,163,94,.55)}

/* 체크박스 완료: 살짝 빛 */
li.done .box{box-shadow:0 0 10px rgba(94,201,138,.4)}

/* 섹션 라벨(工具與情報 등): 좌측 액센트 라인 */
.gtit{position:relative;padding-left:14px}
.gtit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:14px;border-radius:2px;background:linear-gradient(180deg,#f0a35e,#e8894a)}

/* 타임라인 점: 글로우 */
.tl .ev::before{box-shadow:0 0 10px rgba(240,163,94,.5)}
.tl .ev.big::before{box-shadow:0 0 14px rgba(94,201,138,.6)}

/* 아이콘 원형 배경 (직업 카드 등) */
.job .ico,.tool .ico{filter:drop-shadow(0 0 8px rgba(240,163,94,.25))}

/* footer 브랜드 글로우 */
footer .brand{text-shadow:0 0 14px rgba(240,163,94,.4)}

/* 스크롤바 (webkit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2c3446;border-radius:6px;border:2px solid #0d1016}
::-webkit-scrollbar-thumb:hover{background:#3a445c}
::-webkit-scrollbar-track{background:transparent}

/* 텍스트 선택 색 */
::selection{background:rgba(240,163,94,.35);color:#fff}


/* ═══ ☀️ 라이트 모드 (html[data-theme="light"]) ═══ */
html[data-theme="light"]{
  --bg:#f7f8fa; --card:#ffffff; --card2:#f2f5f9; --line:#e4e8f0;
  --text:#1a1d24; --sub:#64748b; --accent:#2b7fff; --accent2:#1d6ae5;
  --good:#1f9d5c; --bad:#c95555; --bar:#e4e9f1;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 520px at 85% -120px, rgba(43,127,255,.05), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(43,127,255,.03), transparent 55%),
    #f7f8fa !important;
  color:#22293a;
}
html[data-theme="light"] .topnav{
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  border-bottom-color:#e2e7f0 !important;
}
html[data-theme="light"] .nbrand{text-shadow:none}
html[data-theme="light"] .nlinks a.on{color:#1d6ae5 !important;text-shadow:none}
html[data-theme="light"] .sec,
html[data-theme="light"] .card,
html[data-theme="light"] .tool,
html[data-theme="light"] .job,
html[data-theme="light"] .dir,
html[data-theme="light"] .qa,
html[data-theme="light"] .box,
html[data-theme="light"] .patch,
html[data-theme="light"] .baseline,
html[data-theme="light"] .prereg,
html[data-theme="light"] .why,
html[data-theme="light"] .news .item,
html[data-theme="light"] .sched,
html[data-theme="light"] .chip2{
  background:#ffffff !important;
  border-color:#dde3ed !important;
  box-shadow:0 2px 10px rgba(30,40,70,.06);
}
html[data-theme="light"] .tool:hover,
html[data-theme="light"] .news a.item:hover{
  border-color:#2b7fff !important;
  box-shadow:0 8px 24px rgba(43,127,255,.16);
}
html[data-theme="light"] .keybox,
html[data-theme="light"] .tldr{background:linear-gradient(180deg,rgba(31,157,92,.08),rgba(31,157,92,.03)) !important;border-color:rgba(31,157,92,.4) !important}
html[data-theme="light"] .honest{background:linear-gradient(180deg,rgba(217,122,46,.08),rgba(217,122,46,.03)) !important;border-color:rgba(217,122,46,.45) !important}
html[data-theme="light"] .cd{
  background:#ffffff !important;
  border-color:rgba(43,127,255,.45) !important;
  box-shadow:0 0 0 1px rgba(43,127,255,.18),0 10px 30px rgba(43,127,255,.1);
}
html[data-theme="light"] header h1 .hl,
html[data-theme="light"] h1.title .hl,
html[data-theme="light"] .hero h1 .hl{
  background:linear-gradient(92deg,#4f8dff,#1d6ae5);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#1d6ae5;
}
html[data-theme="light"] .cd b{
  background:linear-gradient(90deg,#4f8dff,#1d6ae5);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#1d6ae5;
}
html[data-theme="light"] .cta,
html[data-theme="light"] .addtask button,
html[data-theme="light"] .drow button.pri{
  background:linear-gradient(135deg,#4f8dff,#2b6fe8) !important;
  color:#fff !important;
  box-shadow:0 5px 18px rgba(43,127,255,.35);
}
html[data-theme="light"] .chip.on{background:linear-gradient(135deg,#4f8dff,#2b6fe8) !important;color:#fff !important}
html[data-theme="light"] footer .brand{text-shadow:none}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c6cedd;border:2px solid #f3f5f9}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#aab4c8}
html[data-theme="light"] ::selection{background:rgba(43,127,255,.22);color:#1a1d24}
html[data-theme="light"] .t.s{background:rgba(43,127,255,.14);color:#1d6ae5}
html[data-theme="light"] .t.b{background:#e4e9f1;color:#22293a}


/* 모비라이프식: 단색 태그(흰 글자)·위젯헤더·블루 액센트 디테일 */
html[data-theme="light"] .ftag.info{background:#2b7fff;color:#fff}
html[data-theme="light"] .ftag.guide{background:#22c55e;color:#fff}
html[data-theme="light"] .ftag.t-tool{background:#8b5cf6;color:#fff}
html[data-theme="light"] .whead{background:#f2f5f9 !important;border-bottom-color:#e6eaf2 !important}
html[data-theme="light"] .gtit::before{background:linear-gradient(180deg,#4f8dff,#1d6ae5)}
html[data-theme="light"] .feed a:hover,html[data-theme="light"] .slist a:hover{background:rgba(43,127,255,.05)}
html[data-theme="light"] .wish{background:#2b7fff;color:#fff}
html[data-theme="light"] .tl .ev::before{box-shadow:0 0 8px rgba(43,127,255,.35)}
html[data-theme="light"] .bar i{box-shadow:0 0 10px rgba(43,127,255,.4)}

/* 🌓 테마 전환 버튼 */
#themeToggle{
  position:fixed;right:14px;bottom:14px;z-index:99;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);
  font-size:1.2rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .12s;
}
#themeToggle:hover{transform:scale(1.08)}
html[data-theme="light"] #themeToggle{box-shadow:0 4px 14px rgba(30,40,70,.18)}

/* ═══ 🍀 로고 + 워드마크 ═══ */
.nbrand{display:flex;align-items:center;gap:8px}
.blogo{width:27px;height:27px;border-radius:8px;box-shadow:0 2px 8px rgba(79,141,255,.35)}
.bw{display:flex;align-items:baseline;gap:5px;font-weight:800;letter-spacing:.5px}
.bw b{font-size:1.05rem;background:linear-gradient(92deg,#ffd9a8,#f0a35e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f0a35e}
.bw i{font-style:normal;font-size:.78rem;color:var(--sub);font-weight:700}
html[data-theme="light"] .bw b{background:linear-gradient(92deg,#4f8dff,#8b5cf6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#2b7fff}
html[data-theme="light"] .nbrand{text-shadow:none}

/* ═══ 타이포 점검: 제목 위계 ═══ */
.hero h1,header h1,h1.title{font-weight:800}
.whead h2{font-weight:800;letter-spacing:.8px}
h2.sec{font-weight:800;letter-spacing:.5px}
.tool .tt,.job .nm,.dir .nm{font-weight:800}
.chip2 .lbl{font-weight:600}


/* ═══ 좌우 윙 배너 (모비라이프식, 넓은 화면 전용) ═══ */
.wingad{display:none;position:fixed;top:90px;width:150px;height:560px;z-index:40;
  border:1px dashed var(--line);border-radius:12px;background:var(--card2);
  text-decoration:none;color:var(--sub);text-align:center;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  transition:border-color .15s}
.wingad:hover{border-color:var(--accent)}
.wingad .wtxt{font-size:.78rem;line-height:2;writing-mode:vertical-rl;letter-spacing:3px}
.wingad .wtxt b{color:var(--text)}
.admk2{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:.58rem;
  color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
@media(min-width:1560px){
  .wingad{display:flex}
  .wing-left{left:calc(50% - 600px - 170px)}
  .wing-right{right:calc(50% - 600px - 170px)}
}