/* KAIIA 서브페이지 공통 + 사업분야 — Figma 시안(1920 기준) 반영 */

/* 서브페이지는 자체 제목 영역이 있으므로 그누보드 기본 제목 숨김 */
body.biz-page #container_title,
body.about-page #container_title,
body.member-page #container_title,
body.participate-page #container_title,
body.register-page #container_title{display:none}

/* 스킵 네비 — 키보드 포커스 전까지 감춤 (메인은 헤더째 숨겨져 문제없었음) */
#skip_to_container a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#skip_to_container a:focus{width:auto;height:auto;clip:auto;top:0;left:0;z-index:1001;padding:calc(10 * var(--u)) calc(16 * var(--u));background:#000;color:#fff}

/* ===================== 서브페이지 공통 헤더 =====================
   메뉴명 · 서브메뉴명 · 칩 — 협회소개 등 서브페이지가 함께 쓰는 틀.

   ※ 크기에는 시안(1920) px 값에 var(--u) 를 곱해 적는다 (style.css 참고).
     1920 에서 시안과 같고, 화면이 넓거나 좁으면 통째로 확대·축소된다.   */
.sub-head{padding:calc(90 * var(--u)) 0 0}
.sub-head-inner{width:var(--content);margin:0 auto}
.sub-head-menu{font-size:calc(24 * var(--u));line-height:1.2;color:#000}
.sub-head-title{margin-top:calc(50 * var(--u));font-size:calc(46 * var(--u));
    font-weight:700;line-height:1.2;color:#000}

.sub-chipbar{padding-top:calc(60 * var(--u))}
.sub-chips{display:flex;flex-wrap:wrap;gap:calc(23 * var(--u))}
.sub-chip{display:inline-flex;align-items:center;justify-content:center;
    padding:calc(10 * var(--u)) calc(20 * var(--u));border:1px solid transparent;border-radius:999px;
    font-size:calc(18 * var(--u));font-weight:500;line-height:1.2;color:rgba(0,0,0,.3);
    white-space:nowrap;transition:color .2s,border-color .2s}
.sub-chip:hover{color:rgba(0,0,0,.6)}
.sub-chip.is-on{border-color:#000;background:#fff;color:rgba(0,0,0,.7)}

/* ===================== 파란 점이 붙는 섹션 제목 =====================
   오시는 길(묶음 이름)과 가입안내(섹션 제목)가 함께 쓰는 규격.
   점 크기 · 글자와의 간격 · 세로 위치를 여기 한곳에서만 정한다 —
   페이지마다 따로 적으면 값이 조금씩 어긋난다(실제로 네 군데가 다 달랐다).

   값을 px 가 아니라 em 으로 두는 이유: 두 제목은 글자 크기가 다르다(30 · 20).
   px 로 못 박으면 작은 제목에서 점만 유독 커 보인다. em 이면 어디서든 같은 인상이 된다.
   글자는 콘텐츠 왼쪽선에 맞고 점은 그 바깥에 걸린다(시안과 같음). */
/* 점은 제목 왼쪽에 붙지만, 자리를 차지하지 않으면 상자 밖(여백 쪽)으로 삐져나온다.
   그래서 점 몫만큼 왼쪽 안쪽 여백을 두고 그 자리에 점을 그린다.
   제목 상자의 왼쪽 끝 = 점의 왼쪽 끝 이 되어 다른 요소와 줄이 맞는다. */
.kaiia-dot-title{position:relative;line-height:1.4;padding-left:0.47em}
.kaiia-dot-title::before{content:'';position:absolute;
    left:0;            /* 점 지름(0.34) + 글자와의 간격(0.13) 만큼 위에서 밀어 뒀다 */
    top:0.16em;        /* 첫 줄 글자 윗선에 걸치도록 */
    width:0.34em;height:0.34em;border-radius:50%;background:#2eadf1}

/* ===================== 협회소개 · 인사말 ===================== */
.greet{padding:calc(108 * var(--u)) 0 calc(208 * var(--u))}
.greet-inner{width:min(calc(1448 * var(--u)), 100% - calc(48 * var(--u)));margin:0 auto}

/* 프로필 — 사진(316) + 간격(35) 뒤에 이름·약력이 세로로 쌓임.
   사진은 두 줄에 걸치고(grid row 1/3), 이름은 위·약력은 아래 */
.greet-profile{display:grid;grid-template-columns:calc(316 * var(--u)) 1fr;
    gap:0 calc(35 * var(--u));align-items:start}
.greet-photo{grid-row:1/3;width:calc(316 * var(--u))}
.greet-photo img{width:100%;height:auto;aspect-ratio:316/378;object-fit:cover;display:block}

/* '협회장'과 이름의 세로 중앙을 맞춤 (baseline 이면 작은 글자가 아래로 처짐) */
.greet-role{display:flex;align-items:center;gap:calc(15 * var(--u));
    font-family:var(--sans);letter-spacing:calc(-0.32 * var(--u))}
.greet-role span{font-size:calc(18 * var(--u));font-weight:700;line-height:1.67;color:#999}
.greet-role strong{font-size:calc(55 * var(--u));font-weight:700;line-height:1.31;color:#222}

/* 약력 — 사진 하단에 맞춰 아래쪽에 배치 */
.greet-career{margin-top:calc(140 * var(--u));font-size:calc(17 * var(--u));line-height:1.55;
    color:#222;word-break:keep-all}
.greet-career li{position:relative;padding-left:calc(12 * var(--u))}
.greet-career li::before{content:'·';position:absolute;left:0;top:0}

/* 본문 — 사진 오른쪽 기준선(사진폭+간격)에 맞춰 들여씀.
   읽는 글이라 글자 크기는 px 로 고정하고, 위치·여백만 화면에 맞춰 움직인다.
   keep-all: 한글이 단어 중간에서 끊기지 않게 */
.greet-body{margin-left:calc(351 * var(--u));margin-top:calc(85 * var(--u));
    max-width:calc(1090 * var(--u));
    font-size:calc(18 * var(--u));line-height:calc(25.6 * var(--u));color:#222;word-break:keep-all}
.greet-body p{margin-bottom:calc(51.2 * var(--u))}     /* 시안: 빈 줄 2개 = 25.6 × 2 */
.greet-body p:last-child{margin-bottom:0}
.greet-lead{font-weight:700}
.greet-lead span{display:block}   /* 두 줄 유지 — br 은 모바일에서 숨기므로 span 으로 나눔 */
/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임).
   프로필 위에 오른쪽 정렬로 얹는다(조직구성 org-adm 과 같은 모양). */
.greet-adm{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));margin-bottom:calc(24 * var(--u))}
.greet-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.greet-adm-btn:hover{border-color:var(--btn);color:var(--btn)}

/* ===================== 협회소개 · 설립목적 ===================== */
body.biz-page .sub-head{display:none}   /* PC 는 좌측 패널이 제목을 맡는다 */

.fd-inner{width:var(--content);margin:0 auto}

/* ---- 1. 히어로 (NHN ESG 방식) ----
   긴 섹션 안에서 무대를 sticky 로 고정하고, 가운데 얇은 띠가 화면 전체로 커진다.
   위아래 제목은 밀려나고, 문구는 확장이 끝난 뒤에 뜬다.

   ※ 문구는 반드시 display:none 으로 시작할 것.
     opacity/visibility 만으로는 일부 환경에서 잔상이 남는다. */
.fd-hero{position:relative;height:500vh;margin-top:calc(-1 * var(--hh))}
.fd-hero-stage{position:sticky;top:0;height:100vh;height:100svh;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(32 * var(--u));
    overflow:hidden;background:#fff}
/* 확장이 시작되면 고정 헤더(1000)보다 위로 올려 GNB 까지 덮는다 */
.fd-hero.is-covering .fd-hero-stage{z-index:1001}

/* 위아래 제목 — 확장에 밀려 화면 밖으로 */
.fd-hero-t{position:relative;z-index:2;font-size:calc(60 * var(--u));font-weight:800;line-height:1.2;
    color:#000;text-align:center;will-change:transform}

/* 띠 — 무대 가운데. JS 가 크기를 키워 화면을 꽉 채운다 */
.fd-band{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:56%;height:calc(30 * var(--u));border-radius:999px;overflow:hidden;z-index:1}
.fd-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-band-dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}

/* 문구 레이어 — flex 흐름 밖에 두어 무대 배치에 영향을 주지 않는다 */
.fd-copylayer{position:absolute;inset:0;z-index:3;pointer-events:none}
/* 문구는 기본이 '아예 없음'(display:none). JS 가 필요할 때만 켠다 */
.fd-lead,.fd-desc{display:none;position:absolute;left:50%;top:50%;
    width:82%;transform:translate(-50%,-50%);text-align:center;color:#fff;opacity:0}
.fd-lead{font-size:calc(60 * var(--u));font-weight:800;line-height:1.2;white-space:nowrap}
.fd-lead-sub{display:none}   /* 모바일에서만 노출 */

/* 줄바꿈 전환 — 같은 문장이라도 PC 와 모바일에서 끊는 자리가 다르다.
   br-pc 는 PC 에서만, br-mo 는 모바일에서만 줄을 바꾼다. */
.br-mo{display:none}
.fd-desc{font-size:calc(22 * var(--u));font-weight:600;line-height:2;word-break:keep-all}
.fd-lead.is-on,.fd-desc.is-on{display:block}

/* 장식 오브젝트 — 배경에 떠 있는 유리/구체 (시안 좌표 기준 비율 배치) */
/* 배경 장식 — 본문 뒤에 은은하게 (겹쳐서 지저분해지지 않도록 크기·투명도 조절) */
.fd-deco{position:absolute;pointer-events:none;z-index:0;height:auto;opacity:.85}
/* 가치 카드 섹션의 장식 — 카드와 마찬가지로 세로는 JS 가 흘려보낸다.
   카드(31vw)가 커졌으므로 장식은 카드 사이 빈 공간에 작게 배치 */
/* 카드 3장과 하나씩 짝을 지어 함께 흐른다 — 세로는 카드 자리(0 · 145 · 290vh)에 맞추고,
   가로는 그 카드가 비워 둔 반대편에 세운다. 카드는 폭 24.8vw 라 한쪽이 늘 넉넉히 남는다.
   같은 자리에 몰아 두면 한 카드에만 셋이 붙어 지나간다. */
.fd-deco-glass1{right:12%; top:8vh;   width:10%;  will-change:transform,opacity}  /* 왼쪽 카드 옆 */
.fd-deco-glass2{left:10%;  top:138vh; width:6.5%; will-change:transform,opacity}  /* 오른쪽 카드 옆 */
.fd-deco-glass3{right:14%; top:298vh; width:8%;   will-change:transform,opacity}  /* 가운데 카드 옆 */
.fd-deco-orb{right:4%;top:-4%;width:16%}

/* ---- 2~3. 슬로건 + 카드 ----
   고정 무대(sticky) 안에 슬로건과 카드를 함께 둔다.
   → 슬로건이 화면 중앙에 올라와 멈추고, 그 상태에서 카드가 하나씩 올라옴.
   카드 등장은 JS(founding.js)가 스크롤 진행도로 제어. */
/* difference 합성이 무대 안에서만 일어나도록 배경을 준다(메인 .biz-stage 와 동일) */
.fd-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
/* 슬로건 — 메인 Business 섹션의 큰 글자(.biz-word)와 같은 방식.
   맨 위층(z-index 3)에 흰 글자로 두고 difference 로 합성한다.
   → 흰 배경 위에서는 검게, 카드(사진·글자) 위에서는 겹친 부분만 반전되어 보인다. */
.fd-slogan{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    z-index:3;text-align:center;pointer-events:none;mix-blend-mode:difference}
.fd-slogan h4{color:#fff}
.fd-slogan p{color:#999}
/* 카드는 좌표로 직접 배치한다 (flex + 음수마진으로는 정렬이 흐트러짐).
   시안 1920 기준 x216/x1187/x450 → 화면 비율로 환산 */
/* 묶음 — 마지막 카드 자리(290vh) + 카드 높이(약 65vh).
   간격 145vh 는 '화면 높이 + 카드 높이'(165)에서 조금 줄인 값이다.
   더 줄이면 앞 카드가 다 빠지기 전에 다음 카드가 들어와 둘이 함께 보인다. */
.fd-values-inner{position:absolute;left:0;right:0;top:0;height:355vh;z-index:2;will-change:transform}
/* 카드는 화면 아래에서 스크롤에 물려 올라온다 (위치·투명도는 JS 가 매 프레임 계산).
   transition 을 걸면 스크롤과 따로 놀며 튀어 오르므로 두지 않는다. */
.fd-card{will-change:transform,opacity}
.fd-slogan h4,.fd-slogan p{position:relative;z-index:1}
/* 메인페이지 'Research'(310px) 와 같은 덩치가 되도록 두 줄 전체를 키움.
   Research 폭 ≈ 화면의 66% → 우리 두 줄도 같은 폭이 되는 크기가 150px */
/* NHN ESG 슬로건과 같은 규격: 100px / weight 700 / line-height 138px.
   scale 은 JS 가 스크롤에 맞춰 조절한다(작게 시작해 커지며 자리를 잡음). */
.fd-slogan h4{font-family:var(--display);font-size:calc(100 * var(--u));font-weight:700;line-height:calc(138 * var(--u));
    letter-spacing:calc(-2 * var(--u));white-space:nowrap;will-change:transform}
.fd-slogan p{margin-top:calc(18 * var(--u));font-size:calc(16 * var(--u));font-weight:500;line-height:1.6}

/* ---- 3. 가치 카드 3개 (계단식) ---- */
/* overflow 는 걸지 않는다 — x 축 clip 도 자식의 sticky 를 무력화한다.
   가로 넘침은 카드 레이어(.fd-values-inner) 안에서 처리.
   높이 680vh — 카드(높이 ≈ 63vh) 3장이 차례로 화면을 가로지를 분량 */
.fd-values{position:relative;height:570vh}
/* 배경 대형 원 — 무대 안(흰 배경 위)에 그려야 difference 합성과 함께 보인다 */
.fd-stage::before{content:'';position:absolute;left:50%;top:50%;width:130vw;height:130vw;
    transform:translate(-50%,-50%);border-radius:50%;z-index:0;
    background:radial-gradient(circle,#f4f7fb 0%,#eef3f9 55%,rgba(255,255,255,0) 72%);
    pointer-events:none}
/* 시안 간격(카드1 y4297 → 카드3 +383 → 카드2 +486)을 그대로 옮김.
   카드 높이 727 보다 간격이 작아 자연스럽게 겹쳐 보이되, 글자는 가리지 않는다. */
/* (카드 레이어 정의는 위쪽 'NHN ESG 방식' 블록에 모아 두었다) */
/* 카드 등장 효과(아래→위 페이드인)는 main.js 의 data-reveal 이 인라인으로 처리 */
/* 시안 실측(1920 기준): 카드폭 517 = 27%, 좌 216 / 중앙 450 / 우 1187.
   세로 간격은 카드 높이 대비 비율로 — 화면 폭이 달라져도 시안 리듬이 유지된다.
   카드 높이 727 기준 : 카드3 은 +383(0.527), 카드2 는 +486(0.669) 아래.
   끌어올릴 양 = (1 - 비율) × 카드높이. 카드높이 ≈ 폭 × 1.406 (727/517) */
/* 카드 — 무대 기준 절대 좌표. 가로 위치만 정하고, 세로는 JS 가 스크롤에 맞춰 흘려보낸다.
   폭 31vw = 메인페이지 Business 섹션의 사진과 같은 크기. */
/* 카드는 원래 색 그대로. 반전은 위층의 슬로건이 담당한다(메인 Business 섹션과 동일).
   폭 24.8vw = 메인 사진(31vw) 보다 20% 작게. */
/* 카드 3장은 한 묶음(.fd-values-inner)으로 함께 올라간다.
   여기서는 시안 좌표대로 자리만 잡고, 세로 이동은 묶음이 통째로 맡는다.
   시안(1920) : 폭 517 / x 216·1187·450 / y 간격 383·486 */
.fd-card{position:absolute;width:24.8vw;min-width:calc(240 * var(--u));will-change:transform}
.fd-card-l{left:8%;  top:0}
.fd-card-r{right:8%; top:145vh}
/* 세 번째 카드(지속 가능한 성장) — 정중앙보다 18.9vw 왼쪽 */
.fd-card-c{left:50%;margin-left:-31.33vw; top:290vh}
/* 카드 글자 — 메인페이지 Business 섹션과 같은 크기(26px / 15px) */
.fd-card-ko,.fd-card-en{position:relative;z-index:2}
.fd-card-img{position:relative;z-index:1}
.fd-card-ko{font-family:var(--display);font-size:calc(26 * var(--u));font-weight:700;line-height:1.2;color:#000;
    margin-bottom:calc(6 * var(--u))}
.fd-card-en{font-family:var(--display);font-size:calc(15 * var(--u));font-weight:500;line-height:1.4;color:#999}
.fd-card-img{margin-top:calc(24 * var(--u));overflow:hidden}
.fd-card-img img{width:100%;height:auto;aspect-ratio:517/615;object-fit:cover;display:block}

/* ---- 4. 미래전략 (제목 영역) ----
   앞뒤 섹션처럼 화면에 고정한 채 넘어간다 — 제목이 중앙에 머물다 다음 섹션으로 이어짐. */
.fd-strategy{position:relative;height:180vh;padding:0;background:#fff}
.fd-strategy-stage{position:sticky;top:0;height:100vh;height:100svh;
    display:flex;align-items:center;background:#fff}
.fd-strategy .fd-inner{position:relative;z-index:1}

/* ---- 4-2. 미래상 (소제목 + 아코디언) ----
   화면을 고정한 채 스크롤 → 그동안 항목이 하나씩 열린다.
   섹션 높이(220vh)가 그 '제자리 스크롤' 구간이 된다. */
/* 높이 = 항목 하나를 읽을 만큼의 스크롤 × 항목 수.
   220vh 는 스크롤 1.2화면뿐이라 항목당 0.3화면(휠 두세 번)에 다음으로 넘어갔다. */
.fd-acc-sec{position:relative;height:340vh;background:#fff}
/* 소제목 + 목록을 한 덩어리로 세로 중앙에 놓아 위아래 여백을 같게 만든다 */
.fd-acc-stage{position:sticky;top:0;height:100vh;height:100svh;
    display:flex;flex-direction:column;justify-content:center;background:#fff}
/* 폭은 .fd-inner 의 기준선(--content)을 그대로 쓴다 — width:100% 로 덮으면 화면 끝까지 늘어난다 */

/* 제목 등장 — 고정 구간 진행도에 맞춰 JS 가 opacity/transform 을 직접 준다.
   (transition 을 걸면 스크롤과 따로 놀아 '넘김' 느낌이 깨진다) */
.fd-strategy-head{opacity:0;will-change:opacity,transform}
.fd-head-mo,.fd-deco-mo{display:none}   /* 모바일에서만 — 아코디언과 같은 무대에서 보여준다 */
/* 소제목도 제목과 같이 JS 가 진행도로 페이드시킨다.
   (고정 화면 안이라 위치는 건드리지 않는다 — 흔들리면 위아래 여백이 어긋남) */
.fd-strategy-sub{opacity:0}
.fd-strategy-head{text-align:center}
.fd-strategy-head h4{font-size:calc(60 * var(--u));font-weight:800;line-height:1.2;color:#000}
.fd-strategy-head p{margin-top:calc(30 * var(--u));font-size:calc(20 * var(--u));line-height:1.55;color:#666}
/* 고정 화면 안에서는 위 여백이 필요 없다 — 소제목과 목록이 한 덩어리로 붙는다 */
.fd-strategy-sub{margin-top:0;font-size:calc(38 * var(--u));font-weight:700;line-height:1.55;color:#000}

.fd-acc{margin-top:calc(48 * var(--u))}
.fd-strategy-sub + .fd-acc{margin-top:calc(48 * var(--u))}
.fd-acc-item{position:relative;margin-bottom:calc(20 * var(--u));border-radius:calc(16 * var(--u));background:#f5f8ff;overflow:hidden}
.fd-acc-item:last-child{margin-bottom:0}
.fd-acc-head{position:relative;padding:calc(31 * var(--u)) 6.2%}
.fd-acc-head h6{max-width:72%;font-size:calc(28 * var(--u));font-weight:700;line-height:1.55;color:#000;word-break:keep-all}
/* 프리즘 장식 — 열린 항목에만 보인다 */
.fd-acc-deco{position:absolute;right:2%;top:50%;transform:translateY(-50%) scale(.6);
    width:calc(196 * var(--u));height:auto;pointer-events:none;
    opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.fd-acc-item.is-open .fd-acc-deco{opacity:1;transform:translateY(-50%) scale(1)}

/* 본문 — 열린 항목만 펼쳐진다 (높이는 JS 가 실측해 지정) */
.fd-acc-body{overflow:hidden;height:0;
    transition:height .55s cubic-bezier(.4,0,.2,1),opacity .4s ease;opacity:0}
.fd-acc-item.is-open .fd-acc-body{opacity:1}
.fd-acc-body p{padding:0 6.2% calc(31 * var(--u));max-width:72%;font-size:calc(18 * var(--u));line-height:calc(25.6 * var(--u));color:#666;word-break:keep-all}

/* 열린 항목은 배경이 진해짐 */
.fd-acc-item{transition:background .45s ease}
.fd-acc-item.is-open{background:#eef3ff}

/* ---- 5. 비전 ----
   시안: 좌측은 제목·설명·항목·버튼, 우측은 회색 라운드 박스 안에 큰 영문과 장식 이미지. */
.fd-vision{padding:0 0 calc(200 * var(--u))}
.fd-vision-inner{display:flex;gap:6%;align-items:flex-start}

.fd-vision-l{flex:1;min-width:0;padding-top:calc(10 * var(--u))}
.fd-vision-l h4{font-size:calc(42 * var(--u));font-weight:800;line-height:1.25;color:#000}
.fd-vision-desc{margin-top:calc(26 * var(--u));font-size:calc(18 * var(--u));line-height:1.6;color:#666}
.fd-vision-list{margin-top:calc(22 * var(--u));padding-left:calc(4 * var(--u));list-style:none}
.fd-vision-list li{position:relative;padding-left:calc(16 * var(--u));font-size:calc(17 * var(--u));line-height:2.05;color:#666}
.fd-vision-list li::before{content:'';position:absolute;left:0;top:.95em;
    width:calc(4 * var(--u));height:calc(4 * var(--u));border-radius:50%;background:#999}
.fd-vision-l .btn-join{margin-top:calc(42 * var(--u))}

/* 우측 회색 카드 — 이미지가 모서리에서 잘리도록 overflow 를 막는다 */
.fd-vision-r{position:relative;flex:0 0 45%;min-height:calc(440 * var(--u));
    padding:calc(44 * var(--u)) calc(44 * var(--u)) calc(48 * var(--u));border-radius:calc(20 * var(--u));background:#f5f5f5;overflow:hidden}
.fd-vision-en{position:relative;z-index:2;font-family:var(--display);font-size:calc(76 * var(--u));font-weight:800;
    line-height:1.12;letter-spacing:calc(-2 * var(--u));color:#000}
.fd-vision-ko{position:relative;z-index:2;margin-top:calc(22 * var(--u));font-size:calc(15 * var(--u));font-weight:500;color:#666}
.fd-vision-img{position:absolute;right:0;bottom:calc(-14 * var(--u));z-index:1;width:34%;display:block}

/* ---------- 서브 공통헤더 · 인사말 : 태블릿 이하 ---------- */
@media (max-width:1024px){
    .sub-head-inner,.greet-inner{width:100%;padding:0 6%}
    .sub-head-title{font-size:38px}
    /* 이름은 사진 옆에 두고, 약력만 아래로 내린다 (사진 옆 폭이 좁아 6줄이 안 들어감) */
    .greet-profile{grid-template-columns:280px 1fr;gap:0 28px}
    .greet-photo{grid-row:1;width:280px}
    .greet-role{align-self:center}
    .greet-career{grid-column:1/3;margin-top:32px}
    .greet-body{margin-left:0;margin-top:56px}
}
@media (max-width:768px){
    .sub-head{padding:26px 0 0}
    /* 아래도 위와 같은 30 — 다만 아래는 칩의 '테두리 상자'까지를 잰다.
       칩은 안쪽 여백(8)+테두리(1)가 있어 글자 기준으로 맞추면 상자가 먼저 다가와 붙어 보인다.
       (칩바가 아니라 제목에 여백을 준다 — 칩바에 주면 스크롤로 헤더에 붙었을 때도 떠 보인다) */
    .sub-head-title{margin-bottom:24.4px}
    .sub-head-inner,.greet-inner{width:100%;padding:0 20px}
    .sub-head-menu{font-size:15px}
    /* 위 여백은 글자 기준 30 — line-box 여백이 0.5 정도 붙으므로 그만큼 뺀다 */
    .sub-head-title{margin-top:30.5px;font-size:30px}

    /* 칩은 기본으로 숨긴다 — 햄버거 메뉴에 같은 목록이 있어 중복이다.
       형제 페이지를 자주 오가는 페이지만 .has-chips-mo 로 되살린다. */
    .sub-chips{display:none}

    /* 되살릴 때는 가로 스크롤 (6개라 한 줄에 안 들어간다) */
    .sub-chipbar{padding-top:0}
    .has-chips-mo .sub-chips{display:flex;gap:8px;padding:5px 0 10px;
        flex-wrap:nowrap;overflow-x:auto;
        scrollbar-width:none;-webkit-overflow-scrolling:touch;
        margin-right:-20px;padding-right:20px}
    .has-chips-mo .sub-chips::-webkit-scrollbar{display:none}
    .has-chips-mo .sub-chip{flex:none;padding:8px 16px;font-size:15px}

    /* [공통] 좁은 화면에서 칩(메뉴) 아래 ~ 본문 시작 간격은 모든 페이지 40px 로 맞춘다.
       페이지마다 값이 달라 어떤 곳은 답답해 보였다. 이 값을 바꿀 때는 아래 목록을 함께 고친다 —
       .greet · .org · .ci · .lc · .jn(가입안내·가입신청·회원사혜택) · .biz-main
       그리고 스킨 쪽의 .rg(회원가입) · .mbl(회원사 현황). */
    .greet{padding:40px 0 72px}
    .greet-profile{grid-template-columns:150px 1fr;gap:0 20px}
    .greet-photo{width:150px}
    .greet-role{gap:10px}
    .greet-role span{font-size:14px;line-height:1.4}
    .greet-role strong{font-size:32px;line-height:1.2}
    .greet-career{margin-top:18px;font-size:14px;line-height:1.6}
    .greet-body{margin-top:40px;font-size:15px;line-height:24px}
    .greet-body p{margin-bottom:32px}
    .greet-lead{font-size:17px;line-height:26px}
    /* 본문은 좁은 폭에 맞춰 알아서 흐르게 (리드 문구는 span 으로 나뉘어 두 줄 유지됨) */
    .greet-body p br{display:none}
}
@media (max-width:480px){
    .sub-head-title{font-size:26px}
    .greet-profile{grid-template-columns:132px 1fr;gap:0 16px}
    .greet-photo{width:132px}
    .greet-role{gap:8px;white-space:nowrap}   /* 협회장 · 이름을 한 줄로 */
    .greet-role span{font-size:13px}
    .greet-role strong{font-size:24px}
    .greet-lead{font-size:16px;line-height:25px}
}

/* ===================== 사업분야 레이아웃 =====================
   카카오 tech 페이지 방식:
   · 섹션마다 자기 좌측 패널을 소유 → 스크롤하면 이전 패널이 밀려나고 다음 패널이 올라옴
   · 네비만 전 구간에 떠 있어 화면상 같은 자리를 유지
   가로값은 vw/%로 두어 시안 비율(778 : 942 / 1920)을 유지                        */
.biz-layout{position:relative}

/* ---- 섹션: 좌 패널 + 우 본문 (패널이 섹션 높이만큼 늘어나도록 stretch) ---- */
.biz-sec{display:flex;align-items:stretch}

/* ---- 좌측 패널 ----
   배경만 화면에 붙어 있고(sticky), 제목은 흐름대로 흘러가 스크롤하면 사라짐.
   sticky 는 부모 박스를 벗어나지 못하므로 섹션이 끝나면 배경이 저절로 밀려 올라감. */
.biz-aside{position:relative;flex:none;width:40.52%}
.biz-aside-bg{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));
    background-size:cover;background-position:center}

/* 상단 19.23%까지 진한 검정 → 아래로 투명 */
.biz-aside-dim{position:absolute;inset:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
    background:linear-gradient(180deg,rgba(0,0,0,.8) 19.231%,rgba(0,0,0,0) 100%)}

/* ---- 제목 + 네비 — 섹션 패널들 위에 떠서 고정 (패널이 뒤에서 교체돼도 움직이지 않음) ---- */
.biz-navwrap{position:absolute;inset:0;z-index:3;pointer-events:none}
.biz-fixed{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));width:40.52%;
    display:flex;flex-direction:column;padding:calc(128 * var(--u)) 0 7.5vh 6.77vw}

/* 제목은 고정 패널 안에 있으므로 패널을 따라 올라온다.
   섹션이 자리를 잡을 무렵 나타나도록 투명도만 전환 — 너무 일찍 보이면 네비와 겹침 */
.biz-aside-title{position:absolute;top:calc(128 * var(--u));left:6.77vw;z-index:2;
    font-family:var(--display);font-weight:800;
    font-size:calc(60 * var(--u));line-height:calc(80 * var(--u));color:#fff;word-break:keep-all;
    opacity:0;transition:opacity .3s ease}
.biz-aside-title span{display:block}
.biz-sec.is-on .biz-aside-title{opacity:1}

.biz-nav{margin-top:auto}
.biz-nav li{margin-bottom:calc(20 * var(--u))}
.biz-nav li:last-child{margin-bottom:0}
.biz-nav a{display:inline-block;pointer-events:auto;font-family:var(--display);font-weight:700;
    font-size:calc(25 * var(--u));line-height:calc(37 * var(--u));color:rgba(255,255,255,.5);transition:color .3s,padding-left .3s}
.biz-nav a:hover{color:rgba(255,255,255,.8)}
.biz-nav li.is-active a{position:relative;padding-left:calc(35 * var(--u));color:#fff}
/* 원본은 왼쪽 화살표 — 시안대로 좌우 반전해 오른쪽(→)으로 사용 */
.biz-nav li.is-active a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(-1);
    width:calc(22 * var(--u));height:calc(22 * var(--u));background:url('../img/biz-arrow.png') no-repeat center/contain}

/* ---- 우측 본문 ---- */
.biz-main{flex:1;min-width:0;padding:calc(138 * var(--u)) 6.77vw calc(136 * var(--u)) 3.65vw}

/* ===================== 아코디언 ===================== */
.biz-acc-item{border-bottom:1px solid #e0e0e0}
/* 그 탭에 아직 항목이 없을 때 (게시판을 만들기 전) */
.biz-empty{padding:calc(40 * var(--u)) 0;font-size:calc(18 * var(--u));color:#999}
.biz-acc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(20 * var(--u));
    padding-bottom:calc(37 * var(--u));cursor:pointer;user-select:none}
.biz-acc-item.is-open .biz-acc-head{padding-bottom:0}
.biz-acc-item + .biz-acc-item .biz-acc-head{margin-top:calc(33 * var(--u))}

.biz-acc-title{font-size:calc(37 * var(--u));font-weight:700;line-height:calc(44 * var(--u));color:#000;transition:opacity .3s}
.biz-acc-head:hover .biz-acc-title{opacity:.6}
.biz-acc-icon{flex:none;font-size:calc(40 * var(--u));line-height:calc(44 * var(--u));font-weight:400;color:rgba(0,0,0,.4)}

/* ---- 관리자에게만 보이는 손질 단추 ----
   공지사항처럼 보고 있는 자리에서 바로 쓰고 고칠 수 있게 둔다.
   본문 디자인을 흐트러뜨리지 않도록 작은 알약 모양으로, 평소에는 옅게 둔다. */
.biz-adm{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));margin-bottom:calc(24 * var(--u))}
.biz-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.biz-adm-btn:hover{border-color:var(--btn);color:var(--btn)}
/* 항목 제목 옆 '수정' — 접기·펴기 줄 안에 들어가므로 세로 가운데가 아니라 글자 첫 줄에 맞춘다 */
.biz-adm-edit{flex:none;align-self:center;margin-left:auto;
    display:inline-flex;align-items:center;height:calc(32 * var(--u));padding:0 calc(14 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(16 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text);opacity:.55;transition:opacity .2s}
.biz-acc-head:hover .biz-adm-edit{opacity:1}
.biz-adm-edit:hover{border-color:var(--btn);color:var(--btn)}
.biz-acc-icon::before{content:'+'}
.biz-acc-item.is-open .biz-acc-icon::before{content:'-'}

/* 높이는 JS가 제어 — 열림/닫힘이 부드럽게 이어짐.
   아래 여백은 반드시 안쪽(inner)에 둘 것: 패널에 두면 접어도 그만큼 높이가 남아
   닫힌 줄이 다른 항목보다 높아지고 내용이 비침 */
.biz-acc-panel{overflow:hidden;transition:height .45s cubic-bezier(.4,0,.2,1)}
.biz-acc-item:not(.is-open) .biz-acc-panel{height:0}
.biz-acc-inner{padding-bottom:calc(85 * var(--u))}
.biz-acc-inner:empty{padding-bottom:0}  /* 시안에 내용이 없는 항목 — 열어도 빈 여백이 생기지 않게 */

/* ---- 패널 내부 ---- */
.biz-date{margin-top:calc(23 * var(--u));font-size:calc(18 * var(--u));line-height:calc(25.6 * var(--u));color:#666}
.biz-link{display:inline-flex;align-items:center;gap:calc(9 * var(--u));margin-top:calc(23 * var(--u));font-size:calc(18 * var(--u));line-height:1.5;color:#000}
.biz-link img{width:calc(26 * var(--u));height:calc(26 * var(--u));flex:none}

.biz-hero{margin-top:calc(85 * var(--u))}
.biz-hero img{width:100%;height:auto;display:block}

.biz-block{margin-top:calc(85 * var(--u))}
.biz-block-title{display:flex;align-items:center;gap:calc(9 * var(--u));font-size:calc(28 * var(--u));font-weight:600;line-height:calc(33 * var(--u));color:#000}
.biz-block-title::before{content:'';flex:none;width:calc(2 * var(--u));height:calc(24 * var(--u));background:#000}

.biz-block-body{margin-top:calc(23 * var(--u));font-size:calc(18 * var(--u));line-height:calc(25.6 * var(--u));color:#666}
.biz-dash>li{position:relative;padding-left:calc(14 * var(--u))}
.biz-dash>li::before{content:'-';position:absolute;left:0;top:0}
.biz-dot{padding-left:calc(27 * var(--u))}
.biz-dot li{list-style:disc}
/* 세부 추진 내용처럼 하위 목록이 있는 그룹 사이는 한 줄 띄움 */
.biz-dash>li>.biz-dot{margin-bottom:calc(25.6 * var(--u))}
.biz-dash>li:last-child>.biz-dot{margin-bottom:0}

/* ===================== 반응형 (1차 대응 — 정밀 조정은 추후) ===================== */
@media (max-width:1280px){
    .biz-aside-title{font-size:48px;line-height:64px}
    .biz-nav a{font-size:22px}
    .biz-acc-title{font-size:30px;line-height:38px}
    .biz-acc-icon{font-size:34px;line-height:38px}
    .biz-block-title{font-size:24px}
}
/* ---------- 모바일 : 좌우 2단을 위아래로 쌓음 ----------
   · 카테고리 네비 → 헤더 아래 붙는 다크 탭바 (어느 카테고리인지 계속 보임)
   · 섹션마다 배경 이미지 밴드 + 제목 (PC의 구분 리듬을 유지)          */
@media (max-width:1024px){
    .biz-sec{display:block}

    /* 카테고리 탭바 — 헤더 아래에 붙어 따라옴.
       4칸을 균등 분할하고 각 칸에 해당 카테고리 배경 이미지를 깖.
       활성/비활성은 밑줄이 아니라 위에 덮는 어둠의 농도로 구분한다. */
    /* 아래 여백은 두지 않는다 — 제목의 margin-bottom(24.4)이 이미 칩까지의 간격을 맡고 있고,
       여기에 22 를 더하면 다른 서브페이지(CI · 연혁 …)보다 그만큼 벌어진다.
       탭바 안쪽 여백(.biz-fixed 12)까지 감안해 제목 쪽에서 그만큼 덜어낸다. */
    body.biz-page .sub-head{display:block;padding:26px 0 0}
    body.biz-page .sub-head-title{margin-bottom:17.4px}

    /* 스크롤해도 메뉴만 헤더 아래 붙어 따라온다 (사업분야 탭바와 같은 방식) */
    .has-chips-mo{position:sticky;top:var(--hh);z-index:5;background:#fff}

    /* 고른 섹션 하나만 보여 준다 (JS 가 .is-shown 을 붙인다).
       세로로 이어 붙이면 어느 메뉴로 들어오든 스크롤이 내려가 상단 헤더가 밀려난다. */
    .biz-sec{display:none}
    .biz-sec.is-shown{display:block}

    /* 상단 메뉴 — 서브페이지 공통 칩(.sub-chips)과 같은 모양으로 통일한다.
       섹션 이동 역할이라 sticky 는 유지한다. */
    .biz-navwrap{position:sticky;inset:auto;top:var(--hh);z-index:5;
        background:#fff;pointer-events:auto}
    .biz-fixed{position:static;display:block;width:100%;height:auto;padding:12px 20px}
    .biz-nav{margin:0}
    /* 4개가 한 줄에 안 들어가므로 가로 스크롤 (스크롤바는 감춤) */
    .biz-nav ul{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
        scrollbar-width:none;-webkit-overflow-scrolling:touch;
        margin-right:-20px;padding-right:20px}
    .biz-nav ul::-webkit-scrollbar{display:none}
    .biz-nav li{flex:none;position:relative;margin:0;background:none;overflow:visible}
    .biz-nav li::before,.biz-nav li::after{display:none}   /* 배경 사진·덮개는 쓰지 않는다 */
    .biz-nav li + li{box-shadow:none}

    .biz-nav a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
        height:auto;padding:8px 16px;border:1px solid transparent;border-radius:999px;
        white-space:nowrap;font-family:var(--sans);
        font-size:15px;font-weight:500;line-height:1.2;color:rgba(0,0,0,.3);
        transition:color .2s,border-color .2s}
    .biz-nav li.is-active a{padding-left:16px;border-color:#000;color:rgba(0,0,0,.7);font-weight:500}
    .biz-nav li.is-active a::before{display:none}   /* PC용 화살표는 감춤 */

    /* 섹션 머리 — 배경 이미지 위에 카테고리 제목 */
    .biz-aside{position:relative;width:100%;height:210px}
    .biz-aside-bg{position:absolute;inset:0;height:100%}
    .biz-aside-title{position:absolute;top:auto;bottom:28px;left:22px;opacity:1;font-size:30px;line-height:38px}

    /* 본문 */
    .biz-main{padding:36px 22px 60px}
    .biz-hero,.biz-block{margin-top:40px}
    .biz-acc-inner{padding-bottom:48px}
    .biz-acc-head{padding-bottom:22px}
    .biz-acc-item + .biz-acc-item .biz-acc-head{margin-top:22px}
    .biz-date,.biz-link{margin-top:14px}
    .biz-block-body{margin-top:14px}
    .biz-link{line-height:32px}
}
@media (max-width:640px){
    /* 칩 크기는 좁은 화면에서도 서브페이지 공통 칩(.sub-chip)과 같게 둔다 —
       여기만 줄이면 사업분야 탭만 작아 보인다 */
    .biz-aside{height:185px}
    .biz-aside-title{bottom:24px;left:20px;font-size:26px;line-height:33px}
    .biz-acc-title{font-size:20px;line-height:28px}
    .biz-acc-icon{font-size:26px;line-height:28px}
    .biz-block-title{font-size:18px;line-height:26px}
    .biz-block-title::before{height:18px}
    .biz-block-body,.biz-date,.biz-link{font-size:15px;line-height:23px}
    .biz-dot{padding-left:18px}
    .biz-main{padding:40px 20px 48px}
    .biz-hero,.biz-block{margin-top:32px}
    .biz-acc-inner{padding-bottom:36px}
}

/* ===================== 설립목적 : 모바일 =====================
   PC 인터랙션(띠 확장 → 슬로건 고정 → 카드 상승 → 섹션 넘김)은 그대로 두고
   크기·배치만 좁은 화면에 맞춘다. 스크롤 구간은 손가락 스크롤 양을 고려해 줄인다. */
@media (max-width:768px){
    .fd-inner{padding:0 20px}

    /* ---- 1. 히어로 : NHN 모바일 방식 ----
       띠가 커지는 연출 없이, 처음부터 이미지가 화면을 꽉 채운 상태로 시작한다.
       스크롤하면 그 위의 문구만 대제목 → 설명문으로 교체된다.
       헤더는 덮지 않고 그 아래에서 시작 (NHN 도 로고·햄버거가 계속 보인다). */
    /* 스크롤 1화면으로는 마지막 문장(5줄)이 0.3화면만 머물다 밀려난다 — 2화면으로 늘린다 */
    .fd-hero{height:300vh;margin-top:0}
    /* 헤더 아래에 붙여 고정한다. top:0 으로 두면 무대가 헤더 뒤로 올라가면서
       화면 하단에 헤더 높이만큼 흰 띠가 남는다(=하단 밀림). */
    .fd-hero-stage{top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));gap:0}
    .fd-hero-t{display:none}        /* 위아래로 밀려나던 제목은 쓰지 않는다 */
    .fd-band{width:100%;height:100%;border-radius:0}
    .fd-band-dim{background:rgba(0,0,0,.35)}

    /* 문구 — 한 줄 고정을 풀고 단어 단위로 접히게.
       NHN 첫 화면 비율에 맞춤: 제목이 화면 폭의 9%(두 줄), 줄간 1.6,
       그리고 정중앙이 아니라 34px 위(NHN 이 쓰는 값)에 놓인다. */
    .fd-lead{font-size:35px;line-height:1.55;white-space:normal;word-break:keep-all;width:84%;
        transform:translate(-50%,calc(-50% - 34px))}
    .fd-lead-sub{display:block;margin-top:18px;font-size:15px;font-weight:500;
        line-height:1.5;letter-spacing:-.2px}
    /* 지정된 줄바꿈이 한 줄에 온전히 들어가도록 폭을 넓히고 자간을 살짝 좁힌다 */
    .fd-desc{font-size:16px;line-height:1.8;width:90%;letter-spacing:-.3px}
    .br-pc{display:none}
    .br-mo{display:inline}

    /* ---- 2. 슬로건 ----
       구간이 길면 카드 사이가 벌어져 빈 화면이 오래 이어진다 (NHN 모바일은 훨씬 짧다) */
    /* 카드 사이를 벌린 만큼 흐를 거리도 늘려 준다 — 안 늘리면 셋이 후루룩 지나간다 */
    .fd-values{height:300vh}

    .fd-slogan h4{font-size:32px;line-height:44px;letter-spacing:-.5px}
    .fd-slogan p{margin-top:12px;padding:0 24px;font-size:13px;line-height:1.6}
    .fd-stage::before{width:180vw;height:180vw}

    /* ---- 3. 카드 : NHN 모바일처럼 좌·우로 엇갈리게 ----
       폭을 46vw 로 잡으면 좌 카드(5%~51%)와 우 카드(49%~95%)가 가로로 거의 겹치지 않는다.
       → 세로 시차를 좁혀 두 장이 동시에 흘러도 서로 부딪히지 않는다.
       (폭을 키우면 가로로 포개져 겹쳐 보이고, 뒤의 슬로건도 가려 반전 효과가 죽는다) */
    /* 배치는 좌 → 우 → 좌. 이어서 나오는 두 장(우·좌)이 가로로 거의 안 겹치도록
       폭 44vw + 좌우 여백 4% 로 맞춘다 (좌 4~48% / 우 52~96% / 셋째 10~54%). */
    /* 카드 3장을 한 묶음으로 — 좌표로 따로 띄우지 않고 세로로 이어 붙인 뒤,
       묶음(.fd-values-inner) 전체를 스크롤에 맞춰 통째로 올린다.
       장마다 시차를 주면 서로 어긋나 보인다. */
    /* 높이는 반드시 내용에 맡긴다(auto). PC 값(355vh)을 물려받으면 카드가 세로로
       이어 붙는 모바일에서는 카드 아래로 2.4화면이 빈 채 남고, 그 빈 곳까지
       스크롤로 밀어 올리느라 마지막 카드가 지나간 뒤 한참 빈 화면이 이어진다. */
    .fd-values-inner{position:absolute;left:0;right:0;top:0;bottom:auto;height:auto;
        z-index:2;will-change:transform}
    /* 사진 크기는 셋 다 같게(41vw). 리듬은 좌·우 배치와 카드별 속도차로만 준다. */
    /* 카드 사이는 화면 높이에 견줘 잡는다 — 80px 로는 세 장이 한 화면에 다 들어와
       '한 장씩 지나간다'는 느낌이 없어진다. 35vh 면 앞 장이 위로 빠질 즈음 다음 장이 들어온다. */
    .fd-card{position:relative;top:auto;left:auto;right:auto;
        width:41vw;min-width:0;margin:0 0 35vh;will-change:transform}
    .fd-card:last-child{margin-bottom:0}
    /* 아래 여백은 위 .fd-card 와 같은 기준(vh)으로 — px 로 두면 이 규칙이 뒤에 있어
       위에서 잡은 간격을 도로 덮어쓴다. 둘을 조금 달리해 리듬만 준다. */
    .fd-card-l{margin-left:4%;margin-bottom:32vh}
    .fd-card-r{margin-left:auto;margin-right:4%;margin-bottom:38vh}
    .fd-card-c{margin-left:15%}
    .fd-card-ko{font-size:15px}
    .fd-card-en{font-size:11px}
    .fd-card-img{margin-top:10px}

    /* 장식 — 카드가 커진 만큼 함께 키운다.
       top 은 반드시 다시 잡는다. PC 값(8 · 138 · 298vh)을 그대로 물려받으면
       카드가 훨씬 촘촘히 쌓이는 모바일에서는 카드가 다 지나간 뒤에 장식만 떠 있게 된다.
       모바일 카드는 0 · 39 · 81vh 에 놓이므로 그 옆에 맞춰 세운다. */
    .fd-deco-glass1{right:2%;top:4vh; width:20%}
    .fd-deco-glass2{left:2%; top:46vh;width:17%}
    .fd-deco-glass3{left:6%; top:88vh;width:18%}
    .fd-deco-orb{right:4%;top:-2%;width:30%}

    /* ---- 4. 미래전략 ----
       모바일에서는 이 섹션을 쓰지 않는다. 무대 하나가 통째로 빠져나가는
       한 화면이 더 생겨 스크롤만 길어진다. 제목은 아래 아코디언 무대에서 함께 보여준다. */
    .fd-strategy{display:none}

    /* 아코디언 무대 안의 미래전략 제목 — 화면 중앙에 겹쳐 두고
       스크롤에 따라 제목 → 아코디언으로 자리를 넘겨준다. */
    .fd-acc-stage > .fd-inner{position:relative}
    .fd-head-mo{display:block;position:absolute;left:0;right:0;top:50%;
        padding:0 20px;text-align:center;transform:translateY(-50%);pointer-events:none}
    .fd-acc-wrap{will-change:opacity,transform}
    .fd-deco-mo{display:block;right:4%;top:14%;width:30%}
    .fd-strategy-head h4{font-size:28px;line-height:1.3;word-break:keep-all}
    .fd-strategy-head p{margin-top:16px;font-size:14px;line-height:1.6;word-break:keep-all}

    /* ---- 4-2. 미래상 아코디언 ---- */
    /* 항목이 하나씩 열리는 구간 — (높이 - 100vh) 를 항목 수로 나눈 값이 항목당 스크롤 거리다.
       이게 손가락 스와이프 한 번(500~900px)보다 훨씬 짧으면 순식간에 다 지나가 버린다.
       4항목 × 약 330px 이 되도록 잡는다. */
    /* 앞 20% 는 미래전략 제목, 나머지로 항목 4개를 연다.
       300vh 일 때는 항목당 0.37화면이라 스와이프 한두 번에 다음으로 넘어갔다. */
    .fd-acc-sec{height:400vh}
    /* 항목이 작으면 고정된 화면 안에서 위아래가 휑하게 남는다 — 넉넉히 키워 화면을 채운다 */
    /* 기본값이 opacity:0 이고 그걸 켜 주는 건 PC 쪽 JS 뿐이다.
       모바일은 묶음(.fd-acc-wrap) 전체를 띄우는 방식이라 그 코드에 닿지 않아
       소제목이 계속 투명한 채로 남아 있었다 — 여기서 켜 준다. */
    .fd-strategy-sub{opacity:1;font-size:23px;line-height:1.45;word-break:keep-all}
    .fd-strategy-sub + .fd-acc,.fd-acc{margin-top:40px}
    .fd-acc-item{margin-bottom:20px;border-radius:14px}
    .fd-acc-head{padding:38px 22px}
    .fd-acc-head h6{max-width:100%;font-size:19px;line-height:1.5}
    .fd-acc-body p{padding:0 22px 28px;max-width:100%;font-size:15px;line-height:1.75}
    .fd-acc-deco{display:none}     /* 좁은 폭에서는 글자와 겹쳐 지저분해진다 */

    /* ---- 5. 비전 : 좌우 2단 → 세로 1단 ---- */
    .fd-vision{padding:0 0 90px}
    .fd-vision-inner{display:block}
    .fd-vision-l{padding-top:0}
    .fd-vision-l h4{font-size:26px}
    .fd-vision-desc{margin-top:16px;font-size:15px;word-break:keep-all}
    .fd-vision-list{margin-top:16px}
    .fd-vision-list li{font-size:15px;line-height:1.95}
    .fd-vision-l .btn-join{margin-top:28px}
    .fd-vision-r{margin-top:40px;min-height:250px;padding:28px 24px 32px;border-radius:16px}
    .fd-vision-en{font-size:38px;line-height:1.15;letter-spacing:-1px}
    .fd-vision-ko{margin-top:14px;font-size:14px}
    .fd-vision-img{width:38%;bottom:-8px}
}

/* 화면이 짧은 폰 — 미래상 아코디언 여백 줄이기.
   아코디언은 고정된 한 화면(sticky) 안에 통째로 들어가야 하는데,
   위 값으로는 항목 넷 + 열린 본문이 714px 이나 되어
   세로가 짧은 기기(예: 375x667)에서는 화면 아래로 넘쳐
   다음 섹션('미래를 향한 연결')과 겹쳐 보였다.
   글자 크기는 거의 그대로 두고 빈 자리만 줄여 500px 안쪽으로 맞춘다. */
@media (max-width:768px) and (max-height:820px){
    .fd-strategy-sub{font-size:20px}
    .fd-strategy-sub + .fd-acc,.fd-acc{margin-top:24px}
    .fd-acc-item{margin-bottom:12px}
    .fd-acc-head{padding:20px 18px}
    .fd-acc-head h6{font-size:17px;line-height:1.45}
    .fd-acc-body p{padding:0 18px 20px;font-size:14px;line-height:1.65}
}

@media (max-width:480px){
    /* 제목 크기는 NHN 비율(화면 폭의 9%)이 곧 이 구간의 값이므로 그대로 둔다 */
    .fd-lead-sub{margin-top:16px;font-size:14px}
    .fd-desc{font-size:15px;line-height:1.75}
    .fd-slogan h4{font-size:26px;line-height:36px}
    .fd-strategy-head h4{font-size:23px}
    .fd-strategy-sub{font-size:18px}
    .fd-acc-head h6{font-size:16px}
    .fd-vision-l h4{font-size:23px}
    .fd-vision-en{font-size:32px}
}

/* ===================== 연혁 =====================
   NHN 회사소개(연혁)와 같은 방식:
   연도마다 무대를 화면에 고정하고, 배경 이미지가 배너 크기에서 화면 전체로 커진다.
   커질수록 그 위의 글자는 검정 → 흰색으로 바뀐다.
   크기·모서리·글자색은 모두 JS(history.js)가 스크롤 진행도로 계산한다.

   시안 실측(1920 기준) : 배너 1257×262, 좌우 여백 230.

   크기는 var(--u) 를 곱해 화면 폭에 맞춰 함께 커지게 한다(시안 값 그대로 적는다).
   배너 '폭' 만은 % 로 둔다 — 화면을 채워 가는 요소라 화면 대비 비율이 곧 의미다.
   본문 설명글은 px 로 고정한다(좁은 화면에서 읽기 어려워지지 않도록). */
.hs{position:relative;background:#fff;
    --banner-w:calc(1257 * var(--u));    /* 시안 1257px */
    --banner-h:calc(262 * var(--u));}

/* 한 연도 = 200vh. (높이 - 100vh) 가 확대에 쓰이는 구간이다.
   더 길게 잡으면 다 커진 뒤 아무 변화 없이 스크롤만 하는 구간이 길어진다. */
.hs-year{position:relative;height:200vh}
.hs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
    display:flex;align-items:center;background:#fff}

/* 배경 — 처음에는 가운데 배너, 끝에는 화면 전체.
   시안의 배너는 모서리를 굴리지 않는다(각진 사각형). */
.hs-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:var(--banner-w);height:var(--banner-h);
    border-radius:0;overflow:hidden;z-index:0;
    will-change:width,height}
.hs-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* 배너의 '시작 크기'를 재기 위한 보이지 않는 자.
   JS 가 .hs-bg 의 크기를 인라인으로 덮어쓰기 때문에 원래 값을 여기서 읽는다.
   (CSS 변수는 getComputedStyle 로 읽으면 calc(...) 문자열 그대로라 계산이 안 된다) */
.hs-probe{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;z-index:-1;
    width:var(--banner-w);height:var(--banner-h);border-radius:0}
/* 다 확대된 상태에서 이미지 위에 검정 60% 가 덮인다.
   불투명도는 JS 가 확대 진행도에 맞춰 0 → 1 로 올려, 커지는 동안 서서히 짙어진다. */
.hs-bg-dim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0}

/* 이 페이지의 기준선은 배너와 같은 1257px (서브헤더의 1460 과 다르다 — 시안 실측) */
/* position 을 주지 않는다 — 안에 있는 이미지가 absolute 로 뜰 때 기준이 무대(.hs-stage)여야
   화면 전체까지 정확히 커진다. 쌓임 순서는 .hs-num/.hs-list 의 z-index 로 잡는다. */
.hs-inner{width:calc(1257 * var(--u));margin:0 auto}

/* 연도 — 시안: Pretendard Bold 89.5px / 행간 94 / 자간 -1.8 / #212126 */
.hs-num{font-family:var(--sans);font-size:calc(89.5 * var(--u));font-weight:700;
    line-height:calc(94 * var(--u));letter-spacing:calc(-1.8 * var(--u));
    color:#212126;transition:color .35s ease}

/* 배너가 놓이던 자리. 확대될수록 0 이 되어 연도와 목록이 붙는다 */
.hs-gap{height:var(--banner-h)}
/* 글자는 늘 이미지 위에 (이미지가 같은 부모 안에 있으므로 순서를 명시한다) */
.hs-num,.hs-list{position:relative;z-index:2}
.hs-cover{display:none}   /* 이미지 위에 얹는 글 — 모바일에서만 */

/* 항목 — 시안: [번호 … 제목] 덩어리와 설명 666px 이 좌우로 벌어진다.
   왼쪽 덩어리는 시안이 254.53px 이었으나, 'Gen-AI 2023 Summit 개최' 처럼 긴 제목이
   한 줄에 못 들어가 '개최' 만 다음 줄로 떨어졌다. 재어 보니 제목에 184px 이 필요한데
   번호(20px)와 사이 여백(40u)을 빼고 나면 170px 밖에 남지 않았다.
   320u 로 넓혀 제목 자리를 224px 확보한다 (가운데 빈 자리에서 가져오므로 설명은 그대로). */
.hs-list{list-style:none}
.hs-item{display:flex;align-items:flex-start;justify-content:space-between;
    padding:calc(30 * var(--u)) 0}
/* 월 번호와 제목은 왼쪽으로 붙인다 (양끝으로 벌리면 제목이 오른쪽에 떨어져 읽기 나쁘다) */
/* 번호는 제목 첫 줄에 맞춰 위로 붙인다 —
   가운데로 맞추면 제목이 두 줄이 되는 순간 번호만 아래로 내려가 오른쪽 설명과도 어긋난다 */
.hs-item-l{display:flex;align-items:flex-start;gap:calc(40 * var(--u));
    flex:0 0 auto;width:calc(320 * var(--u))}
.hs-no{font-family:var(--sans);font-size:calc(18 * var(--u));font-weight:700;
    line-height:calc(30 * var(--u));color:#000;transition:color .35s ease}
.hs-title{font-family:var(--sans);font-size:calc(18 * var(--u));font-weight:600;
    line-height:calc(30 * var(--u));color:#212126;
    word-break:keep-all;transition:color .35s ease}
.hs-desc{flex:0 0 auto;width:calc(666 * var(--u));
    font-family:var(--sans);font-size:calc(18 * var(--u));font-weight:400;
    line-height:calc(30 * var(--u));color:#212126;
    word-break:keep-all;transition:color .35s ease}

/* 확대가 끝나면 글자를 흰색으로 (JS 가 클래스를 붙인다) */
.hs-stage.is-full .hs-num,
.hs-stage.is-full .hs-no,
.hs-stage.is-full .hs-title{color:#fff}
.hs-stage.is-full .hs-desc{color:rgba(255,255,255,.78)}

/* 태블릿 이하 — 여기부터는 --u 유동을 끊고 화면에 맞춘 고정값을 쓴다.
   좁은 폭에서 비례로 줄이면 글자가 읽기 어려울 만큼 작아진다. */
@media (max-width:1024px){
    .hs-inner{width:100%;padding:0 6%}
    .hs-num{font-size:60px;line-height:1.15;letter-spacing:-1.5px}
    .hs-item-l{width:44%}
    .hs-no{font-size:17px;line-height:1.6}
    .hs-title{font-size:18px;line-height:1.6}
    .hs-desc{width:50%;font-size:16px;line-height:1.7}
    .hs-item{padding:26px 0}
}

/* 모바일 — NHN 회사소개 모바일 방식.
   이미지를 화면 전체로 키우는 연출은 쓰지 않고, 연도 · 이미지 카드 · 항목을
   한 화면 안에 세로로 담는다. (JS 도 모바일에서는 확대를 건너뛴다) */
/* 모바일 — 확대 연출을 쓰지 않는다(화면에 붙들어 둘 이유가 없다).
   긴 설명글은 이미지 위로 옮기고, 이미지 아래에는 연도와 [번호 · 제목]만 남긴다. */
@media (max-width:768px){
    .hs{--banner-w:100%; --banner-h:88vh}
    .hs-year{height:auto}
    .hs-stage{position:static;height:auto;display:block;padding:52px 0}
    /* 첫 연도는 칩바 바로 아래에 붙인다 */
    .hs-year:first-child .hs-stage{padding-top:0}
    /* 이미지가 먼저, 연도·목록이 그 아래 (PC 는 연도 → 이미지 → 목록 순서) */
    .hs-inner{display:flex;flex-direction:column;padding:0 20px}
    .hs-gap{order:1;position:relative;height:var(--banner-h);
        margin:0 -20px 30px}
    .hs-num{order:2}
    .hs-list{order:3}

    .hs-bg{position:absolute;inset:0;transform:none;
        width:auto;height:auto;border-radius:0}
    .hs-bg-dim{opacity:1;background:rgba(0,0,0,.42)}

    /* 이미지 위의 글 */
    .hs-cover{display:block;position:absolute;left:0;right:0;top:0;z-index:2;
        padding:64px 26px 0;color:#fff}
    /* 페이지 제목(.sub-head-title)과 같은 층이라 크기도 같게 둔다 — 아래 [글자 위계] 참고 */
    .hs-headline{font-size:30px;font-weight:700;line-height:1.35;letter-spacing:-.5px;
        word-break:keep-all}
    .hs-cover-year{margin-top:34px;font-size:17px;font-weight:700;letter-spacing:-.2px}
    .hs-lead{margin-top:16px;font-size:15px;line-height:1.7;
        color:rgba(255,255,255,.88);word-break:keep-all}

    /* 화면에 들어오면 한 줄씩 차례로 떠오른다 (JS 가 .is-in 을 붙인다) */
    .hs-cover > *{opacity:0;transform:translateY(20px);
        transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}
    .hs-cover.is-in > *{opacity:1;transform:none}
    .hs-cover.is-in .hs-cover-year{transition-delay:.12s}
    .hs-cover.is-in .hs-lead{transition-delay:.24s}

    /* 이미지 아래 — 연도와 [번호 · 제목] 목록 */
    .hs-num{font-size:50px;line-height:1.15;letter-spacing:-1.4px;margin-bottom:22px}
    .hs-item{display:flex;align-items:baseline;gap:40px;padding:0 0 26px}
    .hs-item + .hs-item{border-top:0;padding-top:0}
    .hs-item-l{display:contents}
    .hs-no{flex:0 0 auto;font-size:16px;font-weight:700;color:#212126}
    .hs-title{flex:1;min-width:0;font-size:16px;font-weight:400;line-height:1.5;
        color:#212126;word-break:keep-all}
    .hs-desc{display:none}   /* 긴 설명은 이미지 위(.hs-lead)로 옮겼다 */
}

@media (max-width:480px){
    .hs{--banner-h:86vh}
    .hs-headline{font-size:26px}   /* 페이지 제목(.sub-head-title)과 같은 크기 */
    .hs-lead{font-size:14px}
    .hs-num{font-size:50px}
    .hs-no,.hs-title{font-size:15px}
}

/* ===================== 협회소개 · 조직구성 =====================
   시안(Figma 464:578) 1920 기준.
   임원 카드는 1407 폭의 연회색 판이 22 간격으로 이어지고,
   그 아래에 흰 상자 안의 조직도가 온다.                             */
.org{padding:var(--sub-top) 0 var(--sub-bottom)}

/* [공통] 좁은 화면 글자 위계 — 같은 층은 같은 크기로 둔다.
     페이지 제목   26px / 700   .sub-head-title · .hs-headline(연혁 배너 제목)
     섹션 제목     20px / 700   .jn-sec-title · .mbl-sec-title · .rg-sec-title · .ci-title
                                (파란 점이 붙는 제목들. 뉴스 상세 제목도 같은 층)
     소제목        16px / 700   .lc-group-title
     카드 제목     14px / 700   회사명 · 글 제목
     입력칸 이름   14px / 700   .nw-label
     본문          15px / 400
   층을 바꿀 때는 위 목록을 함께 고쳐 어긋나지 않게 한다. */

/* [공통] 본문 덩어리의 가로 폭은 상단(메뉴명 · 페이지명 · 칩)과 같은 --content 를 쓴다.
   시안에서 페이지마다 1407 · 1445 · 1500 처럼 조금씩 달라 왼쪽 줄이 어긋나 보였다.
   조직도·지도처럼 안에 좌표로 배치한 그림은 폭을 바꾸면 틀어지므로 예외로 둔다. */

/* ---- 임원 카드 ---- */
.org-list{width:var(--content);margin:0 auto}
.org-card{display:flex;gap:calc(41 * var(--u));
    min-height:calc(317 * var(--u));padding:calc(39 * var(--u)) calc(61 * var(--u));
    background:#f9fbfc}
.org-card + .org-card{margin-top:calc(22 * var(--u))}

.org-photo{flex:none;width:calc(180 * var(--u))}
.org-photo img{width:100%;height:auto;aspect-ratio:180/240;object-fit:cover;display:block}
/* 사진을 아직 안 올린 사람 — 자리는 잡아 두어야 옆 글이 밀리지 않는다 */
.org-photo.is-empty{aspect-ratio:180/240;background:#f2f4f6;border-radius:calc(4 * var(--u))}

/* 명단이 아직 없을 때 (게시판을 만들기 전) */
.org-empty{width:var(--content);margin:0 auto;padding:calc(60 * var(--u)) 0;
    font-size:calc(18 * var(--u));color:#999}

/* 관리자에게만 보이는 손질 단추 — 본문 디자인을 흐트러뜨리지 않게 작게 */
.org-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.org-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.org-adm-btn:hover{border-color:var(--btn);color:var(--btn)}
.org-adm-edit{margin-left:calc(6 * var(--u));
    display:inline-flex;align-items:center;height:calc(28 * var(--u));padding:0 calc(12 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(14 * var(--u));
    font-size:calc(13 * var(--u));font-weight:500;color:var(--btn-text);opacity:.55;transition:opacity .2s}
.org-card:hover .org-adm-edit{opacity:1}
.org-adm-edit:hover{border-color:var(--btn);color:var(--btn)}

/* 직책과 이름 — 크기가 달라 baseline 으로 맞추면 작은 쪽이 처진다 */
.org-name{display:flex;align-items:center;gap:calc(10 * var(--u));
    font-weight:700;color:#000;letter-spacing:calc(-1.146 * var(--u));white-space:nowrap}
.org-name span{font-size:calc(22 * var(--u))}
.org-name strong{font-size:calc(24 * var(--u));font-weight:700}

/* 약력 — 사람에 따라 한 칸이거나 두 칸이다 (조재빈 · 채정우).
   칸 폭은 내용에 맡기고 사이 간격만 40 으로 고정해야 시안과 같은 자리에 온다. */
.org-career{display:flex;margin-top:calc(37 * var(--u));
    font-size:calc(18 * var(--u));line-height:1.6;color:#555;
    letter-spacing:calc(-0.32 * var(--u));word-break:keep-all}
.org-career ul + ul{margin-left:calc(40 * var(--u))}
.org-career li{position:relative;padding-left:calc(12 * var(--u))}
.org-career li::before{content:'·';position:absolute;left:0;top:0}

/* ---- 조직도 ----
   선을 SVG 로 얹으면 화면 폭에 따라 선만 따로 늘어나 노드와 어긋난다.
   노드도 선도 같은 --u 좌표계로 그려 항상 붙어 있게 한다. */
/* 도표만 쓰는 기준 단위.
   도표는 알약 위치가 좌표로 박혀 있어 값을 하나하나 줄이면 선과 알약이 어긋난다.
   그래서 도표 안에서만 쓰는 단위를 두고 그 값만 줄인다 — 알약·글자·선·여백이 함께 줄어든다.
   시안(1.0)보다 작게 두는 것은 도표가 화면에서 너무 크게 보였기 때문이다. */
.org-chart{margin-top:calc(115 * var(--u));--ou:calc(var(--u) * .8)}
.org-chart-box{position:relative;width:calc(1446 * var(--ou));height:calc(683 * var(--ou));
    margin:0 auto;background:#fdfeff;border:1px solid rgba(0,0,0,.13);
    border-radius:calc(20 * var(--ou))}

.org-chart-box .oc-node{position:absolute;display:flex;align-items:center;justify-content:center;
    width:calc(267 * var(--ou));height:calc(85 * var(--ou));border-radius:999px;
    font-size:calc(25.467 * var(--ou));font-weight:700;letter-spacing:calc(-1.146 * var(--ou));
    color:#fff;white-space:nowrap}

/* 개별 노드도 .org-chart-box 를 앞에 붙여 위 규칙과 특이도를 맞춘다 —
   그러지 않으면 위의 color:#fff 가 이겨 부회장(흰 알약)의 글자가 사라진다 */
.org-chart-box .oc-chief   {left:calc(586 * var(--ou));top:calc(97  * var(--ou));background:linear-gradient(90deg,#0069b4,#002e4e)}
.org-chart-box .oc-vice    {left:calc(891 * var(--ou));top:calc(202 * var(--ou));background:#fff;
                            border:1px solid #c3c3c3;color:#0069b4}
.org-chart-box .oc-gs      {left:calc(353 * var(--ou));top:calc(307 * var(--ou));background:linear-gradient(90deg,#66a5d2,#166caa)}
.org-chart-box .oc-strategy{left:calc(828 * var(--ou));top:calc(307 * var(--ou));background:linear-gradient(90deg,#66a5d2,#166caa)}
.org-chart-box .oc-policy  {left:calc(289 * var(--ou));top:calc(501 * var(--ou));background:#99c3e1}
.org-chart-box .oc-security{left:calc(586 * var(--ou));top:calc(501 * var(--ou));background:#99c3e1}
.org-chart-box .oc-ai      {left:calc(883 * var(--ou));top:calc(501 * var(--ou));background:#99c3e1}

/* 연결선 — 회장 중앙(719.5)에서 내려와 보안 분과까지 이어지고,
   부회장 · 사무처장/전략분과로 가로줄이 갈라진다. */
.oc-line{position:absolute;background:#c3c3c3}
.oc-line-v   {left:calc(719.5 * var(--ou));top:calc(182 * var(--ou));width:1px;height:calc(319 * var(--ou))}
.oc-line-vice{left:calc(719.5 * var(--ou));top:calc(244.5 * var(--ou));width:calc(171.5 * var(--ou));height:1px}
.oc-line-mid {left:calc(620 * var(--ou));  top:calc(349 * var(--ou));width:calc(208 * var(--ou));height:1px}

/* 아래 세 분과로 갈라지는 브래킷 — 좌·상·우만 그린 ∏ 모양 */
.oc-bracket{position:absolute;left:calc(422.5 * var(--ou));top:calc(459 * var(--ou));
    width:calc(594 * var(--ou));height:calc(42 * var(--ou));
    border:1px solid #c3c3c3;border-bottom:0}

@media (max-width:1024px){
    .org{padding:var(--sub-top) 0 var(--sub-bottom)}
    .org-list{width:100%;padding:0 20px}
    .org-card{gap:24px;min-height:0;padding:24px}
    .org-card + .org-card{margin-top:14px}
    .org-photo{width:150px}
    .org-name{gap:8px}
    .org-name span{font-size:16px;letter-spacing:-.3px}
    .org-name strong{font-size:20px;letter-spacing:-.3px}
    .org-career{display:block;margin-top:18px;font-size:15px;letter-spacing:-.2px}
    .org-career ul + ul{margin-left:0}
    .org-career li{padding-left:11px}

    /* 조직도 — 모바일에서도 PC 와 같은 트리 그림을 한 화면에 담는다.
       시안 좌표를 그대로 줄이면 글자가 6px 까지 작아지므로(알약 폭이 1446 중 267),
       가로만 % 로 다시 잡는다. 시안은 좌우에 여백이 많아 그만큼 압축할 수 있다.
       세로 비율(97 : 202 : 307 : 501 / 683)은 그대로 지킨다. */
    .org-chart{margin-top:48px;padding:0 20px}
    /* 좌우 여백은 padding 이 아니라 좌표로 준다 —
       알약이 absolute 라 기준 폭이 padding 을 포함해, padding 을 넣어도 안 밀린다. */
    .org-chart-box{width:100%;height:320px;margin:0;border-radius:14px}

    .org-chart-box .oc-node{width:28%;height:40px;border-radius:999px;
        font-size:clamp(9.5px, 2.9vw, 15px);letter-spacing:-.3px}
    /* 가로 : 좌우 5% 를 비우고 남은 90% 에 [28% + 3% 간격] 세 열.
       가운데 열의 중심이 정확히 50% 가 되어 세로선과 맞는다. */
    .org-chart-box .oc-chief   {left:36%;top:45px}    /* 가운데 열 */
    .org-chart-box .oc-vice    {left:67%;top:95px}    /* 오른쪽 열 */
    .org-chart-box .oc-gs      {left:5%; top:144px}   /* 왼쪽 열 */
    .org-chart-box .oc-strategy{left:55%;top:144px}
    .org-chart-box .oc-policy  {left:5%; top:235px}
    .org-chart-box .oc-security{left:36%;top:235px}
    .org-chart-box .oc-ai      {left:67%;top:235px}

    /* 연결선도 같은 기준으로 다시 그린다 (세로선 = 가운데 열 중심 = 50%) */
    .oc-line-v   {left:50%;top:85px;width:1px;height:150px}
    .oc-line-vice{left:50%;top:115px;width:17%;height:1px}   /* → 부회장 왼쪽 67% */
    .oc-line-mid {left:33%;top:164px;width:22%;height:1px}   /* 사무차장 오른쪽 → 전략 왼쪽 */
    .oc-bracket{left:19%;top:215px;width:62%;height:20px}    /* 정책 중심 → 인공지능 중심 */
}

@media (max-width:480px){
    .org-list{padding:0 20px}
    .org-card{gap:16px;padding:20px}
    .org-photo{width:110px}
    .org-name span{font-size:14px}
    .org-name strong{font-size:18px}
    .org-career{margin-top:14px;font-size:14px;line-height:1.65}
}

/* ===================== 협회소개 · CI =====================
   시안(Figma 466:834) 1920 기준.
   Logo · Type · Color 세 덩어리. 각 덩어리는 [제목 + (설명) + 다운받기] 머리 행과
   그 아래 회색 판이 짝을 이룬다. Color 만 제목과 내용이 한 줄에 나란히 온다. */
.ci{padding:var(--sub-top) 0 var(--sub-bottom)}
.ci-sec{width:var(--content);margin:0 auto}
.ci-sec + .ci-sec{margin-top:calc(172.75 * var(--u))}

/* 제목 — 연혁의 연도와 같은 규격(Kakao Big Sans 89.5) */
.ci-title{font-family:var(--display);font-size:calc(89.5 * var(--u));font-weight:700;
    line-height:calc(94 * var(--u));letter-spacing:calc(-1.8 * var(--u));color:#212126}

/* 머리 행 — 제목 · 설명 · 다운받기 버튼이 한 줄에.
   설명은 시안대로 제목 바로 옆(96)에 붙이고 글줄은 왼쪽으로 맞춘다.
   버튼만 margin-left:auto 로 오른쪽 끝에 붙어, 남는 폭은 설명과 버튼 사이에 모인다.
   세로는 가운데 맞춤 대신 시안의 위치를 그대로 쓴다 — 제목의 'g' 처럼 아래로 삐친
   글자 때문에 글자 상자가 아래로 늘어나, 상자를 가운데 맞추면 눈에는 설명이 위로 뜬다. */
/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임) */
.ci-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.ci-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.ci-adm-btn:hover{border-color:var(--btn);color:var(--btn)}
.ci-head{display:flex;align-items:flex-start}
.ci-head .ci-title{flex:none}
.ci-note{margin-left:calc(96 * var(--u));margin-top:calc(32 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.19;color:#666;text-align:left}
.ci-dl{display:flex;gap:calc(22 * var(--u));margin-left:auto;margin-top:calc(24 * var(--u))}

/* 다운받기 버튼 — 파일이 없으면 .is-off 로 회색 · 클릭 불가 */
.ci-dl-btn{display:inline-flex;align-items:center;gap:calc(10 * var(--u));
    padding:calc(14 * var(--u)) calc(24 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:50px;
    font-size:calc(16 * var(--u));line-height:1.19;color:var(--btn-text);white-space:nowrap;
    transition:border-color .2s,color .2s}
.ci-dl-btn:hover{border-color:var(--btn);color:var(--btn)}
.ci-dl-btn.is-off{border-color:#d5d7da;color:#b5b8bd;cursor:not-allowed}
.ci-dl-btn.is-off:hover{background:none;color:#b5b8bd}

/* 화살표 — 시안 아이콘은 ↗ 이고 135도 돌려 ↓ 로 쓴다 (내려받기) */
.ci-dl-ico{width:calc(11.18 * var(--u));height:calc(11.18 * var(--u));
    background:currentColor;transform:rotate(135deg);flex:none;
    -webkit-mask:url(../img/ci-arrow.svg) no-repeat center/contain;
            mask:url(../img/ci-arrow.svg) no-repeat center/contain}

/* 회색 판 — 로고를 얹어 보여 주는 자리 */
.ci-boxes{display:flex;gap:calc(15.27 * var(--u));margin-top:calc(56.4 * var(--u))}
.ci-box{flex:1;display:flex;align-items:center;justify-content:center;
    height:calc(265.85 * var(--u));background:#fafafa}
.ci-boxes-3{gap:calc(15.63 * var(--u));margin-top:calc(61 * var(--u))}
.ci-boxes-3 .ci-box{height:calc(175.83 * var(--u))}

/* 판 안의 로고 — 폭은 시안 실측값. 높이는 비율대로 따라온다 */
.ci-logo-mark {width:calc(275.41 * var(--u))}
.ci-logo-guide{width:calc(371.15 * var(--u))}
.ci-type-1{width:calc(181.53 * var(--u))}
.ci-type-2{width:calc(224.13 * var(--u))}
.ci-type-3{width:calc(398.11 * var(--u))}
.ci-box img{height:auto;display:block}

/* ---- Color ---- 제목과 색 카드가 한 줄에 나란히.
   시안은 이 앞 간격만 320 으로 다른 덩어리(172.75)보다 넓다 */
.ci-sec + .ci-sec-color{margin-top:calc(320 * var(--u))}
.ci-sec-color{display:flex;justify-content:space-between;align-items:flex-start}
.ci-colors{display:flex;gap:calc(41 * var(--u));width:calc(700 * var(--u))}
.ci-color{flex:1}
.ci-swatch{display:block;width:100%;aspect-ratio:1;border-radius:0}
.ci-color-name{display:block;margin-top:calc(17 * var(--u));
    font-family:var(--display);font-size:calc(22 * var(--u));font-weight:700;
    line-height:1.5;color:#000}
/* 라벨과 값은 한 줄에 붙여 쓰고(시안 그대로), 쌍마다 줄을 바꾼다 */
.ci-color-spec{margin-top:calc(16 * var(--u));
    font-family:var(--display);font-size:calc(18 * var(--u));
    line-height:1.5;letter-spacing:calc(-1.8 * var(--u));color:#666}
.ci-color-spec dt{display:inline}
.ci-color-spec dt::after{content:'\00a0\00a0'}
.ci-color-spec dd{display:inline;margin:0}

@media (max-width:1024px){
    .ci{padding:var(--sub-top) 0 var(--sub-bottom)}
    .ci-adm{padding:0 20px}
    .ci-sec{width:100%;padding:0 20px}
    .ci-sec + .ci-sec{margin-top:64px}
    .ci-title{font-size:44px;line-height:1.1;letter-spacing:-1px}

    /* 머리 행 — 한 줄에 다 넣을 폭이 없어 위에서 아래로 쌓는다 */
    .ci-head{display:block}
    .ci-note{margin:16px 0 0;font-size:14px;line-height:1.6;text-align:left;
        word-break:keep-all}
    .ci-dl{margin:20px 0 0;gap:8px;justify-content:flex-end}
    .ci-dl-btn{padding:11px 16px;font-size:13px;gap:8px}
    .ci-dl-ico{width:10px;height:10px}

    /* 회색 판 — 가로로 늘어놓을 폭이 없으므로 세로로.
       grid-auto-rows:1fr 로 판끼리 높이를 맞춘다 (안에 든 로고 크기가 제각각이라
       내용에 맡기면 판마다 높이가 달라진다). 높이를 px 로 박으면 규격 이미지가
       폭에 맞춰 길어질 때 판 밖으로 넘치므로 쓰지 않는다. */
    .ci-boxes,.ci-boxes-3{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;
        gap:10px;margin-top:24px}
    .ci-box{height:auto;min-height:120px;padding:24px 20px}
    .ci-boxes-3 .ci-box{height:auto;min-height:120px;padding:20px}
    .ci-logo-mark{width:180px}
    .ci-logo-guide{width:100%;max-width:520px}
    .ci-type-1{width:120px}
    .ci-type-2{width:150px}
    .ci-type-3{width:min(250px, 100%)}

    /* Color — PC 시안과 같은 순서(색 → 이름 → 값)로 세로로 쌓는다.
       스와치를 옆에 두면 값 칸이 100px 남짓이라 'CMYK 100 / 42 / 0 / 29' 가 잘린다.
       색을 가로 띠로 눕혀 위로 올리면 값이 가로 전체를 써서 2 × 2 가 한 줄씩 들어간다. */
    .ci-sec-color{display:block}
    .ci-colors{display:block;width:auto;margin-top:24px}
    .ci-color{display:block}
    .ci-color + .ci-color{margin-top:28px}
    .ci-swatch{width:100%;height:80px;aspect-ratio:auto}
    .ci-color-name{margin-top:12px;font-size:17px;line-height:1.3}
    .ci-color-spec{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
        margin-top:8px;font-size:14px;line-height:1.55;letter-spacing:-.4px}
}

@media (max-width:480px){
    .ci-title{font-size:20px}
    .ci-box{min-height:120px;padding:20px 16px}
    .ci-boxes-3 .ci-box{min-height:120px;padding:16px}
    .ci-logo-mark{width:150px}
    .ci-type-3{width:210px}
    .ci-swatch{height:64px}
    /* 320px 화면에서도 CMYK 줄이 한 줄에 들어가도록 글자와 칸 사이를 조금 줄인다 */
    .ci-color-spec{gap:4px 12px;font-size:13px}
}

/* ===================== 협회소개 · 오시는 길 =====================
   시안(Figma 468:1214) 1920 기준.
   [주소 · 연락처 · 교통편] 표 → 지도 → 지점 카드 3장 순서. */
.lc{padding:var(--sub-top) 0 var(--sub-bottom)}

/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임) */
.lc-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.lc-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.lc-adm-btn:hover{border-color:var(--btn);color:var(--btn)}

/* ---- 주소 · 연락처 · 교통편 ----
   라벨은 x341 을 중심으로 가운데 정렬되고, 값은 모두 x516 에서 시작한다.
   그래서 라벨 칸을 208 로 고정해 중심을 맞추고 값은 71 만큼 띄운다. */
.lc-info{width:var(--content);margin:0 auto}
.lc-row{display:flex;align-items:center;
    padding-bottom:calc(45 * var(--u));border-bottom:1px solid rgba(0,0,0,.3)}
.lc-row + .lc-row{padding-top:calc(46 * var(--u))}
.lc-row:last-child{padding-bottom:0;border-bottom:0}

.lc-label{flex:none;width:calc(208 * var(--u));text-align:center;
    font-size:calc(20 * var(--u));font-weight:600;line-height:calc(32 * var(--u));color:#222}
.lc-value{flex:1;display:flex;align-items:center;margin-left:calc(71 * var(--u));
    font-size:calc(24 * var(--u));line-height:1.33;letter-spacing:calc(-1.8 * var(--u));
    color:#000;word-break:keep-all}
.lc-value > a:not(.lc-btn){color:inherit}
.lc-value > a:not(.lc-btn):hover{text-decoration:underline}

/* 길 찾기 버튼 — CI 페이지의 '다운받기' 버튼과 같은 규격.
   화살표는 그쪽과 달리 돌리지 않는다 (내려받기가 아니라 밖으로 나가는 링크). */
.lc-btn{flex:none;margin-left:auto;
    display:inline-flex;align-items:center;gap:calc(10 * var(--u));
    padding:calc(14 * var(--u)) calc(24 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:50px;
    font-size:calc(16 * var(--u));line-height:1.19;letter-spacing:normal;color:var(--btn-text);
    white-space:nowrap;transition:border-color .2s,color .2s}
.lc-btn:hover{border-color:var(--btn);color:var(--btn)}
.lc-btn-ico{width:calc(11.18 * var(--u));height:calc(11.18 * var(--u));flex:none;
    background:currentColor;
    -webkit-mask:url(../img/ci-arrow.svg) no-repeat center/contain;
            mask:url(../img/ci-arrow.svg) no-repeat center/contain}
.lc-maphead{display:none}   /* 지도 위 버튼은 좁은 화면에서만 쓴다 */

/* ---- 지도 ---- 조직도와 같은 규격의 흰 상자 */
.lc-map{width:calc(1446 * var(--u));height:calc(683 * var(--u));margin:calc(110 * var(--u)) auto 0;
    background:#fdfeff;border:1px solid rgba(0,0,0,.13);border-radius:calc(20 * var(--u));
    overflow:hidden}
.lc-map iframe{display:block;width:100%;height:100%;border:0}

/* ---- 지점 카드 ----
   쓰임새별로 묶여 있다 — 같은 묶음의 카드는 19 로 붙고, 묶음 사이는 53 으로 벌어진다.
   카드 높이를 고정하고 안쪽을 세로 가운데로 두어, 주소가 한 줄인 서대문구 카드도
   나머지와 같은 크기로 선다. */
.lc-groups{display:flex;gap:calc(53 * var(--u));width:var(--content);
    margin:calc(163 * var(--u)) auto 0}

/* 묶음 이름 — 점은 .kaiia-dot-title 규격을 따른다.
   카드 안의 지점명(22 · 파랑)이 주인공이라, 묶음 이름은 그보다 조용한 구분 라벨로 둔다. */
.lc-group-title{margin:0 0 calc(40 * var(--u));
    font-size:calc(20 * var(--u));font-weight:600;color:#222}

.lc-offices{display:flex;gap:calc(19 * var(--u))}
/* 글은 위, 그림은 바닥에 붙는다 — 가운데로 두면 주소가 한 줄인 카드(서대문구)만
   글 뭉치가 내려앉는다. 시안에서도 세 카드 모두 글 · 그림의 위치가 같다. */
/* gap 은 최소 간격만 잡는다 — 시안의 61 을 그대로 주면 글이 긴 카드에서 그 간격이
   그림을 아래로 밀어, 카드마다 그림 바닥선이 어긋난다 */
.lc-office{flex:none;width:calc(458 * var(--u));
    display:flex;flex-direction:column;justify-content:space-between;
    gap:calc(20 * var(--u));height:calc(408 * var(--u));padding:calc(40 * var(--u));
    background:#fdfeff;border:1px solid rgba(0,0,0,.13);border-radius:calc(20 * var(--u))}
.lc-office-name{display:block;font-size:calc(22 * var(--u));font-weight:700;
    line-height:calc(35.2 * var(--u));color:#2eadf1}
.lc-office-addr{margin-top:calc(7 * var(--u));
    font-size:calc(20 * var(--u));font-weight:600;line-height:calc(32 * var(--u));color:#222}
.lc-office-addr span{display:block}
.lc-office-img{align-self:flex-end;width:calc(170 * var(--u));height:auto}

@media (max-width:1024px){
    .lc{padding:var(--sub-top) 0 var(--sub-bottom)}
    .lc-adm{width:100%;padding:0 20px}
    .lc-info,.lc-map,.lc-groups{width:100%}
    .lc-info{padding:0 20px}

    /* 'Transportation' 라벨이 길어 좌우로 두면 값 칸이 남지 않는다 — 위아래로 쌓는다.
       색은 PC 와 같게 둔다(라벨 #222 · 값 #000). 위계는 글자 크기로만 준다. */
    .lc-row{display:flex;flex-wrap:wrap;align-items:center;padding-bottom:18px}
    .lc-row + .lc-row{padding-top:18px}
    .lc-label{width:auto;text-align:left;font-size:14px;line-height:1.4;
        color:#222;letter-spacing:.2px}

    /* 라벨 → 주소 → 버튼 차례로 쌓고 버튼만 오른쪽에 붙인다.
       버튼은 dd 안에 있어야 마크업이 성립하므로(dl > div 안에는 dt · dd 만 온다),
       dd 의 상자를 지워(display:contents) 셋을 행의 직계처럼 놓고 순서를 정한다. */
    .lc-value{display:contents}
    .lc-value > span,
    .lc-value > a:not(.lc-btn){order:1;width:100%;margin-top:6px;
        font-size:17px;line-height:1.5;letter-spacing:-.3px;color:#000}

    /* 길찾기는 주소 칸을 다투지 않고 지도 바로 위 오른쪽에 세운다 */
    .lc-btn-pc{display:none}
    .lc-maphead{display:flex;justify-content:flex-end;margin:20px 20px 0}
    .lc-btn{gap:8px;padding:9px 14px;font-size:13px}
    .lc-btn-ico{width:10px;height:10px}

    /* 지도도 다른 덩어리와 같은 좌우 여백(20)을 갖는다 — 혼자 화면에 꽉 차면 어긋나 보인다 */
    .lc-map{width:auto;height:280px;margin:10px 20px 0;border-radius:14px}
    /* 그림을 글 아래에 두면 카드가 세로로 헐렁해진다 — 옆에 세워 높이를 줄인다 */
    .lc-groups{display:block;margin-top:40px;padding:0 20px}
    .lc-group + .lc-group{margin-top:32px}
    .lc-group-title{margin:0 0 12px;font-size:16px;font-weight:700;color:#222}
    .lc-offices{display:block}
    /* 글은 위에서 시작한다 — 가운데나 아래로 두면 주소가 한 줄인 카드(서대문구)만
       글 뭉치가 내려앉아 제목 위가 휑해진다 */
    /* 카드 높이를 못 박아 세 장을 나란히 세운다 — 주소가 두 줄인 카드(강남 · 송파)와
       한 줄인 카드(서대문구)는 내용에 맡기면 높이가 달라지는데, 묶음이 나뉘어 있어
       grid 로는 서로 맞출 수 없다(부모가 다르다). */
    .lc-office{width:auto;flex-direction:row;align-items:flex-start;justify-content:space-between;
        height:auto;min-height:124px;gap:14px;padding:20px;border-radius:14px}
    .lc-office-head{flex:1;min-width:0}
    .lc-office + .lc-office{margin-top:12px}
    .lc-office-name{font-size:18px;line-height:1.4}
    .lc-office-addr{margin-top:6px;font-size:16px;line-height:1.6;word-break:keep-all}
    .lc-office-img{flex:none;width:84px}
}

@media (max-width:480px){
    .lc-value{font-size:16px}
    .lc-map{height:240px}
    .lc-office{min-height:120px}
    .lc-office-addr{font-size:15px}
    .lc-office-img{width:72px}
}

/* ===================== 회원마당 · 가입안내 =====================
   시안(Figma 469:1431) 1920 기준.
   가입 절차 카드 4장 → 회비표 → 가입신청 · 가입승인 · 문의처 안내. */
.jn{padding:var(--sub-top) 0 var(--sub-bottom)}

/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임) */
.jn-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.jn-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.jn-adm-btn:hover{border-color:var(--btn);color:var(--btn)}

/* ---- 가입 절차 ---- */
.jn-steps{display:flex;gap:calc(20 * var(--u));
    width:var(--content);margin:0 auto}
.jn-step{flex:1;display:flex;flex-direction:column;align-items:center;
    gap:calc(61 * var(--u));height:calc(432 * var(--u));padding:calc(40 * var(--u));
    background:#fdfeff;border:1px solid rgba(0,0,0,.13);border-radius:calc(20 * var(--u))}
.jn-step-head{width:100%}
.jn-step-no{display:block;font-size:calc(22 * var(--u));font-weight:700;
    line-height:calc(35.2 * var(--u));color:#2eadf1}
.jn-step-title{display:block;margin-top:calc(7 * var(--u));
    font-size:calc(20 * var(--u));font-weight:600;line-height:calc(32 * var(--u));color:#222}
.jn-step-desc{margin-top:calc(7 * var(--u));
    font-size:calc(16 * var(--u));line-height:calc(25.6 * var(--u));color:#555;word-break:keep-all}
.jn-step-desc span{display:block}
.jn-step-img{align-self:flex-end;width:calc(170 * var(--u));height:auto}

/* ---- 섹션 공통 ---- 파란 점이 제목 왼쪽 위 모서리에 걸린다 (오시는 길과 같은 규격) */
.jn-sec{width:var(--content);margin:calc(60 * var(--u)) auto 0}
/* 첫 덩어리는 위 여백을 지운다 — 페이지 여백(--sub-top)에 더해지면 페이지마다 어긋난다 */
.jn > :first-child,
.ci > :first-child,
.lc > :first-child,
.org > :first-child{margin-top:0}
.jn-fee{margin-top:calc(60 * var(--u))}
.jn-fee + .jn-sec{margin-top:calc(60 * var(--u))}

/* 점은 .kaiia-dot-title 규격을 따른다 */
.jn-sec-title{font-size:calc(30 * var(--u));font-weight:700;color:#222}

/* 제목과 '(단위 : 백만원)' 을 같은 줄 양끝에 */
.jn-sec-top{display:flex;align-items:flex-end;justify-content:space-between}
.jn-fee-unit{font-size:calc(16 * var(--u));line-height:calc(25.6 * var(--u));color:#555}

/* ---- 회비표 ----
   테두리는 '표 바깥 왼쪽·위' + '셀마다 오른쪽·아래' 로 나눠 그린다.
   collapse 에 맡기면 rowspan 셀의 높이가 두 행 합보다 1px 커지면서
   thead 와 tbody 사이에 틈이 생기고, 그 줄만 선이 두 번 그려져 굵어진다. */
.jn-table{width:100%;margin-top:calc(40 * var(--u));table-layout:fixed;
    border-collapse:separate;border-spacing:0;
    border-top:1px solid rgba(0,0,0,.13);border-left:1px solid rgba(0,0,0,.13)}
.jn-table th,
.jn-table td{border-right:1px solid rgba(0,0,0,.13);border-bottom:1px solid rgba(0,0,0,.13);
    padding:calc(10 * var(--u)) 0;
    text-align:center;vertical-align:middle;
    font-size:calc(18 * var(--u));font-weight:400;line-height:calc(48 * var(--u));color:#000}
.jn-table .is-head{background:#fdfeff;font-size:calc(20 * var(--u));font-weight:500}
.jn-table td{background:#fff}
/* 가로 폭 — 구분 두 칸(361 + 361)과 값 세 칸(241 · 242 · 241) */
.jn-table col{width:auto}
.jn-table thead th:first-child{width:calc(722 * var(--u))}
.jn-table thead th + th{width:calc(724 * var(--u))}

/* 표 아래 주석 */
.jn-notes{margin-top:calc(24 * var(--u))}
.jn-notes li{position:relative;padding-left:calc(14 * var(--u));
    font-size:calc(16 * var(--u));line-height:calc(25.6 * var(--u));color:#555;word-break:keep-all}
.jn-notes li + li{margin-top:calc(5 * var(--u))}
.jn-notes li::before{content:'';position:absolute;left:0;top:calc(11 * var(--u));
    width:calc(4 * var(--u));height:calc(4 * var(--u));border-radius:2px;background:#2bacf0}

/* ---- 안내 상자 ---- */
.jn-box{margin-top:calc(16 * var(--u));padding:calc(40 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(20 * var(--u))}
.jn-box p{font-size:calc(20 * var(--u));font-weight:500;line-height:1.4;color:#222;
    word-break:keep-all}
.jn-box p + p{margin-top:calc(20 * var(--u))}
.jn-box a{color:inherit;text-decoration:underline;text-underline-offset:calc(4 * var(--u))}
.jn-box a:hover{color:#0069b4}
/* 문의처의 메일 · 전화는 밑줄 없이 — 읽는 정보이지 눌러 가는 메뉴가 아니다.
   (누르면 메일·전화가 열리는 기능은 그대로다) */
.jn-box a[href^="mailto:"],
.jn-box a[href^="tel:"]{text-decoration:none}

@media (max-width:1024px){
    .jn{padding:var(--sub-top) 0 var(--sub-bottom)}
    /* 첫 덩어리는 위 여백을 지운다 — 안 그러면 페이지마다 칩 아래 간격이 제각각이 된다 */
    .jn > :first-child{margin-top:0}
    .jn-adm,.bn-adm{width:100%;padding:0 20px}
    .jn-steps,.jn-sec{width:100%;padding:0 20px}

    /* 카드 4장을 가로로 늘어놓을 폭이 없다 — 2 × 2 로 접는다 */
    .jn-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
    .jn-step{height:auto;gap:16px;padding:20px;border-radius:14px}
    .jn-step-no{font-size:16px;line-height:1.4}
    .jn-step-title{margin-top:4px;font-size:17px;line-height:1.4}
    .jn-step-desc{margin-top:6px;font-size:14px;line-height:1.55}
    .jn-step-img{width:88px}

    .jn-sec{margin-top:28px}
    .jn-fee{margin-top:28px}
    .jn-fee + .jn-sec{margin-top:28px}
    .jn-sec-title{font-size:20px}
    .jn-sec-top{align-items:baseline}
    .jn-fee-unit{font-size:13px;white-space:nowrap}

    /* 표는 밀지 않고 화면 폭에 맞춰 통째로 줄인다.
       구분 두 칸에 44% 를 주고 값 세 칸이 나머지를 나눠 갖는다 —
       '부회장사' 처럼 긴 이름이 들어가는 쪽이 값 칸보다 넓어야 한 줄로 선다. */
    .jn-table-wrap{margin-top:16px}
    .jn-table{width:100%;margin-top:0}
    .jn-table th,.jn-table td{padding:8px 4px;font-size:13px;line-height:1.5;
        word-break:keep-all}
    .jn-table .is-head{font-size:13px}
    .jn-table thead th:first-child{width:44%}
    .jn-table thead th + th{width:auto}

    .jn-notes{margin-top:14px}
    .jn-notes li{padding-left:12px;font-size:13px;line-height:1.6}
    .jn-notes li::before{top:8px;width:4px;height:4px}

    .jn-box{margin-top:12px;padding:20px;border-radius:14px}
    .jn-box p{font-size:15px;line-height:1.6}
    .jn-box p + p{margin-top:12px}
    .jn-box a{text-underline-offset:3px}
}

@media (max-width:480px){
    /* 두 칸으로도 좁아 카드를 한 줄에 하나씩 */
    .jn-steps{grid-template-columns:1fr}
    .jn-step{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
    .jn-step-head{flex:1;min-width:0}
    .jn-step-img{align-self:center;width:76px}
    /* 섹션 제목은 어느 폭에서나 20px — 회원사 현황·회원가입과 같은 층이다 */
    .jn-box p{font-size:14px}
    .jn-table th,.jn-table td{padding:7px 2px;font-size:12px}
    .jn-table .is-head{font-size:12px}
}

/* ===================== 회원마당 · 회원사 혜택 =====================
   가입안내의 표(.jn-table)를 그대로 쓰고 이 페이지에 필요한 것만 덧붙인다.
   시안(Figma 472:1766) 1920 기준 — 5칸(분류 · 내용 · 부회장사 · 이사사 · 일반사). */
/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임) */
.bn-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.bn-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.bn-adm-btn:hover{border-color:var(--btn);color:var(--btn)}
.bn-sec{margin-top:calc(166 * var(--u))}

/* [글자 위계] 예전에는 표 안이 전부 20u · 굵기 500 이라
   머리글도 분류도 실제 혜택 내용도 다 같은 무게로 보였다.
   눈이 어디부터 읽어야 할지 알 수 있게 네 단계로 나눈다.

     1) 표 머리 (구분 · 임원사 · 부회장사 …)  20u · 700 · 검정   — 표를 읽는 기준
     2) 왼쪽 분류 (산업계 네트워킹 강화 …)    19u · 700 · 검정   — 묶음의 이름
     3) 항목 이름 (조찬포럼(매월) …)          18u · 500 · 진회색 — 무엇에 대한 혜택인지
     4) 혜택 내용 (대표 및 임원 3명 참석 …)   17u · 400 · 회색   — 실제 값, 가장 많고 가장 옅게

   줄이 나뉘는 칸이 있어 line-height 는 낮추고 위아래 여백으로 높이를 맞춘다. */
.bn-table th,
.bn-table td{padding:calc(20 * var(--u)) calc(12 * var(--u));
    line-height:1.45;word-break:keep-all}

/* 1) 표 머리
   — .is-head 를 함께 적는다. 가입안내 표의 `.jn-table .is-head` 가 클래스 두 개라
     `.bn-table thead th` 만으로는 힘이 모자라 그 값에 덮인다. */
.bn-table thead th.is-head{font-size:calc(20 * var(--u));font-weight:700;color:#111;
    background:#f4f7fa}

/* 2) 왼쪽 분류 — 세로로 길게 묶이는 칸 */
.bn-table tbody th[scope="rowgroup"]{font-size:calc(19 * var(--u));font-weight:700;color:#111;
    background:#f9fbfc}

/* 3) 항목 이름 */
.bn-table tbody th[scope="row"]{font-size:calc(18 * var(--u));font-weight:500;color:#333;
    background:#fdfeff}

/* 4) 혜택 내용 — 가장 많은 글이라 가장 가볍게 */
.bn-table td{font-size:calc(17 * var(--u));font-weight:400;color:#555}
/* '-' 만 있는 칸은 더 옅게 (해당 없음을 뜻하므로 읽을 것이 아니다) */
.bn-table td.is-none{color:#b5b8bb}
/* 여러 등급에 걸쳐 같은 혜택을 주는 칸('공통사항' 등)은 한 단계 또렷하게 */
.bn-table td[colspan]{color:#333}
/* 다섯 칸은 시안대로 고르게 나눈다(289 × 5).
   폭은 반드시 col 에 준다 — 첫 행의 셀은 '분류·내용' 이 아니라 두 칸씩 묶인
   '구분·임원사' 라서, th 에 주면 그 폭을 두 칸이 나눠 갖고 마지막 칸만 두 배가 된다. */
.bn-table col{width:20%}

@media (max-width:1024px){
    .bn-sec{margin-top:40px}
    .bn-table th,.bn-table td{padding:10px 6px;line-height:1.45}
    /* 좁은 화면에서도 위계를 지킨다. 폭이 좁아 크기 차이는 1px 씩만 두고
       굵기와 색으로 구분한다 (여기서 다 같은 값으로 두면 PC 에서만 위계가 보인다) */
    .bn-table thead th.is-head{font-size:13px}
    .bn-table tbody th[scope="rowgroup"]{font-size:13px}
    .bn-table tbody th[scope="row"]{font-size:12.5px}
    .bn-table td{font-size:12.5px}
    /* 다섯 칸이라 화면 폭에 다 넣으면 글자가 뭉개진다 — 이 표만 가로로 밀어 본다 */
    .bn .jn-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .bn-table{min-width:640px}
    .bn .jn-table-wrap::-webkit-scrollbar{height:4px}
    .bn .jn-table-wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:2px}
}

@media (max-width:480px){
    .bn-table th,.bn-table td{padding:9px 5px}
    .bn-table thead th.is-head,
    .bn-table tbody th[scope="rowgroup"]{font-size:12px}
    .bn-table tbody th[scope="row"],
    .bn-table td{font-size:11.5px}
}

/* ===================== 회원마당 · 가입신청 =====================
   따로 시안이 없어 가입안내 · 회원사 혜택과 같은 틀(제목 + 안내 상자)을 쓴다.
   '가입절차'와 '협회비'는 회원 유형마다 달라 유형 상자 안에 함께 담는다. */
.ap-first{margin-top:calc(80 * var(--u))}
.ap-fee{font-weight:700}

/* 화면에서 바로 고치기 — 최고관리자에게만 나온다(일반 방문자에겐 안 보임) */
.ap-adm{width:var(--content);margin:0 auto calc(24 * var(--u));
    display:flex;justify-content:flex-end;gap:calc(8 * var(--u))}
.ap-adm-btn{display:inline-flex;align-items:center;height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500;color:var(--btn-text)}
.ap-adm-btn:hover{border-color:var(--btn);color:var(--btn)}
/* 유형 제목 옆 '수정' — 제목과 회원가입 버튼 사이 */
.ap-adm-edit{flex:none;display:inline-flex;align-items:center;height:calc(30 * var(--u));padding:0 calc(12 * var(--u));
    margin-right:auto;background:var(--btn-sub);border:1px solid var(--btn-line);border-radius:calc(15 * var(--u));
    font-size:calc(13 * var(--u));font-weight:500;color:var(--btn-text)}
.ap-adm-edit:hover{border-color:var(--btn);color:var(--btn)}

/* 제목과 버튼을 한 줄에 — 버튼은 오른쪽 끝, 상자 바로 위 */
.ap-head{display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u))}

/* 회원가입으로 보내는 버튼 — CI 의 '다운받기', 오시는 길의 '빠른 길 찾기'와 같은 규격.
   (같은 모양이 세 곳째라 다음에 또 쓰게 되면 공통 클래스로 빼는 편이 낫다) */
/* 가입안내에서 가장 하고 싶어 할 행동이므로 파랑으로 채운다 (주요 행동) */
.ap-btn{flex:none;display:inline-flex;align-items:center;gap:calc(10 * var(--u));
    padding:calc(14 * var(--u)) calc(24 * var(--u));
    background:var(--btn);border:1px solid var(--btn);border-radius:50px;
    font-size:calc(16 * var(--u));font-weight:500;line-height:1.19;color:#fff;
    white-space:nowrap;text-decoration:none;transition:background .2s,border-color .2s}
.ap-btn:hover{background:var(--btn-on);border-color:var(--btn-on)}
.ap-btn-ico{width:calc(11.18 * var(--u));height:calc(11.18 * var(--u));flex:none;
    background:currentColor;
    -webkit-mask:url(../img/ci-arrow.svg) no-repeat center/contain;
            mask:url(../img/ci-arrow.svg) no-repeat center/contain}

/* 가입절차 · 협회비 — 상자 안에서 설명글과 구분선으로 나눈다 */
.ap-meta{margin-top:calc(32 * var(--u));padding-top:calc(30 * var(--u));
    border-top:1px solid rgba(36,36,36,.12)}
.ap-row{display:flex;align-items:baseline}
.ap-row + .ap-row{margin-top:calc(18 * var(--u))}
.ap-row dt{flex:none;width:calc(150 * var(--u));
    font-size:calc(18 * var(--u));font-weight:600;line-height:1.5;color:#666}
.ap-row dd{margin:0;font-size:calc(20 * var(--u));font-weight:500;line-height:1.5;color:#222;
    word-break:keep-all}

/* 단계 — 항목 사이에 화살표를 넣어 순서를 보여 준다.
   화살표는 ::before 로 그린다(글에 섞어 두면 화면 낭독기가 '검은 삼각형'까지 읽는다) */
.ap-steps{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u))}
.ap-steps li{display:flex;align-items:center;gap:calc(10 * var(--u))}
.ap-steps li + li::before{content:'';flex:none;
    width:calc(7 * var(--u));height:calc(7 * var(--u));
    border-top:2px solid #2eadf1;border-right:2px solid #2eadf1;transform:rotate(45deg)}

@media (max-width:1024px){
    .ap-adm{width:100%;padding:0 20px}
    .ap-first{margin-top:28px}
    .ap-head{gap:12px}
    .ap-btn{gap:8px;padding:11px 16px;font-size:13px}
    .ap-btn-ico{width:10px;height:10px}

    /* 라벨을 옆에 두면 값 칸이 좁아 단계가 잘게 쪼개진다 — 위아래로 쌓는다 */
    .ap-meta{margin-top:20px;padding-top:18px}
    .ap-row{display:block}
    .ap-row + .ap-row{margin-top:14px}
    .ap-row dt{width:auto;font-size:13px}
    .ap-row dd{margin-top:5px;font-size:15px}
    .ap-steps{gap:8px}
    .ap-steps li{gap:8px}
    .ap-steps li + li::before{width:6px;height:6px;border-width:2px}
}

/* ---------- 참여마당 — 접수 조회 (시안 509:1042) ---------- */
.lk{width:var(--content);margin:0 auto;padding:var(--sub-top) 0 var(--sub-bottom)}
.lk *{box-sizing:border-box}

/* 제목 줄 — 왼쪽 제목, 오른쪽 '확인하기' */
.lk-head{display:flex;align-items:center;justify-content:space-between;gap:calc(20 * var(--u))}
.lk-title{font-size:calc(26 * var(--u));font-weight:700;line-height:1.4;color:#111}
.lk-btn{flex:none;height:calc(52 * var(--u));padding:0 calc(40 * var(--u));
    background:var(--btn);border:0;border-radius:calc(26 * var(--u));
    font-size:calc(17 * var(--u));font-weight:700;color:#fff;cursor:pointer}
.lk-btn:hover{background:var(--btn-on)}

/* 조회 칸 상자 — 다른 서브페이지 상자와 같은 규격 */
.lk-box{margin-top:calc(16 * var(--u));padding:calc(40 * var(--u));
    background:#f9fbfc;border:1px solid rgba(36,36,36,.1);border-radius:calc(20 * var(--u))}
.lk-fields{display:flex;gap:calc(32 * var(--u))}
.lk-field{flex:1;min-width:0}
.lk-field label{display:block;margin-bottom:calc(14 * var(--u));
    font-size:calc(18 * var(--u));font-weight:700;line-height:1.4;color:#222}
/* 꼭 넣어야 하는 칸임을 알리는 빨간 점 */
.lk-req{display:inline-block;width:calc(7 * var(--u));height:calc(7 * var(--u));
    margin-left:calc(4 * var(--u));vertical-align:super;border-radius:50%;background:#ff2929}
.lk-field input{width:100%;height:calc(65 * var(--u));padding:0 calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(18 * var(--u));color:#222;outline:0}
.lk-field input::placeholder{color:#b5b8bb}
.lk-field input:focus{border-color:#2eadf1}

/* 조회 결과 */
.lk-sec{margin-top:calc(60 * var(--u))}
.lk-table{width:100%;table-layout:fixed;border-collapse:collapse;
    margin-top:calc(40 * var(--u));border-top:2px solid #222}
.lk-table caption{position:absolute;width:0;height:0;overflow:hidden;font-size:0}
.lk-table col.c-no{width:calc(150 * var(--u))}
.lk-table col.c-date{width:calc(180 * var(--u))}
.lk-table th{height:calc(55 * var(--u));border-bottom:1px solid #f2f2f2;
    font-size:calc(16 * var(--u));font-weight:700;color:#222}
.lk-table td{height:calc(55 * var(--u));padding:calc(10 * var(--u)) 0;
    border-bottom:1px solid #f2f2f2;
    font-size:calc(16 * var(--u));color:#555;text-align:center;vertical-align:middle}
.lk-table .c-subject{text-align:left;padding:0 calc(20 * var(--u))}
.lk-table .c-subject a{color:#222}
.lk-table .c-subject a:hover{color:#0069b4;text-decoration:underline;text-underline-offset:calc(4 * var(--u))}
.lk-gone{color:#999}
.lk-empty{padding:calc(60 * var(--u)) 0 !important;height:auto !important;
    font-size:calc(16 * var(--u));color:#888}
.lk-empty strong{color:#222}

/* 준비 중 안내(문의사항 · 공개자료실)도 같은 상자를 쓴다 */
.lk-desc{margin-top:calc(16 * var(--u));
    font-size:calc(18 * var(--u));line-height:calc(32 * var(--u));color:#555;word-break:keep-all}
.lk-contact{display:flex;gap:calc(14 * var(--u));margin-top:calc(24 * var(--u))}
.lk-contact a{display:inline-flex;align-items:center;height:calc(47 * var(--u));
    padding:0 calc(24 * var(--u));
    background:#fff;border:1px solid #222;border-radius:calc(24 * var(--u));
    font-size:calc(17 * var(--u));color:#222}
.lk-contact a:hover{border-color:#0069b4;color:#0069b4}

@media (max-width:1024px){
    .lk{width:100%;padding:var(--sub-top) 20px var(--sub-bottom)}
    .lk-head{gap:10px}
    .lk-title{font-size:20px}
    .lk-btn{height:44px;padding:0 20px;font-size:14px;border-radius:22px}

    .lk-box{margin-top:12px;padding:20px;border-radius:14px}
    /* 좁은 화면에서는 두 칸을 위아래로 쌓는다 */
    .lk-fields{display:block}
    .lk-field + .lk-field{margin-top:16px}
    .lk-field label{margin-bottom:8px;font-size:15px}
    .lk-req{width:5px;height:5px;margin-left:3px}
    .lk-field input{height:48px;padding:0 12px;font-size:15px;border-radius:8px}

    .lk-sec{margin-top:28px}
    .lk-table{margin-top:16px}
    .lk-table col.c-no{width:56px}
    .lk-table col.c-date{width:88px}
    .lk-table th{height:44px;font-size:13px}
    .lk-table td{height:44px;font-size:13px}
    .lk-table .c-subject{padding:0 10px}
    .lk-empty{padding:36px 10px !important;font-size:13px;line-height:1.7}

    .lk-desc{margin-top:10px;font-size:15px;line-height:1.7}
    .lk-contact{flex-direction:column;gap:8px;margin-top:16px}
    .lk-contact a{justify-content:center;height:44px;font-size:14px;border-radius:22px}
}

/* ---------- 행사 접수하기 · 신청자 명단 ---------- */
/* 접수 조회(.lk)와 같은 부품을 쓰고, 여기서만 필요한 것만 더한다 */

/* 처리 결과 알림 줄 */
.lk-note{margin-bottom:calc(24 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u));
    border-radius:calc(10 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.5}
.lk-note.is-ok{background:rgba(0,105,180,.08);color:#0069b4}
.lk-note.is-bad{background:rgba(224,32,32,.07);color:#e02020}

/* 어느 행사에 신청하는지 */
.lk-target{display:flex;align-items:baseline;flex-wrap:wrap;gap:calc(14 * var(--u));
    margin-bottom:calc(40 * var(--u));padding-bottom:calc(24 * var(--u));
    border-bottom:1px solid rgba(36,36,36,.1)}
.lk-target-key{flex:none;font-size:calc(16 * var(--u));color:#888}
.lk-target-name{font-size:calc(20 * var(--u));font-weight:700;color:#222;word-break:keep-all}
.lk-target-when{font-size:calc(16 * var(--u));color:#555}

/* 두 줄로 놓는 칸 사이 */
.lk-box .lk-fields + .lk-fields{margin-top:calc(32 * var(--u))}
.lk-field-wide{margin-top:calc(32 * var(--u))}
.lk-field textarea{width:100%;padding:calc(14 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.1);border-radius:calc(10 * var(--u));
    font-size:calc(17 * var(--u));line-height:1.6;color:#222;outline:0;resize:vertical}
.lk-field textarea:focus{border-color:#2eadf1}

/* 동의 줄 */
.lk-agree{display:flex;align-items:flex-start;margin-top:calc(30 * var(--u))}
.lk-chk{position:absolute;width:0;height:0;opacity:0;z-index:-1}
.lk-chk + label{display:flex;align-items:flex-start;
    font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));color:#555;cursor:pointer}
.lk-chk + label::before{content:'';flex:none;
    width:calc(22 * var(--u));height:calc(22 * var(--u));margin-right:calc(10 * var(--u));
    background:#fff;border:calc(2 * var(--u)) solid #9aa1a8;border-radius:calc(6 * var(--u));
    transition:border-color .2s,background-color .2s}
.lk-chk + label:hover::before{border-color:var(--btn)}
.lk-chk:checked + label::before{border-color:#0069b4;background:#0069b4 no-repeat 50% 50%;
    background-size:60% auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* 첫 덩어리는 위 여백을 지운다 (접수 완료 화면) */
.lk-sec.is-first{margin-top:0}

/* 상태 표시 */
.apl-state{display:inline-flex;align-items:center;justify-content:center;
    height:calc(30 * var(--u));padding:0 calc(14 * var(--u));border-radius:calc(15 * var(--u));
    font-size:calc(14 * var(--u));font-weight:500}
.apl-state.is-wait{background:#f2f4f6;color:#666}
.apl-state.is-ok{background:rgba(0,105,180,.1);color:#0069b4}
.apl-state.is-no{background:rgba(224,32,32,.08);color:#e02020}

/* ---------- 신청자 명단 (관리자) ---------- */
.apl-pick select{height:calc(52 * var(--u));padding:0 calc(20 * var(--u));
    background:#fff;border:1px solid rgba(36,36,36,.2);border-radius:calc(26 * var(--u));
    font-size:calc(16 * var(--u));color:#222;cursor:pointer;max-width:calc(600 * var(--u))}
.apl-sum{display:flex;align-items:center;gap:calc(30 * var(--u));
    padding:calc(24 * var(--u)) calc(30 * var(--u));
    font-size:calc(17 * var(--u));color:#555}
.apl-sum b{color:#222}
.apl-sum .is-ok b{color:#0069b4}
.apl-sum .apl-go{margin-left:auto;font-size:calc(16 * var(--u));color:#0069b4;
    text-decoration:underline;text-underline-offset:calc(4 * var(--u))}

.apl-table col.c-name{width:calc(120 * var(--u))}
.apl-table col.c-phone{width:calc(160 * var(--u))}
.apl-table col.c-state{width:calc(130 * var(--u))}
.apl-table col.c-act{width:calc(220 * var(--u))}
.apl-table .c-who{text-align:left;padding:calc(12 * var(--u)) calc(20 * var(--u))}
.apl-table .c-who span{display:block}
.apl-mail{font-size:calc(15 * var(--u));color:#888}
.apl-memo{margin-top:calc(6 * var(--u));font-size:calc(15 * var(--u));color:#888;
    word-break:keep-all}
.apl-btn{display:inline-flex;align-items:center;height:calc(32 * var(--u));
    padding:0 calc(12 * var(--u));margin:0 calc(2 * var(--u));
    background:var(--btn-sub);border:1px solid rgba(36,36,36,.2);border-radius:calc(16 * var(--u));
    font-size:calc(14 * var(--u));color:#555}
.apl-btn:hover{border-color:var(--btn);color:var(--btn)}
.apl-btn.is-ok{background:var(--btn);border-color:var(--btn);color:#fff}
.apl-btn.is-ok:hover{background:var(--btn-on);color:#fff}
.apl-btn.is-del:hover{border-color:var(--btn-warn);color:var(--btn-warn)}

/* 넓은 화면에서는 제목 옆 버튼만 쓰고, 아래 버튼은 감춘다 */
.lk-foot-btn{display:none}

@media (max-width:1024px){
    .lk-note{margin-bottom:16px;padding:14px;font-size:14px;border-radius:8px}
    .lk-target{display:block;margin-bottom:20px;padding-bottom:16px}
    .lk-target-key{font-size:13px}
    .lk-target-name{display:block;margin-top:4px;font-size:16px}
    .lk-target-when{display:block;margin-top:4px;font-size:13px}

    .lk-box .lk-fields + .lk-fields,
    .lk-field-wide{margin-top:16px}
    .lk-field textarea{padding:12px;font-size:15px}
    .lk-agree{margin-top:20px}
    .lk-chk + label{font-size:13px;line-height:20px}
    .lk-chk + label::before{width:18px;height:18px;margin-right:8px;border-radius:5px}

    .apl-state{height:24px;padding:0 10px;font-size:12px;border-radius:12px}

    .apl-pick select{height:44px;padding:0 14px;font-size:13px;max-width:60vw}
    .apl-sum{flex-wrap:wrap;gap:12px;padding:16px;font-size:14px}
    .apl-sum .apl-go{font-size:13px}
    /* 좁은 화면에서는 명단을 옆으로 밀어 본다 — 칸이 많아 쌓으면 오히려 읽기 어렵다.
       min-width 는 정해 둔 칸들의 합보다 넉넉해야 한다 —
       딱 맞추면 폭을 안 정한 '소속 · 이메일' 칸에 남는 자리가 없어 글자가 세로로 쪼개진다. */
    .apl{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .apl-table{min-width:1000px}
    .apl-table col.c-who{width:220px}
    .apl-btn{height:28px;padding:0 8px;font-size:12px}

    /* 좁은 화면 — 제출 단추를 다 채운 자리 바로 아래에 크게 둔다.
       위(제목 옆)에 두면 폼을 채운 뒤 다시 맨 위로 올라가야 한다. */
    .lk-head .lk-btn{display:none}
    .lk-foot-btn{display:block;margin-top:16px}
    .lk-foot-btn .lk-btn{display:block;width:100%;height:52px;padding:0;
        font-size:16px;border-radius:26px}
}