/* ============================================================
   styles.css — Shared stylesheet for Portfolio
   Lee, Jun-hyeong | Cloud & Infrastructure Engineer
   ============================================================ */

/* ── Variables — Light (default) ── */
:root {
  --bg:      #e8ecf2;
  --surface: #f0f3f8;
  --white:   #ffffff;
  --steel:   #3d6080;
  --steel-lt:#6a8fae;
  --steel-bg:rgba(61,96,128,0.09);
  --gold:    #7a6040;
  --gold-bg: rgba(122,96,64,0.08);
  --gold-bdr:rgba(122,96,64,0.25);
  --text:    #141e2e;
  --text-mid:#2e3f58;
  --muted:   #546070;
  --muted2:  #8a9db8;
  --bdr:     rgba(61,96,128,0.18);
  --bdr-h:   rgba(61,96,128,0.45);
  --s1: 0 1px 3px rgba(40,60,90,0.11),0 1px 2px rgba(40,60,90,0.08);
  --s2: 0 4px 14px rgba(40,60,90,0.14),0 2px 5px rgba(40,60,90,0.09);
  --s3: 0 8px 28px rgba(40,60,90,0.17),0 4px 10px rgba(40,60,90,0.10);
  --r:8px; --r-sm:5px;
  /* theme transition */
  --theme-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Variables — Dark ── */
[data-theme="dark"] {
  --bg:      #0d1117;
  --surface: #161b24;
  --white:   #1e2530;
  --steel:   #6a9fd8;
  --steel-lt:#8fbfef;
  --steel-bg:rgba(106,159,216,0.1);
  --gold:    #f0883e;
  --gold-bg: rgba(240,136,62,0.12);
  --gold-bdr:rgba(240,136,62,0.35);
  --text:    #f0f4f8;
  --text-mid:#c8d4e0;
  --muted:   #8a9db8;
  --muted2:  #4d6280;
  --bdr:     rgba(106,159,216,0.14);
  --bdr-h:   rgba(240,136,62,0.45);
  --s1: 0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
  --s2: 0 4px 14px rgba(0,0,0,0.5),0 2px 5px rgba(0,0,0,0.35);
  --s3: 0 8px 28px rgba(0,0,0,0.6),0 4px 10px rgba(0,0,0,0.4);
}

/* ── Dark mode btn-outline fix ── */
[data-theme="dark"] .btn-outline{
  background:rgba(255,255,255,0.07);
  color:var(--text);
  border-color:rgba(255,255,255,0.18);
}
[data-theme="dark"] .btn-outline:hover{
  border-color:var(--steel);
  color:var(--steel);
  background:rgba(106,159,216,0.1);
}

/* ── Dark mode coming-soon card fix ── */
[data-theme="dark"] .proj-card.coming-soon{
  opacity:0.55;
  border-color:rgba(106,159,216,0.2);
  background:linear-gradient(145deg,#161e2c,#111828);
}

/* ── Dark mode body background ── */
[data-theme="dark"] body{
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.02) 2px,rgba(255,255,255,0.02) 3px),
    repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(106,159,216,0.025) 60px,rgba(106,159,216,0.025) 61px),
    linear-gradient(160deg,#080c12 0%,#0d1117 40%,#0a0f18 100%);
}

