/* HIPSTORY — shared styles */
:root {
  --navy: #18173a;
  --cream: #e9e6d6;
  --tan: #d9bf98;
  --sand: #ece3bd;
  --ink: #1c1c1c;
  --muted: #8a8a8a;
  --white: #ffffff;
  --wrap: 1100px;
  --header-h: 88px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Jost', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; background: #d8d3c2; color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 17.6px; }

/* ---------- Header ---------- */
.site-header { background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 26.4px; }
.brand { display: flex; align-items: center; gap: 15.4px; }
.brand img { height: 57.2px; width: auto; background: none; }
.brand span { font-size: 26.4px; font-weight: 500; letter-spacing: 0.01em; }
.nav { display: flex; align-items: center; gap: 35.2px; font-size: 15.4px; }
.nav a { opacity: 0.95; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6.6px; }

.lang-pill {
  display: inline-flex; align-items: center; gap: 5.5px;
  background: var(--white); color: var(--ink);
  border-radius: 1098.9px; padding: 3.3px 11px; font-size: 13.2px; font-weight: 500; line-height: 1.4;
}
.lang-pill svg { width: 14.3px; height: 14.3px; }

.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.menu-btn svg { width: 28.6px; height: 28.6px; }

/* ---------- Mobile menu (full screen) ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100; background: var(--navy); color: var(--white);
  display: none; flex-direction: column; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu-top { height: 79.2px; display: flex; align-items: center; justify-content: space-between; padding: 0 17.6px; }
.mobile-menu-top .brand img { height: 48.4px; }
.mobile-menu-top .brand span { font-size: 22px; }
.close-btn {
  width: 46.2px; height: 46.2px; border-radius: 50%; background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
}
.close-btn svg { width: 22px; height: 22px; }
.lang-seg { display: flex; margin: 8.8px 17.6px 13.2px; border: 1px solid rgba(255,255,255,0.35); border-radius: 11px; overflow: hidden; }
.lang-seg button { flex: 1; padding: 11px 0; font-size: 16.5px; }
.lang-seg button.active { background: var(--white); color: var(--navy); font-weight: 600; }
.mobile-links { list-style: none; padding: 0 17.6px; }
.mobile-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; font-size: 24.2px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.mobile-links svg { width: 24.2px; height: 24.2px; }

/* ---------- Home ---------- */
.hero { background: var(--navy); color: var(--white); padding: 110px 0 110px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.hero h1 { font-weight: 500; font-size: 44px; line-height: 1.35; margin-bottom: 39.6px; max-width: 484px; }
.hero-img { width: 100%; aspect-ratio: 488 / 364; object-fit: cover; border-radius: 17.6px; }

.store-badges { display: flex; gap: 35.2px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 8.8px; height: 48.4px; padding: 0 13.2px 0 11px;
  background: #000; color: #fff; border: 1px solid #a6a6a6; border-radius: 8.8px;
}
.store-badge { position: relative; }
.store-badge svg { width: 26.4px; height: 26.4px; flex: none; }
.store-badge.is-soon { cursor: default; }
.store-badge.is-soon > svg, .store-badge.is-soon > span { opacity: .55; }
.soon-tag {
  position: absolute; top: -13.2px; right: -11px; padding: 1px 7.7px; border-radius: 1098.9px;
  background: #f2c230; color: #18173a; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; white-space: nowrap;
}
.store-badge small { display: block; font-size: 9.9px; line-height: 1; letter-spacing: .02em; }
.store-badge strong { display: block; font-size: 20.9px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }

.features { padding: 88px 0 88px; }
.features h2 { font-size: 41.8px; font-weight: 500; margin-bottom: 39.6px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 35.2px; margin-bottom: 88px; }
.feature:last-child { margin-bottom: 0; }
.feature-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.feature h3 { display: flex; align-items: center; gap: 17.6px; font-size: 30.8px; font-weight: 500; margin-bottom: 44px; }
.feature .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-size: 24.2px; font-weight: 500; flex: none;
}
.feature p { font-size: 14.3px; line-height: 1.55; margin-bottom: 19.8px; }
.features .feature:first-of-type .feature-text { order: 0; }
.feature.reverse .feature-text { order: 2; }
.feature.reverse .feature-img { order: 1; }
.features-head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 35.2px; }

/* ---------- Project information ---------- */
.timeline { padding: 121px 0 132px; }
.timeline img { width: 100%; background: none; }
.timeline-hint { display: none; font-size: 13.2px; color: var(--muted); margin-top: 11px; }
.background-sec { background: var(--tan); padding: 88px 0; }
.background-sec .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 35.2px; align-items: start; }
.background-sec img { width: 100%; aspect-ratio: 470 / 826; object-fit: cover; }
.background-sec h2 { font-size: 41.8px; font-weight: 500; margin-bottom: 19.8px; }
.background-sec p { font-size: 13.8px; line-height: 1.6; margin-bottom: 19.8px; }

