/* =========================
   GOUM Gallery 2026 - Common CSS
   Pure HTML/CSS (No JS)
   ========================= */

:root{
  --bg: #f4f4ff;
  --ink: #06060a;
  --muted: rgba(6,6,10,.72);
  --card: rgba(255,255,255,.78);
  --stroke: rgba(6,6,10,.12);

  --a: #2b59ff;   /* accent */
  --b: #10b981;   /* green */
  --c: #f97316;   /* orange */
  --d: #a855f7;   /* violet */
  --e: #06b6d4;   /* cyan */

  --shadow: 0 12px 40px rgba(0,0,0,.08);
  --radius: 18px;

  --headerH: 74px;
  --footerH: 84px;
  --wrapW: 1120px;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(43,89,255,.18), transparent 55%),
    radial-gradient(900px 540px at 90% 10%, rgba(16,185,129,.16), transparent 50%),
    radial-gradient(900px 540px at 30% 110%, rgba(168,85,247,.12), transparent 55%),
    var(--bg);
  overflow-x: hidden;
}

/* Fixed header/footer + content safe area */
.site{
  min-height: 100vh;
  padding-top: calc(var(--headerH) + 18px);
  padding-bottom: calc(var(--footerH) + 26px);
}

.header{
  position: fixed;
  left:0; top:0; right:0;
  height: var(--headerH);
  z-index: 50;
  background: rgba(244,244,255,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}

.footer{
  position: fixed;
  left:0; right:0; bottom:0;
  height: var(--footerH);
  z-index: 40;
  background: rgba(244,244,255,.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke);
}

.inner{
  width: min(var(--wrapW), calc(100% - 32px));
  margin: 0 auto;
}

/* Header layout */
.header .bar{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand .mark{
  width: 40px; height: 40px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow:hidden;
  flex: 0 0 auto;
}

.brand .txt{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand .txt b{ font-size: 15px; letter-spacing: .2px; }
.brand .txt span{ font-size: 12px; color: var(--muted); }

.nav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a{
  text-decoration: none;
  color: rgba(6,6,10,.86);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.nav a:hover{
  background: rgba(43,89,255,.10);
  border-color: rgba(43,89,255,.18);
}
.nav a.active{
  background: rgba(6,6,10,.08);
  border-color: rgba(6,6,10,.12);
}

/* Hero */
.hero{
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.25);

  /* 🔥 검정 제거 + 컬러 그라디언트만 */
  background:
    linear-gradient(
      120deg,
      #1e3a8a 0%,   /* deep blue */
      #2563eb 30%,  /* blue */
      #0ea5a4 60%,  /* teal */
      #22c55e 100%  /* green */
    );
}

/* =========================
   HERO: readability upgrade
   ========================= */

.hero .hero-content{
  position: relative;
  z-index: 2;
  padding: 28px 26px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.25fr .75fr; /* 좌:텍스트, 우:프레임 */
  gap: 18px;
  align-items: start;
}

/* 제목/본문 글자 크게 */
.hero h1{
  margin: 10px 0 12px;
  font-size: 30px;         /* 기존보다 크게 */
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #fff;
}

.hero p{
  margin: 0 0 14px;
  font-size: 16px;         /* 기존 14 → 16 */
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  max-width: 48rem;
}

.kicker{
  font-size: 13px;
  color: rgba(255,255,255,.88);
}

/* pill 가독성 */
.pills{ margin-top: 12px; }
.pill{
  font-size: 13px;
  padding: 9px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

/* 오른쪽 프레임 패널: 배치/가독성 업 */
.hero .panel{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: 16px;
}

.hero .panel h3{
  margin: 0 0 12px;
  font-size: 16px;       /* 기존 14 → 16 */
  letter-spacing: -.2px;
  color: rgba(255,255,255,.96);
}

/* meta 카드를 2열로, 카드 안 글자 크게 */
.meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.meta .m{
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px 14px;
  min-height: 68px;
}
.meta .m b{
  display:block;
  font-size: 13px;        /* 기존 12 → 13 */
  color: rgba(255,255,255,.95);
}
.meta .m span{
  display:block;
  margin-top: 6px;
  font-size: 14px;        /* 기존 12 → 14 */
  line-height: 1.45;
  color: rgba(255,255,255,.86);
}

/* 모바일에서는 1열로 쌓이게 + 글자 더 적당히 */
@media (max-width: 900px){
  .hero .hero-content{
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }
  .hero h1{ font-size: 30px; }
  .hero p{ font-size: 15px; }
  .meta{ grid-template-columns: 1fr; }
}

/* Sections */
.section{
  margin-top: 18px;
  padding: 18px 0;
}
.section .head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.section .head h2{
  margin:0;
  font-size: 18px;
  letter-spacing: -.2px;
}
.section .head .sub{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Cards grid */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr;} }

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .top{
  padding: 14px 14px 10px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(6,6,10,.12);
  background: rgba(255,255,255,.7);
}
.badge i{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--badge, var(--a));
}
.card h3{
  margin: 0;
  font-size: 15px;
  letter-spacing: -.2px;
}
.card p{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.card .body{
  padding: 0 14px 14px;
}
.list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(6,6,10,.80);
  line-height: 1.45;
}
.list li .chk{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(43,89,255,.12);
  border: 1px solid rgba(43,89,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  margin-top: 1px;
}
.list li .chk::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--a);
}

/* Timeline */
.timeline{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.step{
  background: rgba(255,255,255,.66);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  display:flex;
  gap: 12px;
}
.step .no{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgba(6,6,10,.07);
  border: 1px solid rgba(6,6,10,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  font-size: 13px;
}
.step .txt b{ display:block; font-size: 14px; }
.step .txt span{ display:block; margin-top:6px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Footer */
.footer .bar{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.footer .info{
  font-size: 12px;
  color: rgba(6,6,10,.72);
  line-height: 1.35;
}
.footer .links{
  display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end;
}
.footer .links a{
  font-size: 12px;
  color: rgba(6,6,10,.78);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(6,6,10,.10);
  background: rgba(255,255,255,.62);
}
.footer .links a:hover{
  border-color: rgba(43,89,255,.22);
  background: rgba(43,89,255,.10);
}

/* Page utilities */
.pills{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pill{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.82);
}

/* Small anchor section at bottom of pages */
.cta{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cta b{ font-size: 14px; }
.cta span{ display:block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: white;
  background: var(--a);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(43,89,255,.22);
  font-size: 13px;
  white-space: nowrap;
}