/* ============================================================
   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됨 */
  /* keep-all: Korean wraps at word boundaries; break-word backstop for long EN tokens */
  word-break:keep-all;
  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.75rem;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.26rem 0.66rem;border-radius:5px;
  font-size:0.8rem;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.76rem;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.76rem;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.76rem;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);}

/* ── Premium polish: scrollbar · selection · focus ── */
html{scrollbar-width:thin;scrollbar-color:rgba(61,96,128,0.38) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(61,96,128,0.32);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:rgba(61,96,128,0.5);}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(106,159,216,0.28);}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(106,159,216,0.45);}
a,button{-webkit-tap-highlight-color:transparent;}
::selection{background:rgba(61,96,128,0.85);color:#fff;}
[data-theme="dark"] ::selection{background:rgba(106,159,216,0.9);color:#0d1117;}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px;}

/* ── Premium polish: primary button sheen ── */
.btn{position:relative;overflow:hidden;}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.32),transparent);
  transform:skewX(-18deg);transition:left 0.55s ease;pointer-events:none;
}
.btn-primary:hover::after{left:130%;}

/* ── Scroll-driven enhancements (Chromium — progressive, others unaffected) ── */
@supports (animation-timeline: scroll()) {
  body::after{
    content:'';position:fixed;top:0;left:0;right:0;height:2px;z-index:220;
    background:linear-gradient(90deg,var(--steel),var(--steel-lt) 55%,var(--gold));
    transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
    animation:pageProgress linear both;animation-timeline:scroll(root);
  }
  nav{animation:navCondense linear both;animation-timeline:scroll(root);animation-range:0 160px;}
}
@keyframes pageProgress{to{transform:scaleX(1);}}
@keyframes navCondense{to{padding-top:0.55rem;padding-bottom:0.55rem;box-shadow:var(--s2);}}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ── 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;}
  .logo{font-size:0.8rem;}
  .theme-toggle{width:30px;height:30px;font-size:0.9rem;}
  section{padding:2.8rem 1.1rem;}
  .page-header{padding:5.1rem 1.1rem 1.8rem;}
  .section-hd{margin-bottom:1.7rem;}
}

/* ── Mobile nav (hamburger) ── */
.nav-menu-btn{
  display:none;background:transparent;border:1px solid var(--bdr);
  color:var(--muted);cursor:pointer;width:34px;height:34px;border-radius:9px;
  font-size:1.05rem;line-height:1;align-items:center;justify-content:center;
  transition:border-color 0.2s,color 0.2s;
}
.nav-menu-btn:hover{border-color:var(--steel);color:var(--steel);}
@media(max-width:900px){
  .nav-menu-btn{display:flex;margin-left:auto;}
  .theme-toggle{margin-left:0.55rem;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(238,240,244,0.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bdr);box-shadow:var(--s2);
    padding:0.5rem 1.4rem 1.1rem;
  }
  nav.menu-open .nav-links{display:flex;}
  nav.menu-open .nav-links li{display:block !important;}
  .nav-links a{display:block;padding:0.72rem 0.2rem;font-size:0.95rem;}
  .nav-links a.nav-btn{display:inline-block;margin-top:0.5rem;padding:0.55rem 1rem;text-align:center;}
  [data-theme="dark"] .nav-links{background:rgba(13,17,23,0.97);}
}
@media(max-width:560px){
  .nav-menu-btn{width:30px;height:30px;font-size:0.95rem;}
}