.resources { padding: 88px 0 88px; }
.resources h2 { font-size: 41.8px; font-weight: 500; margin-bottom: 33px; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17.6px; }
.res-card { display: block; position: relative; padding-bottom: 39.6px; }
.res-card img { width: 100%; aspect-ratio: 240 / 280; object-fit: cover; }
.res-card span {
  position: absolute; left: 17.6px; right: 17.6px; bottom: 0; height: 59.4px;
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 15.4px; text-align: center; padding: 0 8.8px; transition: background .2s, color .2s;
}
a.res-card:hover span { background: var(--navy); color: var(--white); }

/* ---------- Members & partners ---------- */
.team { padding: 88px 0 99px; }
.team h2, .partners h2 { font-size: 41.8px; font-weight: 500; text-align: center; margin-bottom: 39.6px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 330px)); justify-content: center; gap: 17.6px; }
.member-photo { aspect-ratio: 1 / 1; max-width: 100%; margin-bottom: 37.4px; background: #d8d3c2; overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 19.8px; font-weight: 500; padding-left: 17.6px; margin-bottom: 17.6px; }
.member p { font-size: 15.4px; padding-left: 17.6px; }
.partners { background: var(--sand); padding: 88px 0 132px; }
.partner-row { display: flex; justify-content: center; align-items: center; gap: 48.4px; flex-wrap: wrap; }
.partner-row img { height: 132px; width: 132px; object-fit: contain; background: none; }

/* ---------- Blog ---------- */
.blog-list { padding: 99px 0 132px; }
.blog-list h1 { font-size: 44px; font-weight: 500; text-align: center; margin-bottom: 44px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 61.6px 17.6px; }
.post-card img { width: 100%; aspect-ratio: 345 / 230; object-fit: cover; border-radius: 17.6px; margin-bottom: 24.2px; transition: opacity .2s; }
.post-card:hover img { opacity: .88; }
.post-card h2 { font-size: 23.1px; font-weight: 500; line-height: 1.38; margin-bottom: 8.8px; }
.post-date { color: var(--muted); font-size: 14.3px; margin-bottom: 11px; }
.post-card p { font-size: 14.3px; line-height: 1.5; }

.post { padding: 77px 0 77px; }
.back-btn {
  width: 28.6px; height: 28.6px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 33px;
}
.back-btn svg { width: 16.5px; height: 16.5px; }
.post h1 { font-size: 37.4px; font-weight: 500; line-height: 1.38; margin-bottom: 39.6px; max-width: 880px; }
.post-images { display: flex; flex-direction: column; align-items: center; gap: 30.8px; margin-bottom: 35.2px; }
.post-images img { width: 100%; max-width: 464.2px; aspect-ratio: 422 / 281; object-fit: cover; border-radius: 17.6px; }
.post-body p { font-size: 12.1px; line-height: 1.45; margin-bottom: 19.8px; }
.post .post-date { font-size: 12.1px; margin-bottom: 33px; }

/* ---------- Gallery ---------- */
.gallery { padding: 77px 0 77px; }
.gallery h1 { font-size: 41.8px; font-weight: 500; margin-bottom: 33px; }
.gallery .sub { font-size: 14.3px; margin-bottom: 30.8px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8.8px; }
.gallery-grid button { display: block; padding: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 216 / 122; object-fit: cover; transition: opacity .2s; }
.gallery-grid button:hover img { opacity: .85; }

.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(12, 12, 30, 0.82);
  display: none; align-items: center; justify-content: center; padding: 35.2px 17.6px;
}
.lightbox.open { display: flex; }
.lb-panel {
  position: relative; width: 100%; max-width: 1144px; max-height: 100%;
  display: grid; grid-template-columns: 1.35fr 1fr; background: var(--cream); overflow: hidden;
}
.lb-media { background: #121128; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lb-media img { width: 100%; height: 100%; max-height: calc(100vh - 70.4px); object-fit: contain; background: none; }
.lb-info { padding: 44px 35.2px 30.8px; overflow-y: auto; max-height: calc(100vh - 70.4px); min-width: 0; display: flex; flex-direction: column; }
.lb-count { font-size: 13.2px; color: var(--muted); letter-spacing: .06em; margin-bottom: 11px; font-variant-numeric: tabular-nums; }
.lb-info h2 { font-size: 26.4px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.lb-hanja { font-size: 16.5px; color: #6b6448; margin: 6.6px 0 22px; }
.lb-text p { font-size: 14.9px; line-height: 1.75; margin-bottom: 15.4px; word-break: keep-all; }
.lb-text p:last-child { color: #5c5a52; font-size: 13.8px; }
.lb-nav { display: flex; gap: 11px; margin-top: auto; padding-top: 17.6px; }
.lb-nav button {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-nav svg { width: 19.8px; height: 19.8px; }
.lb-close { position: absolute; top: 30.8px; right: 30.8px; z-index: 2; background: var(--navy); color: var(--white); width: 39.6px; height: 39.6px; }
.lb-close svg { width: 17.6px; height: 17.6px; }
.lightbox button:focus-visible, .gallery-grid button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Join section ---------- */
.join {
  position: relative; padding: 88px 0 93.5px;
  background: #e9a76b url('../images/join-bg.webp') center / cover no-repeat;
}
.join .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 35.2px; }
.join h2 { font-size: 37.4px; font-weight: 600; margin-bottom: 19.8px; }
.join p.lead { font-size: 14.3px; }
.join-form label { display: block; font-size: 13.8px; margin-bottom: 8.8px; }
.join-form input {
  display: block; width: 100%; height: 39.6px; margin-bottom: 22px; padding: 0 11px;
  font: inherit; font-size: 15.4px; background: transparent; border: 1px solid var(--navy); border-radius: 0; color: var(--ink);
}
.join-form input:focus { outline: 2px solid var(--navy); outline-offset: -1px; background: rgba(255,255,255,0.25); }
.join-form button[type="submit"] {
  width: 100%; height: 39.6px; margin-top: 13.2px; background: var(--navy); color: var(--white); font-size: 13.2px; font-weight: 500;
}
.join-form button[disabled] { opacity: .7; cursor: default; }
.form-msg { display: none; }
.form-msg.is-success, .form-msg.is-error {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 15.4px; padding: 13.2px 15.4px;
  font-size: 15.4px; font-weight: 500; line-height: 1.45; color: #fff; border-radius: 4.4px;
  box-shadow: 0 2px 11px rgba(0, 0, 0, 0.18);
}
.form-msg.is-success { background: #1e7b45; }
.form-msg.is-error { background: #b3261e; }
.form-msg svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.join-form .hp { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.78); padding: 61.6px 0 30.8px; font-size: 15.4px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1fr; gap: 35.2px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-brand { color: var(--white); }
.footer-brand p { margin-top: 15.4px; max-width: 264px; font-size: 15.4px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.footer-col { min-width: 0; }
.footer-col h2 { font-size: 13.2px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: 17.6px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--white); overflow-wrap: anywhere; }
.footer-col li a:hover { text-decoration: underline; text-underline-offset: 4.4px; }
.footer-col .store-badge, .footer-col .store-badge:hover { text-decoration: none; }
.footer-col .store-badges { flex-direction: column; gap: 11px; align-items: flex-start; }
.footer-bottom { padding-top: 24.2px; font-size: 14.3px; }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: flex; align-items: center; padding: 110px 0; text-align: center; }
.notfound .code { font-size: 121px; font-weight: 600; color: var(--navy); line-height: 1; }
.notfound h1 { font-size: 33px; font-weight: 500; margin: 17.6px 0 11px; }
.notfound p { font-size: 16.5px; margin-bottom: 33px; }
.btn { display: inline-block; background: var(--navy); color: var(--white); padding: 13.2px 30.8px; font-size: 15.4px; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav, .site-header .lang-pill { display: none; }
  .menu-btn { display: inline-flex; }
  :root { --header-h: 74.8px; }
  .brand img { height: 48.4px; }
  .brand span { font-size: 23.1px; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .hero { padding: 61.6px 0 70.4px; }
  .hero .wrap, .feature, .background-sec .wrap, .join .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: 35.2px; margin-bottom: 28.6px; }
  .store-badges { gap: 15.4px; }
  .feature { gap: 22px; margin-bottom: 61.6px; }
  .feature.reverse .feature-text { order: 0; }
  .feature-text { order: -1; }
  .feature h3 { margin-bottom: 19.8px; font-size: 26.4px; }
  .features h2, .resources h2, .background-sec h2, .team h2, .partners h2, .gallery h1 { font-size: 33px; }
  .timeline { padding: 61.6px 0 70.4px; }
  .timeline-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .timeline img { min-width: 836px; }
  .timeline-hint { display: block; }
  .join { background-image: linear-gradient(rgba(250, 232, 212, 0.62), rgba(250, 232, 212, 0.62)), url('../images/join-bg.webp'); }
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(0, 308px)); }
  .post-grid { grid-template-columns: 1fr; gap: 48.4px; }
  .blog-list h1 { font-size: 35.2px; }
  .post h1 { font-size: 28.6px; }
  .post-body p { font-size: 15.4px; line-height: 1.6; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-row { gap: 26.4px; }
  .partner-row img { width: 96.8px; height: 96.8px; }
  .lightbox { padding: 0; align-items: stretch; }
  .lb-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: none; height: 100%; }
  .lb-media img { max-height: 42vh; }
  .lb-info { max-height: none; padding: 26.4px 17.6px 22px; }
  .lb-close { top: calc(22px + env(safe-area-inset-top, 0px)); right: 22px; }
  .join h2 { font-size: 30.8px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}