/* ── Dark mode card surfaces (hardcoded grads → dark) ── */
[data-theme="dark"] .proj-card,
[data-theme="dark"] .skill-cat,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .ov-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .story-body,
[data-theme="dark"] .info-card,
[data-theme="dark"] .edu-card,
[data-theme="dark"] .cert-item,
[data-theme="dark"] .pdf-fallback,
[data-theme="dark"] .callout{
  background:linear-gradient(145deg,#1a2232,#141b28);
}
[data-theme="dark"] .arch-img-wrap,
[data-theme="dark"] .pdf-embed{background:#1a2232;}

/* ── Dark mode orange accents ── */
[data-theme="dark"] .proj-card.featured{border-color:rgba(240,136,62,0.35);}
[data-theme="dark"] .proj-card.featured:hover{border-color:rgba(240,136,62,0.6);}
[data-theme="dark"] .callout{border-color:rgba(240,136,62,0.3);border-left-color:var(--gold);}
[data-theme="dark"] .callout strong{color:var(--gold);}
[data-theme="dark"] .btn-primary{
  background:linear-gradient(135deg,#c8601a,#f0883e);
  box-shadow:var(--s1),0 0 20px rgba(240,136,62,0.2);
  color:#fff;
}
[data-theme="dark"] .btn-primary:hover{
  background:linear-gradient(135deg,#d87030,#f0a060);
  box-shadow:var(--s2),0 0 30px rgba(240,136,62,0.3);
}
[data-theme="dark"] .nav-btn{color:var(--gold);border-color:var(--gold);}
[data-theme="dark"] .nav-btn:hover{background:var(--gold);color:#0d1117;}
[data-theme="dark"] .pdf-download{background:var(--gold);}
[data-theme="dark"] .pdf-download:hover{background:#d07030;}

/* ── Dark mode nav ── */
[data-theme="dark"] nav{background:rgba(13,17,23,0.88);}

/* ── Dark mode page-header bg ── */
[data-theme="dark"] .page-header{background:var(--surface);}
[data-theme="dark"] .page-header-bg{
  background:radial-gradient(ellipse 55% 80% at 80% 50%,rgba(240,136,62,0.08) 0%,transparent 65%),
    radial-gradient(ellipse 30% 50% at 10% 80%,rgba(106,159,216,0.06) 0%,transparent 55%);
}

/* ── Dark mode hero glow ── */
[data-theme="dark"] .hero-glow{
  background:radial-gradient(circle,rgba(240,136,62,0.12) 0%,rgba(106,159,216,0.08) 45%,transparent 70%);
}
[data-theme="dark"] .hero-glow2{
  background:radial-gradient(circle,rgba(106,159,216,0.1) 0%,transparent 65%);
}

/* ── Theme toggle button ── */
.theme-toggle{
  background:transparent;border:1px solid var(--bdr);
  color:var(--muted);cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:all 0.2s;flex-shrink:0;
  margin-left:0.5rem;
}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);}

/* ── Smooth transition on theme change ── */
body,nav,.proj-card,.skill-cat,.contact-card,.ov-card,.svc-card,
.story-body,.info-card,.edu-card,.cert-item,.page-header,footer{
  transition:var(--theme-transition);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* ── Body / Background ── */
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  line-height:1.7;
  /* overflow-x:hidden 제거 — 확대 시 가로 패닝(옆 스크롤) 허용. 장식 요소는 각 컨테이너에서 clip됨 */
  overflow-wrap:break-word;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.55) 2px,rgba(255,255,255,0.55) 3px),
    repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(180,200,220,0.06) 60px,rgba(180,200,220,0.06) 61px),
    linear-gradient(160deg,#dde3ec 0%,#e4eaf2 30%,#eaeff6 55%,#dfe5ee 100%);
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 4rem;
  background:rgba(238,240,244,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--s1);
}
.logo{font-family:'DM Mono',monospace;font-size:0.85rem;color:var(--steel);letter-spacing:0.06em;}
.logo span{color:var(--muted2);}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:0.875rem;transition:color 0.2s;}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--steel);font-weight:500;}
.nav-btn{
  background:transparent;color:var(--steel);
  padding:0.4rem 1rem;border-radius:var(--r-sm);
  font-size:0.8rem;font-weight:500;
  text-decoration:none;transition:all 0.2s;
  border:1.5px solid var(--steel);
}
.nav-btn:hover{background:var(--steel);color:#fff;}

/* ── Section commons ── */
section{padding:5.5rem 4rem;}
.section-inner{max-width:1100px;margin:0 auto;}
.section-hd{margin-bottom:3rem;}
.section-label{
  font-family:'DM Mono',monospace;font-size:0.7rem;color:var(--steel);
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.5rem;
  display:flex;align-items:center;gap:0.6rem;
}
.section-label::before{content:'';display:inline-block;width:1.2rem;height:1px;background:var(--steel);opacity:0.5;}
.section-title{font-size:clamp(1.6rem,2.5vw,2.1rem);font-weight:600;color:var(--text);letter-spacing:-0.015em;}
.section-sub{margin-top:0.5rem;font-size:0.9rem;color:var(--muted);}

/* ── Buttons ── */
.btn{
  padding:0.7rem 1.6rem;border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;font-size:0.875rem;font-weight:500;
  cursor:pointer;text-decoration:none;transition:all 0.2s;display:inline-block;
}
.btn-primary{
  background:linear-gradient(135deg,#3d6080,#4e6e8e);color:#fff;
  border:1px solid transparent;
  box-shadow:var(--s1),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover{background:linear-gradient(135deg,#2d5070,#3d6080);box-shadow:var(--s2);transform:translateY(-1px);}
.btn-outline{
  background:rgba(255,255,255,0.7);color:var(--text-mid);
  border:1px solid var(--bdr);box-shadow:var(--s1);
}
.btn-outline:hover{border-color:var(--steel);color:var(--steel);background:rgba(255,255,255,0.9);}

/* ── Tech tags ── */
.tech-tags{display:flex;flex-wrap:wrap;gap:0.35rem;}
.tech{
  background:var(--steel-bg);color:var(--steel);
  border:1px solid rgba(78,110,142,0.18);
  padding:0.2rem 0.6rem;border-radius:4px;
  font-size:0.73rem;font-family:'DM Mono',monospace;
}

/* ── Page header (about & project pages) ── */
.page-header{
  padding:8rem 4rem 3rem;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--bdr);
  background:var(--surface);
}
.page-header-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 80% at 80% 50%,rgba(180,200,224,0.4) 0%,transparent 65%),
    radial-gradient(ellipse 30% 50% at 10% 80%,rgba(200,185,160,0.15) 0%,transparent 55%);
}

/* ── Breadcrumb ── */
.breadcrumb{
  display:flex;align-items:center;gap:0.5rem;
  font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--muted2);
  margin-bottom:1.5rem;position:relative;z-index:1;
}
.breadcrumb a{color:var(--steel);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:var(--muted2);}

/* ── Eyebrow label ── */
.page-eyebrow{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;}
.eyebrow-line{width:2rem;height:1px;background:var(--steel);opacity:0.5;}
.eyebrow-text{font-family:'DM Mono',monospace;font-size:0.72rem;color:var(--steel);letter-spacing:0.14em;text-transform:uppercase;}

/* ── Shared card gradient ── */
.card-surface{
  background:linear-gradient(145deg,#ffffff,#e8edf5,#f2f5fa);
  border:1px solid var(--bdr);border-radius:var(--r);
  box-shadow:var(--s1);
}

/* ── Footer ── */
footer{
  text-align:center;padding:1.75rem;
  border-top:1px solid var(--bdr);background:var(--surface);
  color:var(--muted2);font-family:'DM Mono',monospace;
  font-size:0.72rem;letter-spacing:0.04em;
}

/* ── Image zoom (magnifier + lightbox) ── */
.zoomable{position:relative;cursor:zoom-in;}
.zoom-btn{
  position:absolute;top:0.65rem;right:0.65rem;z-index:3;
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,30,46,0.5);color:#fff;
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-4px);
  transition:opacity 0.2s,transform 0.2s,background 0.2s,border-color 0.2s;
  pointer-events:none;cursor:zoom-in;
}
.zoomable:hover .zoom-btn,.zoomable:focus-within .zoom-btn{opacity:1;transform:translateY(0);}
.zoom-btn:hover{background:var(--steel);border-color:var(--steel);}
.zoom-btn svg{width:18px;height:18px;}

