:root{
  --navy:#071b33;--navy2:#0b3155;--blue:#069ed6;--cyan:#5bc5c6;
  --ink:#102338;--text:#263b50;--muted:#718395;--line:#dce8ee;
  --paper:#f5fafc;--white:#fff;--max:1180px;
  --shadow:0 22px 70px rgba(5,37,64,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}html{background:#fff}body{margin:0;font-family:var(--font);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(calc(100% - 42px),var(--max));margin:auto}
.siteHeader{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(7,27,51,.05)}
.headerIn{height:72px;display:flex;align-items:center;gap:24px}.brand{font-size:15px;font-weight:850;letter-spacing:.08em;color:var(--navy);white-space:nowrap}.brand span{color:var(--blue)}
.nav{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{height:40px;padding:0 14px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:780;color:#65798b;white-space:nowrap}.nav a:hover{background:#f0f7fb;color:var(--navy)}.nav a.active{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(6,158,214,.18)}
.headerLogo{width:92px;flex:0 0 auto}.headerLogo img{width:100%;height:auto}

/* HOME */
.homeHero{min-height:calc(100svh - 72px);position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 78% 18%,rgba(6,158,214,.24),transparent 28%),radial-gradient(circle at 15% 84%,rgba(91,197,198,.16),transparent 30%),linear-gradient(135deg,#06162a 0%,#082b4c 52%,#0b456a 100%)}
.homeHero:before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 78% 54%,transparent 0 56px,rgba(255,255,255,.035) 57px 58px);opacity:.55}.homeInner{position:relative;z-index:2;min-height:calc(100svh - 72px);display:grid;grid-template-columns:1.12fr .88fr;gap:58px;align-items:center;padding:54px 0 112px}
.kicker{display:flex;align-items:center;gap:11px;font-size:10px;font-weight:800;letter-spacing:.19em;color:#b7dce8;text-transform:uppercase;margin-bottom:20px}.kicker:before{content:"";width:38px;height:1px;background:var(--cyan)}
.homeHero h1{margin:0;max-width:760px;font-size:clamp(48px,5.6vw,80px);line-height:1;letter-spacing:-.06em;font-weight:760;word-break:keep-all}.homeHero h1 span{display:block;color:#82dce0;font-size:.61em;line-height:1.12;margin-top:12px;font-weight:650;letter-spacing:-.04em}.lead{margin:20px 0 0;max-width:600px;color:#cfe0ea;font-size:15px;line-height:1.7}
.theme{justify-self:end;width:min(100%,405px);padding:28px;border-radius:26px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));backdrop-filter:blur(18px);box-shadow:0 28px 90px rgba(0,0,0,.16);position:relative;overflow:hidden}.theme:after{content:"JCI";position:absolute;right:-8px;bottom:-44px;font-size:150px;font-weight:900;color:rgba(255,255,255,.035)}.theme small{font-size:9px;letter-spacing:.2em;color:#a8dce6;font-weight:800}.theme .year{font-size:15px;color:#d9edf4;margin-top:4px}.theme h2{font-size:30px;line-height:1.17;letter-spacing:-.045em;margin:20px 0 12px}.theme .president{font-size:13px;color:#c8dce5}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.stat{padding:12px 10px;border-top:1px solid rgba(255,255,255,.15)}.stat b{display:block;font-size:24px}.stat span{font-size:9px;color:#abc9d4}
.homeMenu{position:absolute;left:0;right:0;bottom:22px;z-index:4}.menuGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.menuCard{height:64px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(2,14,27,.47);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#edf7fa;transition:.18s}.menuCard:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(91,197,198,.55)}.menuCard b{font-size:13px;white-space:nowrap}.menuCard span{font-size:9px;color:#82d8d8}

/* PAGES */
.pageHero{background:linear-gradient(135deg,#eef8fb,#fff);border-bottom:1px solid var(--line);padding:54px 0 42px}.pageHero.dark{color:#fff;background:radial-gradient(circle at 85% 18%,rgba(6,158,214,.18),transparent 28%),linear-gradient(135deg,#071b33,#0b3155 65%,#0c4668)}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}.pageHero.dark .eyebrow{color:#77d4d7}.pageHero h1{margin:0;font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.055em;color:var(--ink)}.pageHero.dark h1{color:#fff}.pageHero p{max-width:720px;margin:16px 0 0;font-size:15px;line-height:1.7;color:var(--muted)}.pageHero.dark p{color:#c9dbe5}
.content{padding:42px 0 58px}.introGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}.introBig{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.05em;font-weight:760;color:var(--ink)}.introText{font-size:15px;line-height:1.75;color:#566a7b}.introText b{color:var(--ink)}
.aboutLead{margin-bottom:14px}.aboutLead p{margin:0;max-width:920px;font-size:16px;line-height:1.8;color:#566a7b}.aboutLead b{color:var(--ink)}
.identity{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.card{border:1px solid #e3edf2;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbfd);padding:20px}.identity .card{min-height:160px}.cardNo{font-size:8px;letter-spacing:.14em;color:var(--blue);font-weight:850}.card h3{margin:22px 0 8px;color:var(--ink);font-size:22px;letter-spacing:-.04em}.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.logoBand{margin-top:22px;border:1px solid #e4eef3;border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:24px}.logoBand img{width:220px}.logoBand p{margin:0;color:var(--muted);font-size:12px}
.sectionTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:34px 0 16px;padding-top:22px;border-top:1px solid var(--line)}.sectionTitle.noBorder{margin-top:10px;padding-top:0;border-top:0}.sectionTitle h2{margin:0;color:var(--ink);font-size:30px;letter-spacing:-.045em}.sectionTitle p{margin:0;color:var(--muted);font-size:11px;white-space:nowrap}
.leaders{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.leaderCard{padding:16px 18px;border-radius:17px;border:1px solid #e1ecf1;background:linear-gradient(180deg,#fff,#f7fbfd)}.leaderHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:9px;margin-bottom:5px;border-bottom:1px solid #e7f0f4}.leaderHead strong{font-size:13px;color:var(--ink)}.leaderHead span{font-size:7px;color:var(--blue);font-weight:850;letter-spacing:.13em;white-space:nowrap}.leaderRow{display:grid;grid-template-columns:minmax(64px,1fr) auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #edf3f6}.leaderRow:last-child{border-bottom:0}.leaderRole{font-size:10px;color:#748697;white-space:nowrap}.leaderName{font-size:12px;color:var(--ink);white-space:nowrap}

/* JCI */
.storyGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.henryCard{min-height:330px;position:relative;overflow:hidden;border-radius:24px;background:#071b33;color:#fff}.henryPhoto{position:absolute;inset:0;background:url('henry-giessenbier.jpg') 72% 26%/cover no-repeat;opacity:.62;filter:saturate(.82) contrast(1.02)}.henryShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,51,.96) 0%,rgba(7,27,51,.80) 46%,rgba(7,27,51,.26) 78%,rgba(7,27,51,.08) 100%)}.henryText{position:relative;z-index:2;width:62%;padding:30px}.henryText h2{margin:0 0 12px;font-size:31px;line-height:1.13;letter-spacing:-.045em}.henryText p{margin:0;color:#d7e7f0;font-size:13px;line-height:1.72}.globalCard{border-radius:24px;padding:28px;background:linear-gradient(145deg,#082442,#0e4c70);color:#fff;min-height:330px}.globalCard h2{font-size:28px;letter-spacing:-.04em;margin:0 0 12px}.globalCard p{font-size:13px;line-height:1.72;color:#d6e8f1;margin:0}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.chips span{height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:999px;display:inline-flex;align-items:center;font-size:10px;font-weight:750}
.opportunities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.op{padding:18px;border-radius:17px;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.06);min-height:185px}.op .num{width:36px;height:36px;border-radius:11px;border:1px solid rgba(128,217,220,.35);display:grid;place-items:center;color:#8edee0;font-size:11px}.op h3{font-size:18px;margin:18px 0 7px}.op p{font-size:10px;line-height:1.45;color:#b9cfdd;margin:0}.op small{display:block;margin-top:10px;color:#76cfd1;font-size:7px;letter-spacing:.12em;text-transform:uppercase}

/* activities */
.activityGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.activity{min-height:410px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(145deg,#087e9d,#0a5979);color:#fff}.activity:before{content:"ACTIVITY PHOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.18);transform:rotate(-15deg)}.activity>div{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(transparent,rgba(2,16,29,.88))}.activity small{font-size:8px;letter-spacing:.16em}.activity h2{margin:6px 0 5px;font-size:28px;letter-spacing:-.045em}.activity p{margin:0;font-size:11px;color:#d2e6ef}

/* history */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.time{min-height:190px;padding:28px 16px;border-right:1px solid var(--line);position:relative}.time:last-child{border-right:0}.time:before{content:"";position:absolute;top:-5px;left:16px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #fff}.time b{font-size:26px;color:var(--ink)}.time span{display:block;margin-top:32px;font-size:11px;color:var(--muted)}.time.current{background:#f0fbfe}.time.current b{color:var(--blue)}

/* join */
.joinLayout{display:grid;grid-template-columns:.78fr 1.22fr;gap:28px;align-items:start}.joinIntro{padding:26px;border-radius:22px;background:linear-gradient(145deg,#eef9fc,#f9fcfd);border:1px solid #e1edf2}.joinIntro h2{margin:0;font-size:36px;line-height:1.08;letter-spacing:-.05em;color:var(--ink)}.joinIntro p{font-size:13px;color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.step{padding:20px;border:1px solid #e1ebf0;border-radius:17px}.step b{font-size:11px;color:var(--blue)}.step strong{display:block;margin-top:7px;font-size:18px;color:var(--ink)}.step p{margin:5px 0 0;font-size:11px;color:var(--muted)}

/* location */
.location{display:grid;grid-template-columns:1fr 1fr;gap:12px}.map{min-height:360px;border-radius:22px;background:linear-gradient(135deg,#dff4f9,#eef8fb);border:1px solid #dcecf2;position:relative;overflow:hidden}.map:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(28deg,transparent 0 43px,rgba(0,111,150,.08) 44px 46px),repeating-linear-gradient(112deg,transparent 0 78px,rgba(0,111,150,.07) 79px 81px)}.pin{position:absolute;left:50%;top:48%;width:52px;height:52px;border-radius:50% 50% 50% 0;background:var(--blue);transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 14px 30px rgba(0,152,207,.25)}.pin:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:17px;top:17px}.locCard{min-height:360px;border-radius:22px;background:var(--navy);color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:space-between}.locCard h2{margin:0;font-size:34px;letter-spacing:-.05em}.address{margin-top:15px;color:#c8d9e4;font-size:14px;line-height:1.7}.mapBtns{display:flex;gap:7px;flex-wrap:wrap}.mapBtn{height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;font-size:10px;font-weight:800}.mapBtn.primary{background:#fff;color:var(--navy);border-color:#fff}
footer{padding:34px 0;background:#05131f;color:#879cae;font-size:10px}.foot{display:flex;justify-content:space-between;gap:20px}.foot strong{color:#fff;font-size:14px;letter-spacing:.06em}.footRight{text-align:right}

@media(max-width:900px){.headerIn{gap:12px}.headerLogo{width:75px}.nav{justify-content:flex-start}.homeInner{grid-template-columns:1fr;gap:16px;padding-top:40px}.theme{justify-self:start;width:min(100%,560px)}.menuGrid{grid-template-columns:repeat(3,1fr)}.identity{grid-template-columns:1fr}.leaders,.storyGrid,.joinLayout,.location,.introGrid{grid-template-columns:1fr}.opportunities{grid-template-columns:repeat(2,1fr)}.activityGrid{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(3,1fr)}.time:nth-child(3){border-right:0}.time:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media(max-width:620px){.wrap{width:min(calc(100% - 28px),var(--max))}.headerIn{height:60px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:30px 30px;gap:0}.brand{font-size:10px;align-self:end}.headerLogo{width:62px;justify-self:end;align-self:end}.nav{grid-column:1/3;height:30px;align-self:start;gap:2px}.nav a{height:28px;padding:0 9px;font-size:9px;border-radius:8px}.homeHero{min-height:calc(100svh - 60px)}.homeInner{min-height:calc(100svh - 60px);padding:34px 0 170px;align-content:center}.homeHero h1{font-size:clamp(36px,10.2vw,46px)}.lead{font-size:11px;margin-top:12px}.theme{padding:16px 18px;border-radius:18px}.theme h2{font-size:22px;margin:10px 0 7px}.theme .year{font-size:11px}.theme .president{font-size:9px}.stats{margin-top:9px}.stat{padding:7px 4px}.stat b{font-size:17px}.stat span{font-size:7px}.homeMenu{bottom:12px}.menuGrid{gap:5px}.menuCard{height:48px;padding:0 9px}.menuCard b{font-size:9px}.menuCard span{font-size:6px}.pageHero{padding:30px 0 26px}.pageHero h1{font-size:34px}.pageHero p{font-size:11px;margin-top:10px}.content{padding:24px 0 38px}.introBig{font-size:28px}.introText{font-size:11px;line-height:1.55}.aboutLead{margin-bottom:8px}.aboutLead p{font-size:10px;line-height:1.65}.logoBand{padding:10px 12px;gap:12px}.logoBand img{width:120px}.logoBand p{font-size:8px}.identity{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.identity .card{min-height:110px;padding:10px}.cardNo{font-size:6px}.card h3{font-size:14px;margin:12px 0 4px}.card p{font-size:7.4px;line-height:1.3}.sectionTitle{margin:20px 0 10px;padding-top:14px;gap:8px}.sectionTitle h2{font-size:22px}.sectionTitle p{font-size:8px;white-space:nowrap}.leaders{grid-template-columns:1fr 1fr;gap:6px}.leaderCard{padding:10px}.leaderHead strong{font-size:10px}.leaderHead span{font-size:5.5px}.leaderRole{font-size:7px}.leaderName{font-size:9px}.leaderRow{padding:6px 0;gap:6px}.storyGrid{gap:8px}.henryCard,.globalCard{min-height:275px;border-radius:17px}.henryPhoto{background-position:68% 25%;opacity:.70}.henryShade{background:linear-gradient(90deg,rgba(7,27,51,.94) 0%,rgba(7,27,51,.78) 52%,rgba(7,27,51,.24) 100%)}.henryText{width:68%;padding:17px}.henryText h2,.globalCard h2{font-size:20px}.henryText p,.globalCard p{font-size:8.6px;line-height:1.48}.globalCard{padding:17px}.chips{gap:4px;margin-top:10px}.chips span{height:24px;padding:0 8px;font-size:7px}.opportunities{grid-template-columns:repeat(2,1fr);gap:6px}.op{min-height:140px;padding:12px}.op .num{width:30px;height:30px}.op h3{font-size:15px;margin:10px 0 4px}.op p{font-size:7.5px}.op small{font-size:5.5px}.activityGrid{grid-template-columns:repeat(3,1fr);gap:6px}.activity{min-height:300px;border-radius:16px}.activity>div{padding:12px}.activity h2{font-size:16px}.activity p{font-size:7.5px}.timeline{grid-template-columns:1fr 1fr}.time:nth-child(2n){border-right:0}.time:nth-child(3){border-right:1px solid var(--line)}.time:nth-child(-n+4){border-bottom:1px solid var(--line)}.time{min-height:140px;padding:18px 12px}.time b{font-size:20px}.time span{font-size:8px;margin-top:22px}.joinIntro{padding:17px}.joinIntro h2{font-size:27px}.joinIntro p{font-size:9px}.steps{gap:6px}.step{padding:12px}.step strong{font-size:13px}.step p{font-size:8px}.location{grid-template-columns:1fr 1fr;gap:6px}.map,.locCard{min-height:260px;border-radius:16px}.locCard{padding:16px}.locCard h2{font-size:20px}.address{font-size:8.5px}.mapBtns{gap:4px}.mapBtn{height:30px;padding:0 8px;font-size:7px}.foot{display:block}.footRight{text-align:left;margin-top:8px}}


/* v1.2 UX polish */
.homePage .siteHeader .headerIn{padding-right:0}
.homeLogo{position:absolute;z-index:6;top:34px;right:max(24px,calc((100vw - var(--max))/2));width:160px;display:block;filter:drop-shadow(0 10px 25px rgba(0,0,0,.14));opacity:.96}
.homeLogo img{width:100%;height:auto}

/* Reduce expensive blur work on touch devices */
@media(hover:none),(max-width:760px){
  .siteHeader{backdrop-filter:none;background:#fff}
  .theme,.menuCard{backdrop-filter:none}
}

/* Only appears when the current page has more content below the viewport */
.scrollHint{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:140;transform:translate(-50%,12px);display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:rgba(7,27,51,.90);color:#fff;font-size:10px;font-weight:780;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(7,27,51,.22);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}
.scrollHint::after{content:"↓";font-size:13px;color:#83dbe0;animation:scrollHintBounce 1.15s ease-in-out infinite}
.scrollHint.show{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
@keyframes scrollHintBounce{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}

@media(max-width:620px){
  .homeLogo{top:18px;right:14px;width:106px}
  .homePage .headerIn{grid-template-columns:auto 1fr}
  .scrollHint{height:34px;padding:0 12px;font-size:9px;bottom:max(10px,env(safe-area-inset-bottom))}
}