/* LRD 전체 목업 (3번 디자인) 공통 — 2026-10-19
   밝은 바탕(#f6f5f2) + 남색 포인트 + 어두운 판(#15171b). 휴대폰(767px 이하)은 아래 탭 막대가 있는 전용 화면 */
:root{--bg:#f6f5f2;--fg:#1b1c1f;--card:#fff;--line:#e2e0da;--acc:#1f3a5f;--dark:#15171b;--mut:#6b6d72;--vis:#efeeea;--hd:#202124}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:"JetBrains Mono","SF Mono",Menlo,monospace;letter-spacing:.02em}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}

/* 상단 막대 — 메뉴 글자 1.5배(19.5px), 맨 위 고정 */
.hd{position:fixed;inset:0 0 auto;height:96px;background:var(--hd);border-bottom:1px solid #2c2e33;z-index:50;color:#eef0f3}   /* 10/19 사용자: 모든 쪽 상단 = 하단(푸터)과 같은 색 #202124 */
.hd nav>a,.hd nav>.dd>a{color:#eef0f3}
.hd nav a.on{box-shadow:inset 0 -2px 0 #c6a46a}
.hd .lang{border-left-color:#3a3c41!important;color:#9a9da4}.hd .lang b{color:#fff}
.hd .sub a{color:var(--fg)}
.hd .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:1360px}
.hd .logo img{height:99px;width:auto;margin:-2px 0}   /* 10/19 사용자: 로고 150% (66→99) */
.hd nav{display:flex;align-items:center;font-family:"Nanum Gothic Coding",monospace;font-size:15.6px}   /* 10/19 사용자: 메뉴 글씨 80% (19.5→15.6) */
.hd nav>a,.hd nav>.dd>a{display:block;padding:12px 18px;opacity:.7;transition:opacity .2s}
.hd nav>a:hover,.hd nav>.dd:hover>a,.hd nav a.on{opacity:1}
.hd nav a.on{box-shadow:inset 0 -2px 0 var(--acc)}
.hd .dd{position:relative}
.hd .dd>a::after{content:"";display:inline-block;margin-left:8px;border:5px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.hd .dd .sub{position:absolute;left:10px;top:100%;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;opacity:0;pointer-events:none;transform:translateY(6px);transition:.2s;box-shadow:0 14px 30px rgba(0,0,0,.08);font-family:Pretendard,sans-serif;font-size:16px}
.hd .dd:hover .sub{opacity:1;pointer-events:auto;transform:none}
.hd .sub a{display:block;padding:10px 12px;border-radius:6px}.hd .sub a:hover{background:var(--bg)}
.hd .lang{margin-left:16px;padding-left:18px;border-left:1px solid var(--line);font-size:15px;color:var(--mut)}
.hd .lang b{color:var(--fg);font-weight:400;text-decoration:underline;text-underline-offset:5px}
.hd .lang span{margin:0 6px;opacity:.5}
main{padding-top:96px}

/* 쪽 머리 */
.ph-head{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.ph-head small{font-size:13px;letter-spacing:.12em;color:var(--acc)}
.ph-head h1{font-size:48px;letter-spacing:-.02em;margin-top:8px}
.ph-head p{margin-top:12px;font-size:17px;color:var(--mut);max-width:720px}
.ph-row{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:28px;row-gap:6px}   /* 10/19 사용자: 설명 글을 제목 옆, 아랫줄 맞춤 — 모든 쪽 */
.ph-row p{margin-top:0}
.ph-row>:not(h1):not(p){flex-basis:100%}
.crumb{font-size:13px;color:var(--mut);margin-bottom:18px}

.sec{padding:96px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:40px}
.sec-h small{font-size:13px;letter-spacing:.12em;color:var(--acc)}
.sec-h h2{font-size:36px;letter-spacing:-.02em;margin-top:6px;line-height:1.25}
.sec-h p{font-size:16px;color:var(--mut);max-width:520px}
.more-link{font-size:15px;font-weight:600;border-bottom:1px solid currentColor;white-space:nowrap}
.dark{background:var(--dark);color:#eef0f3}
.dark .sec-h p,.dark .mut{color:#a2a6ae}.dark .sec-h small{color:#9fb3cf}

/* 하단 */
.ft{background:#202124;color:#c9cbd0;padding:56px 0 40px;font-size:14px}
.ft .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:start}
.ft img{height:62px;width:auto;margin-top:3px}   /* 10/19 사용자: 하단 로고 150% (그림 빈 여백을 잘라낸 logo_trim.png: 보이는 로고 41→62px), 로고 왼쪽 = 아래 줄·저작권 글 왼쪽, 로고 위 = 첫 줄 글 위 */
.ft dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.ft dt{color:#8b8f97}
.ft .cp{grid-column:1/-1;border-top:1px solid #34363b;padding-top:22px;color:#8b8f97;font-size:13px}
.ft .q a{display:block;margin-bottom:8px}

/* 3D 기울어지는 판 (공통) */
.tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}

/* 휴대폰 전용 */
.tb{display:none}
.m-only{display:none}
@media (max-width:767px){
  .wrap{padding:0 18px}
  .hd{height:58px}
  .hd .logo img{height:40px}
  .hd nav>a,.hd nav>.dd{display:none}
  .hd .lang{margin:0;padding:0;border:0;font-size:12.5px}
  main{padding-top:58px;padding-bottom:74px}
  .d-only{display:none!important}
  .m-only{display:block}
  .ph-head{padding:28px 0 22px}
  .ph-head h1{font-size:30px}
  .ph-head p{font-size:14.5px}
  .crumb{display:none}
  .sec{padding:48px 0}
  .sec-h{display:block;margin-bottom:22px}
  .sec-h h2{font-size:24px}
  .sec-h p{font-size:14px;margin-top:8px}
  .ft{padding:30px 0 96px;font-size:12.5px}
  .ft .wrap{grid-template-columns:1fr;gap:18px}
  .ft img{height:40px}
  /* 아래 탭 막대 */
  .tb{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);z-index:55;padding-bottom:env(safe-area-inset-bottom)}
  .tb a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--mut)}
  .tb a i{width:22px;height:2px;background:transparent;border-radius:2px}
  .tb a.on{color:var(--fg);font-weight:700}.tb a.on i{background:var(--acc)}
  .tb a b{font-family:"JetBrains Mono",Menlo,monospace;font-size:10px;font-weight:400;letter-spacing:.06em}
}
.rise{opacity:0;transform:perspective(1200px) translateY(28px) rotateX(8deg);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:10px;font-size:16px;font-weight:600;border:1px solid var(--line);background:#fff}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.dk{background:var(--dark);border-color:var(--dark);color:#fff}
.dark .btn{background:transparent;border-color:#3a3d44;color:#eef0f3}
@media (max-width:767px){.btn{height:48px;padding:0 18px;font-size:15px}}
/* 10/19 어두운 상단 막대: 앞쪽 밝은 막대용 규칙보다 우선 (KO 글자·지금 쪽 밑줄이 안 보이던 것) */
header.hd .lang b{color:#fff}
header.hd nav a.on{box-shadow:inset 0 -2px 0 #c6a46a}

/* 한 · 영 · 중 전환 단추 (lang.js) */
header.hd .lang a{color:#9a9da4;padding:4px 2px;cursor:pointer}header.hd .lang a:hover{color:#fff}
header.hd .lang a.on{color:#fff;text-decoration:underline;text-underline-offset:5px}

/* 2026-10-25 베트남어·캄보디아어: 메뉴 고정폭 글꼴엔 해당 글자가 없어 일반 글꼴, 캄보디아어는 Noto Sans Khmer */
html[lang=vi] .hd nav{font-family:Pretendard,"Noto Sans",system-ui,sans-serif}
html[lang=km] body,html[lang=km] .hd nav,html[lang=km] .hd .dd .sub{font-family:"Noto Sans Khmer",Pretendard,"Khmer Sangam MN",system-ui,sans-serif}
html[lang=km] body{line-height:1.7}