.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  padding:4vh 4vw;
  background:rgba(8,12,18,0.88);backdrop-filter:blur(8px);
  cursor:zoom-out;
}
.lightbox.open{display:flex;animation:lbFade 0.22s ease;}
@keyframes lbFade{from{opacity:0;}to{opacity:1;}}
.lightbox img{
  max-width:100%;max-height:92vh;
  border-radius:10px;border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  background:#fff;cursor:default;
}
.lightbox-close{
  position:absolute;top:1.1rem;right:1.3rem;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,0.1);color:#fff;
  border:1px solid rgba(255,255,255,0.3);
  font-size:1.25rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,border-color 0.2s;
}
.lightbox-close:hover{background:var(--steel);border-color:var(--steel);}

/* ── Responsive commons ── */
@media(max-width:900px){
  nav{padding:1rem 1.5rem;}
  .nav-links{gap:1.2rem;}
  section{padding:4rem 1.5rem;}
  .page-header{padding:6rem 1.5rem 2.5rem;}
}
/* ── Phones (~560px) — global refinements ── */
@media(max-width:560px){
  nav{padding:0.85rem 1.1rem;}
  .nav-links{gap:0.9rem;}
  .logo{font-size:0.8rem;}
  .theme-toggle{width:30px;height:30px;font-size:0.9rem;margin-left:0.25rem;}
  section{padding:3.25rem 1.25rem;}
  .page-header{padding:5.5rem 1.25rem 2rem;}
  .section-hd{margin-bottom:2rem;}
}