@charset "utf-8";
/* CSS Document */


/* =========================
   THEME TOKENS (Light/Dark)
========================= */
:root{
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f6f7fb;
  --surface-2: #eef1f7;
  --text: #121417;
  --muted: #5b6472;
  --border: rgba(18,20,23,.12);

  --brand: #3b82f6;      /* 포인트 */
  --brand-2: #60a5fa;
  --shadow: 0 12px 30px rgba(0,0,0,.08);

  --btn-bg: rgba(255,255,255,.12);
  --btn-text: #fff;
  --btn-border: rgba(255,255,255,.22);

  --overlay: rgba(0,0,0,.35);
  --overlay-strong: rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f19;
    --surface: #0f1629;
    --surface-2: #121c33;
    --text: #e9eefb;
    --muted: #aab4c5;
    --border: rgba(233,238,251,.12);

    --brand: #60a5fa;
    --brand-2: #93c5fd;

    --shadow: 0 18px 45px rgba(0,0,0,.35);

    --btn-bg: rgba(255,255,255,.08);
    --btn-text: #e9eefb;
    --btn-border: rgba(233,238,251,.18);

    --overlay: rgba(0,0,0,.45);
    --overlay-strong: rgba(0,0,0,.68);
  }
}

/* 수동 토글로 강제 라이트/다크 */
html[data-theme="light"]{
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f7fb;
  --surface-2: #eef1f7;
  --text: #121417;
  --muted: #5b6472;
  --border: rgba(18,20,23,.12);
  --brand: #3b82f6;
  --brand-2: #60a5fa;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --btn-bg: rgba(255,255,255,.12);
  --btn-text: #fff;
  --btn-border: rgba(255,255,255,.22);
  --overlay: rgba(0,0,0,.35);
  --overlay-strong: rgba(0,0,0,.55);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b0f19;
  --surface: #0f1629;
  --surface-2: #121c33;
  --text: #e9eefb;
  --muted: #aab4c5;
  --border: rgba(233,238,251,.12);
  --brand: #60a5fa;
  --brand-2: #93c5fd;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --btn-bg: rgba(255,255,255,.08);
  --btn-text: #e9eefb;
  --btn-border: rgba(233,238,251,.18);
  --overlay: rgba(0,0,0,.45);
  --overlay-strong: rgba(0,0,0,.68);
}

/* =========================
   BASE
========================= */
body{
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; }

/* 공통 섹션 배경/카드 톤 */
.section-padding{ background: transparent; }
.services-section{
  background: var(--surface);
}
.container{
  /* 기존 스타일 유지하면서 배경을 해치지 않도록 */
}

.section-header span{
  color: var(--brand);
}
.section-header h2{
  color: var(--text);
}
.section-header p{
  color: var(--muted);
}



html[data-theme="dark"] .header-area .navbar > li > a {
    color: #fff;
}

html[data-theme="dark"] .scrolled .header-area .navbar > li a { color: #000;}

html[data-theme="dark"] .header-area .logo a { display: block; position: relative; width: 180px; height: 56px; background: url(../img/logo_w.png); background-repeat: no-repeat; background-size: 80%; }
html[data-theme="dark"] .header-area.on .logo a { display: block; position: relative; width: 180px; height: 56px; background: url(../img/logo.png); background-repeat: no-repeat; background-size: 80%; }
html[data-theme="dark"] .scrolled .header-area .logo a { display: block; position: relative; width: 180px; height: 56px; background: url(../img/logo.png); background-repeat: no-repeat; background-size: 80%; }
html[data-theme="dark"] .sub-header ul.sub-position > li::after {content: "";width: 13px; height: 8px; background: url(../img/sub/arrow_w.png) no-repeat;display: block; position: absolute;right: 20px;}
html[data-theme="dark"] .header-area.on .navbar > li > a { color: #1a1a1a; }
/* 카드 계열 */
.service-card,
.news-card{
  background: var(--surface-2);
  color: var(--text);
}
.service-card p,
.news-desc{ color: var(--muted); }

.link-text{
  color: var(--brand);
}
.link-text:hover{
  color: var(--brand-2);
}

/* About */
.about-section{
  background: transparent;
}
.about-text span{ color: var(--brand); }
.about-text p{ color: var(--muted); }
.check-list li{ color: var(--text); }
.btn.btn-outline{
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
}
.btn.btn-outline:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* Stats */
.stats-section{
  background: var(--surface);
}
.stat-item h3{ color: var(--text); }
.stat-item p{ color: var(--muted); }

/* Portfolio */
.portfolio-item{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.portfolio-overlay{
  background: linear-gradient(to top, var(--overlay-strong), transparent);
}
.portfolio-cat{
  color: var(--brand-2);
}
.portfolio-title{
  color: #fff;
}

/* =========================
   THEME TOGGLE (EMOJI)
========================= */

.theme-toggle {
  position: fixed;
  top: 25px;
  right: 24px;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 9000;

  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease;
}

/* ▼▼▼ [핵심 수정] 클릭 영역 확장 코드 ▼▼▼ */
.theme-toggle::after {
  content: '';
  position: absolute;
  /* 버튼 밖으로 20px씩 투명한 영역을 확장 */
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  /* 필요하다면 z-index 조절, 보통 부모가 높으면 됨 */
  cursor: pointer; 
}
/* ▲▲▲ ---------------------------- ▲▲▲ */

.theme-toggle:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .16);
}

.theme-icon {
  filter: saturate(1.1);
}

/* 라이트 상태: 달은 기본 */
.theme-toggle i { transition: transform .2s ease; }
.theme-toggle:active i { transform: scale(.92); }

/* 다크 상태 포인트 컬러 */
html[data-theme="dark"] .theme-toggle,
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle {
    color: #ffd36a;
  }
}

/* =========================
   MOBILE POSITION
========================= */
@media (max-width: 768px) {
  .theme-toggle {
    top: auto;
    bottom: 20px;
    right: 16px;
  }
  
  /* 모바일에서는 터치 편의를 위해 영역을 조금 더 넓힘 */
  .theme-toggle::after {
    top: -30px;
    bottom: -30px;
    left: -30px;
    right: -30px;
  }
}