/* ddai 새 홈페이지 — 원본 ai-dda.com 디자인 시스템(next/DESIGN.md)을 그대로 따른다.
   값은 원본 화면을 1440px 폭에서 측정한 것. 표에 없는 값은 쓰지 않는다. */
:root {
  --ink: #111;
  --white: #fff;
  --gray-500: #767676;
  --gray-400: #aaa;
  --line: #ddd;
  --gray-50: #f5f5f5;
  --peach: #fff4ed;
  --peach-pill: rgba(255, 118, 25, .08);
  --o1: #f42b0c;
  --o2: #ff7619;
  --grad: linear-gradient(to right, var(--o1), var(--o2));
  --black: #000;
  --radius: 10px;
  --pill: 200px;
  --ease: cubic-bezier(.215, .61, .355, 1);
  --font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 글자 단계 (1440 기준 최대값) */
  --fs-hero: clamp(34px, 4.86vw, 70px);
  --fs-page: clamp(40px, 5.2vw, 75px);
  --fs-title: clamp(30px, 4.5vw, 65px);
  --fs-lead: clamp(20px, 1.81vw, 26px);
  --fs-body-l: clamp(16px, 1.39vw, 20px);
  --fs-body: clamp(14px, 1.11vw, 16px);
  /* 공간 */
  --container: 1400px;
  --side: clamp(20px, 4.17vw, 60px);
  --sec-top: clamp(80px, 10.4vw, 150px);
  --sec-bottom: clamp(100px, 13.9vw, 200px);
}
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 16px; color: var(--ink); background: var(--white); letter-spacing: -0.48px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; word-break: keep-all; overflow-wrap: anywhere; }
body[data-lang="zh"] { word-break: normal; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--o2); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10001; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }

/* ── 공통 틀 ── */
.sec { padding: var(--sec-top) var(--side) var(--sec-bottom); position: relative; }
.inner { max-width: var(--container); margin: 0 auto; position: relative; }
.center { text-align: center; }
.tit { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; letter-spacing: -1px; }
.tit.white, .white { color: #fff; }
.pageTit { font-size: var(--fs-page); font-weight: 700; line-height: 1.2; }
.kicker { font-size: var(--fs-lead); font-weight: 600; color: var(--gray-400); line-height: 1.5; }
.lead { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.5; letter-spacing: -0.4px; color: var(--gray-500); margin-top: 24px; max-width: 46em; }
.center .lead { margin-left: auto; margin-right: auto; }
.lead.dark { color: var(--ink); }
.lead.white { color: rgba(255, 255, 255, .7); }
.gText, em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.split .lead { margin-top: 0; margin-bottom: 20px; }

/* 움직임: 아래 60px에서 떠오르며 나타남 (원본 .fadeAni) */
.js .fadeAni { transform: translateY(60px); opacity: 0; transition: transform 1s var(--ease), opacity .8s cubic-bezier(.215, .61, .8, 1); }
.js .fadeAni.active { transform: none; opacity: 1; }
.delay1 { transition-delay: .1s; } .delay2 { transition-delay: .2s; } .delay3 { transition-delay: .3s; }
.delay4 { transition-delay: .4s; } .delay5 { transition-delay: .5s; } .delay6 { transition-delay: .6s; }

/* ── 헤더 (원본 #header) ── */
#header { position: fixed; top: 0; left: 0; width: 100%; padding: clamp(12px, 2.125vw, 20px) clamp(18px, 2.08vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: clamp(38px, 5vw, 72px); z-index: 10000; transition: top .7s, background .4s; }
#header.hide { top: -100%; transition: top 1.2s .3s; }
#header.solid { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
#header .logo { flex-grow: 1; line-height: 0; }
#header .logo img { height: 20px; width: auto; transition: filter .3s; }
#gnb ul { display: flex; gap: clamp(24px, 2.8vw, 48px); }
#gnb a { display: inline-block; padding: 10px 0; font-size: 1rem; color: var(--ink); transition: color .3s; white-space: nowrap; }
#gnb a:hover, #gnb a.on { color: var(--o2); }
#langSelector { position: relative; line-height: 0; }
#langCurrent img { width: 18px; height: 18px; transition: filter .3s; }
#langDropdown { position: absolute; right: -10px; top: calc(100% + 12px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; min-width: 120px; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .3s; }
#langSelector:hover #langDropdown, #langSelector.open #langDropdown { opacity: 1; visibility: visible; transform: none; }
#langDropdown a { display: block; padding: 6px 18px; font-size: 14px; color: var(--ink); }
#langDropdown a:hover, #langDropdown a.current { color: var(--o2); }
#hamburger { display: none; width: 28px; height: 20px; position: relative; }
#hamburger span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: .3s; }
#hamburger span:nth-child(1) { top: 0; } #hamburger span:nth-child(2) { top: 9px; } #hamburger span:nth-child(3) { top: 18px; }
#hamburger.close span:nth-child(1) { top: 9px; transform: rotate(45deg); }
#hamburger.close span:nth-child(2) { opacity: 0; }
#hamburger.close span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
#mobileGnb { display: none; }
/* 사진 첫 화면 위: 흰 헤더 */
body.on-dark #header:not(.solid) #gnb a { color: #fff; }
body.on-dark #header:not(.solid) #gnb a:hover { color: var(--o2); }
body.on-dark #header:not(.solid) .logo img { filter: brightness(0) invert(1); }
body.on-dark #header:not(.solid) #langCurrent img { filter: invert(1); }
body.on-dark #header:not(.solid) #hamburger { color: #fff; }
body.fixed { overflow: hidden; }

/* ── 버튼 (원본 .btnWrapper .primaryBtn) ── */
.btnWrap { width: fit-content; margin: 60px auto 0; border: 1px solid var(--line); border-radius: var(--pill); padding: 2px; position: relative; background: conic-gradient(from var(--angle), transparent 0 70%, rgba(255, 118, 25, .25) 80%, var(--o2) 88%, rgba(244, 43, 12, .6) 94%, transparent 100%); animation: spinGlow 4s linear infinite; }
@keyframes spinGlow { to { --angle: 360deg; } }
.pBtn { display: flex; align-items: center; justify-content: center; height: clamp(42px, 4.6vw, 61px); padding: 0 clamp(36px, 3.47vw, 50px); border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 600; font-size: var(--fs-body); letter-spacing: -0.2px; white-space: nowrap; transition: background .4s, color .4s; }
.btnWrap:hover .pBtn { background: #000; color: #fff; }
.btnWrap.dark { border-color: rgba(255, 255, 255, .25); }
.btnWrap.dark .pBtn { background: rgba(17, 17, 17, .55); color: #fff; backdrop-filter: blur(6px); }
.btnWrap.dark:hover .pBtn { background: #fff; color: var(--ink); }
.gBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: clamp(46px, 3.9vw, 56px); padding: 0 clamp(26px, 2.5vw, 36px); border-radius: var(--pill); background: var(--grad); color: #fff; font-weight: 600; font-size: var(--fs-body); border: 0; cursor: pointer; transition: transform .3s, box-shadow .3s; }
.gBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(244, 43, 12, .7); }
.gBtn[disabled] { opacity: .6; cursor: progress; }
.tagG { display: inline-block; padding: 6px 16px; border-radius: var(--pill); background: var(--grad); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { display: inline-block; font-size: 13px; padding: 8px 14px; line-height: 1.3; border-radius: var(--pill); border: 1px solid var(--line); color: var(--gray-500); transition: .3s; }
.chip:hover { border-color: var(--o2); color: var(--o2); }
.arrowLink { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arrowLink::after { content: "›"; color: var(--o2); font-size: 18px; transition: transform .3s; }
.arrowLink:hover::after { transform: translateX(4px); }

/* ── 첫 화면 (원본 #mainSec1) ── */
.hero { position: relative; height: 100svh; min-height: 640px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: var(--ink); }
.hero-in { position: relative; padding: 0 var(--side); }
.heroTit { font-size: var(--fs-hero); font-weight: 600; line-height: 1.3; letter-spacing: -1px; }
.hero .lead { color: rgba(255, 255, 255, .85); margin: 24px auto 0; max-width: 34em; }
.hero .btnWrap { margin-top: 48px; }
.hero-in > * { opacity: 0; transform: translateY(20px); animation: up .9s var(--ease) forwards; }
.hero-in > :nth-child(2) { animation-delay: .25s; }
.hero-in > :nth-child(3) { animation-delay: .5s; }
@keyframes up { to { opacity: 1; transform: none; } }
.scrollDown { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .05em; color: #fff; }
.scrollDown img { width: 10px; animation: bob 1.6s ease-in-out infinite; filter: brightness(0) invert(1); }
@keyframes bob { 50% { transform: translateY(6px); } }
.cursorRing { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--o2); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.hero.hover .cursorRing { opacity: 1; }

/* 첫 화면 그림: PersonaOS 7개 층(L1~L7) 동심원 + 모든 층을 가로지르는 긴장(T) 선. 사진 대신 ddai의 핵심 구조를 보여 준다 */
.orbitHero { min-height: 720px; background: radial-gradient(ellipse at 50% 50%, #1d130d 0%, var(--ink) 58%); }
.orbitHero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 38% 66%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 58% 34%, rgba(255,255,255,.3), transparent); background-size: 520px 520px; opacity: .8; }
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.orb { --s: calc(30vmin + var(--i) * 15vmin); --d: calc(60s + var(--i) * 18s); position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(255, 255, 255, calc(.16 - var(--i) * .015)); opacity: 0; animation: orbIn 1.4s var(--ease) forwards, spin var(--d) linear infinite; animation-delay: calc(var(--i) * .12s), calc(var(--d) * var(--i) * -0.37); }
.orbDot b { animation: spin var(--d) linear infinite reverse; animation-delay: calc(var(--d) * var(--i) * -0.37); }
.orb:nth-child(odd) .orbDot b { animation-direction: normal; }
.orb:nth-child(odd) { animation-direction: normal, reverse; }
.orbDot { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px rgba(255, 118, 25, .8); }
.orbDot b { position: absolute; left: -9px; top: -24px; width: 28px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.tLine { position: absolute; left: -1px; top: -60vmax; width: 2px; height: 120vmax; transform: rotate(28deg); background: linear-gradient(to bottom, transparent 8%, rgba(244, 43, 12, .0) 20%, rgba(255, 118, 25, .55) 50%, rgba(244, 43, 12, 0) 80%, transparent 92%); opacity: 0; animation: orbIn 1.6s var(--ease) 1s forwards; }
.tLine b { position: absolute; left: 10px; top: calc(50% - 46vmin); font-size: 14px; font-weight: 700; color: var(--o2); transform: rotate(-28deg); }
.core { position: absolute; left: -22vmin; top: -22vmin; width: 44vmin; height: 44vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 118, 25, .22), rgba(244, 43, 12, .06) 45%, transparent 70%); animation: breathe 6s ease-in-out infinite; }
@keyframes orbIn { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.15); opacity: .7; } }
.orbitHero .hero-in { max-width: 1100px; padding-top: 80px; }
.orbitHero .kicker { font-size: clamp(12px, 1.04vw, 15px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--o2); margin-bottom: 22px; }
.orbitHero .heroTit { font-size: clamp(38px, 5.6vw, 84px); line-height: 1.22; letter-spacing: -2px; }
.heroBtns { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 44px; }
.heroBtns .btnWrap { margin: 0; border-color: rgba(255, 255, 255, .25); }
.ghostBtn { display: flex; align-items: center; height: clamp(42px, 4.6vw, 61px); padding: 0 clamp(28px, 3vw, 44px); border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 600; font-size: var(--fs-body); white-space: nowrap; transition: background .4s, border-color .4s; }
.ghostBtn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.heroThemes { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 0; margin-top: clamp(48px, 6vw, 80px); }
.heroThemes li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.heroThemes a { display: flex; gap: 8px; align-items: baseline; padding: 10px clamp(14px, 2vw, 30px); font-size: var(--fs-body); font-weight: 500; color: rgba(255, 255, 255, .7); transition: color .3s; }
.heroThemes a:hover { color: #fff; }
.heroThemes span { font-size: 12px; font-weight: 700; color: var(--o2); }
.hero-in > :nth-child(4) { animation-delay: .75s; }
.hero-in > :nth-child(5) { animation-delay: 1s; }

/* ── Who We Are (원본 #mainSec2) ── */
.sec.who { padding-bottom: 0; }
.sec.who + .sec { padding-top: clamp(50px, 5vw, 70px); }
.who .statement { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.5; max-width: 30em; margin: 24px auto 0; color: var(--ink); }
.pills { display: flex; justify-content: center; margin-top: 70px; }
.pills li { width: 50%; max-width: 720px; height: clamp(90px, 10.4vw, 150px); border-radius: var(--pill); background: var(--peach-pill); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 40px; font-size: var(--fs-body-l); font-weight: 500; }
.pills li + li { margin-left: -40px; }
.pills img { width: clamp(28px, 3vw, 44px); height: auto; }
.vline { display: block; width: 1px; height: clamp(80px, 9vw, 130px); margin: 0 auto; background: linear-gradient(var(--line), var(--o2)); position: relative; }
.vline::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--o2); }

/* 제목 선택 틀 (원본 제목 둘레의 네모 점) */
.frame { position: relative; display: inline-block; padding: 0 .2em; outline: 1px solid #ccc; outline-offset: 4px; }
.frame i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid #bbb; }
.frame i:nth-child(1) { left: -8px; top: -8px; } .frame i:nth-child(2) { right: -8px; top: -8px; }
.frame i:nth-child(3) { left: -8px; bottom: -8px; } .frame i:nth-child(4) { right: -8px; bottom: -8px; }

/* ── 대표 카드(잎 모양) (원본 #mainSec3 .listItem) ── */
.leafList { display: flex; justify-content: center; margin-top: 70px; text-align: left; }
.leaf { width: 26.4%; aspect-ratio: 1; border-radius: 10px 100px 100px 10px; background-size: cover; background-position: center; overflow: hidden; position: relative; }
.leaf + .leaf { margin-left: -1.5%; }
.leaf:nth-child(even) { margin-top: 40px; }
.leaf.grad { background-image: var(--grad); }
.leaf.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05)); }
.leaf3 { border-radius: 100px 100px 10px 10px; }
.leaf4 { border-radius: 100px; }
.leaf a { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 4.2vw, 60px) clamp(24px, 3.5vw, 50px); color: #fff; }
.leaf .num { font-size: 14px; font-weight: 600; opacity: .8; }
.leaf .era { font-size: var(--fs-body); margin-top: 6px; opacity: .85; }
.leaf strong { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.5; margin-top: 4px; }
.leaf .go { margin-top: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.leaf:hover .go { background: #fff; color: var(--o1); }
.leaf.fadeAni.active:hover { transform: translateY(-8px); transition-delay: 0s; }

/* ── 로고 흐름 (원본 #mainSec4) ── */
.logos { padding: 20px 0 clamp(80px, 10.4vw, 150px); overflow: hidden; }
.marquee { display: flex; align-items: center; gap: clamp(60px, 7vw, 110px); width: max-content; animation: flow 40s linear infinite; }
.marquee img { height: clamp(22px, 2.2vw, 32px); width: auto; }
.logos:hover .marquee { animation-play-state: paused; }
@keyframes flow { to { transform: translateX(-50%); } }

/* ── 패널 ── */
.panel { border-radius: var(--radius); position: relative; overflow: hidden; }
.panel.peach { --px: clamp(24px, 4.86vw, 70px); background: var(--peach); padding: clamp(50px, 6.9vw, 100px) var(--px) clamp(60px, 10.4vw, 150px); }
.panel.gray { background: var(--gray-50); padding: clamp(30px, 4.2vw, 60px) clamp(24px, 3.5vw, 50px); }
.waveImg { display: block; width: calc(100% + var(--px) * 2); max-width: none; height: auto; margin: 10px calc(var(--px) * -1) -11%; pointer-events: none; user-select: none; }
.waveGap { height: 60px; }
.talkRow { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.talkRow .talk { margin-top: 0; max-width: none; }
.traitCard { background: #fff; border-radius: var(--radius); padding: 30px 40px 40px; }
.traitCard > .gText { font-size: var(--fs-body-l); font-weight: 500; }
.traitCard ol { margin-top: 20px; }
.traitCard li { padding: 22px 0; border-top: 1px solid var(--gray-50); }
.traitCard li:first-child { border-top: 0; }
.traitCard b { display: block; font-size: 14px; font-weight: 600; }
.traitCard p { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.5; margin-top: 6px; }
.panel-top { position: relative; max-width: 640px; }
.panel .talk, .panel .decomp { position: relative; }

/* 대화 예시 */
.talk { background: #fff; border-radius: var(--radius); padding: clamp(24px, 2.8vw, 40px); margin-top: 50px; max-width: 820px; }
.talk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.talk-tabs button { font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--gray-500); transition: .3s; }
.talk-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.talk-body { display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; transition: opacity .4s, transform .4s; }
.msg.robot { align-self: flex-end; align-items: flex-end; }
.msg.wait { opacity: 0; transform: translateY(8px); }
.who { font-size: 12px; font-weight: 500; color: var(--gray-400); }
.say { padding: 14px 20px; border-radius: 24px; background: var(--gray-50); font-size: var(--fs-body); line-height: 1.6; min-height: 1.6em; }
.msg.robot .say { background: var(--grad); color: #fff; }
.say.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 흰 카드 3장 (원본 ArtiPen / InkCheck / LLM Trainer) */
.whiteCards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.whiteCards a { display: block; height: 100%; background: #fff; border-radius: var(--radius); padding: 30px 40px 40px; transition: transform .4s var(--ease); }
.whiteCards a:hover { transform: translateY(-6px); }
.whiteCards .gText { font-size: var(--fs-body-l); font-weight: 500; }
.whiteCards p { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.6; margin-top: 30px; }

/* 숫자: 1px 테두리 원 (원본 AI SERVICES 원형) */
.stats { padding-top: 0; }
.circles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); }
.circles li { aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12%; }
.circles b { font-size: var(--fs-title); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.circles span { font-size: var(--fs-body); margin-top: 10px; color: var(--ink); }

/* 지식 그래프: 원본 원형 다이어그램 */
.graph { margin-top: 50px; }
.graph svg { width: 100%; height: auto; overflow: visible; }
.graph .ring { fill: none; stroke: var(--o2); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; transform-origin: center; transform-box: fill-box; animation: rot 90s linear infinite; }
.graph .ring2 { fill: none; stroke: var(--line); stroke-width: 1; }
@keyframes rot { to { transform: rotate(360deg); } }
.graph line { stroke: var(--line); stroke-width: 1; transition: stroke .3s, opacity .3s; }
.gn { cursor: pointer; }
.gn text { font-family: var(--font); fill: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -0.4px; pointer-events: none; transition: opacity .3s; }
.gn circle { transition: transform .3s var(--ease), fill .3s, stroke .3s, opacity .3s; transform-box: fill-box; transform-origin: center; }
.gn-center circle { fill: var(--peach); }
.gn-center text { font-size: 58px; font-weight: 700; fill: var(--o2); letter-spacing: -2px; }
.gn-theme circle { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.gn-theme text { font-size: 17px; font-weight: 600; fill: var(--o2); }
.gn-theme text.n { font-size: 13px; fill: var(--gray-400); font-weight: 500; }
.gn-project circle { fill: var(--o2); }
.gn-tool circle { fill: #fff; stroke: var(--o2); stroke-width: 2; stroke-dasharray: 3 3; }
.gn:hover circle { transform: scale(1.08); }
.graph.hl line { opacity: .25; }
.graph.hl line.on { opacity: 1; stroke: var(--o2); stroke-width: 1.5; }
.graph.hl .gn { opacity: .3; }
.graph.hl .gn.on { opacity: 1; }
.graph.hl .gn-theme.on circle { fill: var(--peach); }
.graph-legend { display: flex; justify-content: center; gap: 24px; margin-top: 10px; font-size: 14px; color: var(--gray-500); }
.graph-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.lg-theme { border: 1px solid var(--ink); }
.lg-project { background: var(--o2); }
.lg-tool { border: 2px dashed var(--o2); }

/* 프로젝트 카드 (원본 project_list) */
.secHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.secHead .lead { margin-top: 0; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 20px; margin-top: 50px; }
.pcard .thumb { aspect-ratio: 451 / 485; border-radius: var(--radius); overflow: hidden; background: var(--gray-50); }
.pcard .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard a:hover .thumb img { transform: scale(1.05); }
.brand_name { font-size: var(--fs-lead); font-weight: 700; line-height: 1.5; margin-top: 18px; }
.prd_name { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.pcard[hidden] { display: none; }

/* 인증 띠 + 특허 패널 (원본 #mainSec7, #mainSec8) */
.certSec { padding-top: 0; }
.certBand { border-radius: var(--radius); background: var(--grad); color: #fff; }
.certBand summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 30px 50px; cursor: pointer; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; }
.certBand summary::-webkit-details-marker { display: none; }
.certBand summary span { max-width: 20em; }
.moreIco { width: 28px; height: 28px; filter: brightness(0) invert(1); transition: transform .4s; flex: none; }
.certBand[open] .moreIco { transform: rotate(180deg); }
.certList { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0 50px 40px; }
.certList li { background: rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 22px 18px; display: flex; flex-direction: column; gap: 6px; }
.certList img { height: 54px; width: auto; object-fit: contain; align-self: flex-start; background: #fff; border-radius: 8px; padding: 6px; }
.certList b { font-size: 16px; font-weight: 600; margin-top: 6px; }
.certList span { font-size: 14px; opacity: .85; }
.patentPanel { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; }
.patentHead h3 { font-size: var(--fs-lead); font-weight: 600; }
.arrows { display: flex; gap: 14px; margin-top: 20px; }
.arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; transition: border-color .3s; }
.arrows button:hover { border-color: var(--ink); }
.arrows img { width: 8px; height: auto; }
.patents { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.patents::-webkit-scrollbar { display: none; }
.patents li { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.patents img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }

/* ── 검은 구간 (원본 #mainSec9) ── */
.sec.dark { background: var(--black); color: #fff; }
.stars { background-image: radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, .4), transparent), radial-gradient(1px 1px at 38% 66%, rgba(255, 255, 255, .35), transparent), radial-gradient(1px 1px at 88% 52%, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 22% 84%, rgba(255, 255, 255, .3), transparent), radial-gradient(1px 1px at 58% 34%, rgba(255, 255, 255, .3), transparent); background-size: 520px 520px; }
.world { margin-bottom: clamp(60px, 8vw, 120px); }
.wm-wrap { margin-top: 40px; padding-bottom: 160px; }
#worldMap { position: relative; width: 100%; }
world-map { display: block; width: 100%; }
.endCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.endCards li { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 30px; min-height: 320px; display: flex; flex-direction: column; align-items: flex-start; }
.endCards .tagG { margin-bottom: 26px; }
.endCards p { font-size: var(--fs-body-l); font-weight: 500; line-height: 1.6; }
.endCards .arrowLink { margin-top: auto; padding-top: 30px; }

/* ── 하위 페이지 첫 화면 (원본 AI SERVICES 첫 화면) ── */
.subHero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 120px var(--side) 80px; }
.rings { position: absolute; inset: 0; pointer-events: none; }
.rings i, .rings b { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.rings i { border: 1px solid var(--line); }
.rings i:nth-child(1) { width: min(46vw, 640px); height: min(46vw, 640px); }
.rings i:nth-child(2) { width: min(78vw, 1100px); height: min(78vw, 1100px); }
.rings i:nth-child(3) { width: min(112vw, 1600px); height: min(112vw, 1600px); }
.rings b { width: min(95vw, 1350px); height: min(95vw, 1350px); border: 1.5px dashed rgba(255, 118, 25, .45); animation: rotC 120s linear infinite; }
@keyframes rotC { to { transform: translate(-50%, -50%) rotate(360deg); } }
.subHero-in { position: relative; max-width: 1100px; }
.subHero .tagG { margin-bottom: 30px; }
/* 테마 페이지 첫 화면: 시대 이름이 가장 크고(1순위), 그 아래 약속 문장(2순위), 설명(3순위) */
.tmKick { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; letter-spacing: .04em; color: var(--gray-500); }
.tmKick b { font-weight: 700; color: #fff; background: var(--grad); padding: 6px 14px; border-radius: var(--pill); letter-spacing: .1em; }
.tmEra { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(48px, 7.6vw, 112px); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; color: var(--ink); word-break: keep-all; }
.heroSub { margin: clamp(20px, 2.2vw, 32px) auto 0; max-width: 24em; font-size: clamp(22px, 2.5vw, 36px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
.subHero .heroTit { color: var(--ink); }
.subHero .lead { color: var(--ink); max-width: 36em; margin: 30px auto 0; }

/* 타임라인 (원본 세로 연결선 + 주황 점) */
.timeline { position: relative; max-width: 900px; margin: 0 auto; padding-left: 60px; }
.timeline::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--line), var(--o2)); }
.timeline li { position: relative; padding-bottom: 70px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .dot { position: absolute; left: -53px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--o2); box-shadow: 0 0 0 6px var(--peach); }
.timeline li.next .dot { background: #fff; border: 2px solid var(--o2); }
.timeline .place { font-size: var(--fs-body-l); font-weight: 500; }
.timeline h3 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.5; margin-top: 6px; }
.timeline p { font-size: var(--fs-body); color: var(--gray-500); margin-top: 10px; line-height: 1.7; max-width: 40em; }

/* 정보 패널 (원본 AI SERVICES 회색 카드) */
.infoCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.infoCards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.infoCards li { background: var(--gray-50); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 50px) clamp(24px, 2.8vw, 40px); }
.infoCards .gText { font-size: var(--fs-body-l); font-weight: 600; display: inline-block; }
.infoCards h3 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.5; margin-top: 8px; }
.infoCards p { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-top: 14px; }
.stepIco { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px dotted var(--o2); margin-bottom: 26px; position: relative; }
.stepIco::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--grad); }

/* 테두리 원 3개 (원본 원형 다이어그램 원) */
.ringCircles { display: flex; justify-content: center; margin-top: 60px; }
.ringCircles li { width: clamp(220px, 24vw, 340px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--ink); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.ringCircles li + li { margin-left: -30px; }
.ringCircles li:nth-child(2) { background: var(--peach); border-color: transparent; }
.ringCircles b { font-size: var(--fs-lead); font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.3; }
.ringCircles span { font-size: var(--fs-body); margin-top: 10px; color: var(--ink); }

/* PersonaOS 분해 */
.decomp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; align-items: center; margin-top: 50px; }
.layers { display: flex; flex-direction: column; gap: 10px; }
.layers li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: #fff; border-radius: var(--pill); padding: 18px 30px; transition: transform .6s var(--ease), opacity .6s, box-shadow .6s; transition-delay: calc(var(--i) * .15s); }
.layers b { font-size: var(--fs-body-l); font-weight: 600; }
.layers span { font-size: var(--fs-body); color: var(--gray-500); }
.layers em { font-size: 13px; font-weight: 600; }
.decomp.active .layers li.pick { transform: translateX(20px); box-shadow: inset 0 0 0 1px var(--o2); }
.decomp.active .layers li:not(.pick) { opacity: .35; }
.layers li:not(.pick) em { background: none; color: var(--gray-400); }
.agent { border-radius: 10px 100px 100px 10px; background: var(--grad); color: #fff; padding: clamp(30px, 4vw, 60px) clamp(24px, 3.5vw, 50px); display: flex; flex-direction: column; gap: 8px; min-height: 260px; justify-content: center; }
.agent .num { font-size: 26px; }
.agent strong { font-size: var(--fs-lead); font-weight: 600; }
.note { position: relative; font-size: 14px; color: var(--gray-500); margin-top: 30px; }

/* 언어 알약 */
.langPills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; }
.langPills li { padding: 16px 30px; border-radius: var(--pill); background: var(--peach-pill); font-size: var(--fs-body-l); font-weight: 500; transition: transform .3s; }
.langPills li:hover { transform: translateY(-3px); }
.langPills li.more { background: var(--grad); color: #fff; }

/* 인문학 인용 */
.quotePanel blockquote { font-size: var(--fs-lead); font-weight: 600; line-height: 1.6; max-width: 34em; position: relative; }
.quotePanel blockquote::before { content: "“"; display: block; font-size: 80px; line-height: .8; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quotePanel .cite { font-size: 14px; color: var(--gray-500); margin-top: 20px; }
.harvard { margin-top: 50px; padding-top: 40px; border-top: 1px solid rgba(255, 118, 25, .2); max-width: 46em; }
.harvard h3 { font-size: var(--fs-body-l); font-weight: 600; }
.harvard p { font-size: var(--fs-body); color: var(--ink); margin-top: 10px; line-height: 1.7; }

/* 다음 테마 */
.nextSec { padding-top: 0; }
.nextTheme { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 50px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nextTheme .gText { font-size: var(--fs-body-l); font-weight: 600; width: 100%; }
.nextTheme strong { font-size: var(--fs-title); font-weight: 600; letter-spacing: -1px; line-height: 1.2; transition: transform .4s var(--ease); }
.nextTheme .exp { width: 40px; transition: transform .4s var(--ease); }
.nextTheme:hover strong, .nextTheme:hover .exp { transform: translateX(12px); }

/* 프로젝트 목록·상세 */
.pageTop { padding-top: clamp(120px, 11vw, 160px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 50px; }
.filters button { padding: 10px 22px; border-radius: var(--pill); border: 1px solid var(--line); font-size: var(--fs-body); color: var(--gray-500); transition: .3s; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters + .pgrid { margin-top: 40px; }
.back { display: inline-block; padding: 8px 0; color: var(--gray-500); margin-bottom: 32px; }
.back:hover { color: var(--ink); }
.pvTop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.pvTop .thumb { border-radius: var(--radius); overflow: hidden; background: var(--gray-50); }
.pvTop .thumb img { width: 100%; }
.pvTxt .brand_name { font-size: var(--fs-title); font-weight: 600; letter-spacing: -1px; line-height: 1.3; margin-top: 0; }
.pvTxt .prd_name { font-size: var(--fs-body-l); color: var(--gray-500); margin-top: 6px; }
.pvTxt .desc { font-size: var(--fs-body); line-height: 1.85; margin-top: 30px; color: var(--ink); }
.pvTxt .chips { margin-top: 24px; }
.pvTxt .gBtn { margin-top: 36px; }
.editor { margin-top: 80px; padding-top: 50px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.85; }
.editor img { border-radius: var(--radius); margin: 20px 0; }
.pvNav { display: flex; justify-content: space-between; gap: 20px; margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--line); font-weight: 600; }
.pvNav a { display: inline-block; padding: 8px 0; }
.pvNav a:hover { color: var(--o2); }

/* 문의 (원본 CONTACT US: peach 패널 + 흰 입력칸 + 그라데이션 버튼) */
.contactPanel { margin-top: 50px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 50px; }
.contactSide h2 { font-size: var(--fs-lead); font-weight: 600; display: inline-block; }
.contactSide p { margin-top: 14px; font-size: var(--fs-body); }
.contactSide a:hover { color: var(--o2); }
.cform { display: flex; flex-direction: column; gap: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-size: var(--fs-body); font-weight: 500; }
.field input, .field textarea { font: inherit; font-size: var(--fs-body); color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: var(--radius); padding: 16px 20px; width: 100%; outline: 0; resize: none; transition: border-color .3s; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }
.field input:focus, .field textarea:focus { border-color: var(--o2); }
.field.bad input, .field.bad textarea { border-color: var(--o1); }
.err { font-size: 13px; color: var(--o1); }
.err:empty { display: none; }
.formBottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.agree label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.agree input { width: 20px; height: 20px; accent-color: var(--o2); }
.agree details { margin-top: 8px; font-size: 13px; color: var(--gray-500); }
.agree summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.agree ul { margin-top: 8px; padding-left: 16px; list-style: disc; }
.form-msg { font-weight: 600; }
.form-msg.ok { color: #15803d; }
.form-msg.no { color: var(--o1); }


/* ── PersonaOS 페이지 (논문 시각화) ── */
.subTit { font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; line-height: 1.35; letter-spacing: -0.8px; }
.limitCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.limitCards li, .ethics li, .appCards > li, .tCards li { background: var(--gray-50); border-radius: var(--radius); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 36px); }
.limitCards .gText, .ethics .gText, .appCards .gText { font-size: var(--fs-body-l); font-weight: 600; display: inline-block; }
.limitCards h3, .ethics h3, .appCards h3, .tCards h3 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; margin-top: 8px; }
.limitCards p, .ethics p, .appCards p, .tCards p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-top: 12px; }

.stackWrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); margin-top: 50px; align-items: start; }
.axis { font-size: 13px; font-weight: 600; color: var(--gray-400); text-align: center; }
.axis.top { margin-bottom: 14px; }
.axis.bottom { margin-top: 14px; }
.stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lyr { position: relative; width: var(--w); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; height: 58px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--pill); background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease), opacity .35s; }
.lyr b { font-size: 14px; font-weight: 700; color: var(--o2); }
.lyr span { font-size: var(--fs-body-l); font-weight: 600; }
.lyr i { font-style: normal; font-size: 13px; color: var(--gray-400); }
.lyr:hover { border-color: var(--o2); }
.lyr.on { background: var(--grad); color: #fff; }
.lyr.on b, .lyr.on i { color: rgba(255, 255, 255, .85); }
.stack.q .lyr:not(.hit):not(.on):not(.keep) { opacity: .35; }
.lyr.hit { border-color: var(--o2); transform: scale(1.02); }
.lyr.keep { border-style: dashed; border-color: var(--o2); }
.tBand { position: absolute; top: -10px; bottom: -10px; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient(to bottom, rgba(255, 118, 25, 0), var(--o1) 15%, var(--o2) 85%, rgba(255, 118, 25, 0)); pointer-events: none; z-index: 1; mix-blend-mode: multiply; }
.tCap { margin-top: 18px; text-align: center; font-size: 14px; color: var(--gray-500); }
.tCap b { color: var(--o2); margin-right: 4px; }
.lyrInfo { position: sticky; top: 110px; }
.lyrCard { background: #fff; border-radius: var(--radius); padding: clamp(28px, 3vw, 44px); }
.js .lyrCard:not(.on) { display: none; }
.lyrCard + .lyrCard { margin-top: 12px; }
.js .lyrCard + .lyrCard { margin-top: 0; }
.lyrCard .gText { font-size: 15px; font-weight: 700; }
.lyrCard h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 600; margin-top: 6px; letter-spacing: -1px; }
.lyrCard > p { font-size: var(--fs-body-l); font-weight: 500; margin-top: 14px; line-height: 1.6; }
.lyrCard dl { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.lyrCard dt { font-size: 13px; font-weight: 600; color: var(--gray-400); }
.lyrCard dd { font-size: 15px; color: var(--gray-500); margin-top: 6px; line-height: 1.6; }
.queries { margin-top: 24px; }
.queries > p { font-size: 15px; font-weight: 600; }
.queries ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.queries button { font: inherit; font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.queries button b { color: var(--o2); font-weight: 700; margin-left: 4px; }
.queries button:hover, .queries button[aria-pressed="true"] { border-color: var(--o2); }
.queries button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.queries small { display: block; margin-top: 12px; font-size: 13px; color: var(--gray-500); }

.tCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.tCards .glyph { display: block; width: 56px; height: 56px; margin-bottom: 22px; }
.glyph svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph svg .o { stroke: var(--o2); stroke-width: 2.5; }
.glyph svg .f { fill: var(--ink); stroke: none; }
.tCards .gText { font-size: 15px; font-weight: 700; }
.tCards h3 { margin-top: 4px; }
.tCards .ex { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.exNote { margin-top: 14px; font-size: 13px; color: var(--gray-400); }
.tRules { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 40px; }
.tRules h3 { font-size: var(--fs-lead); font-weight: 600; }
.tRules ol { counter-reset: r; margin-top: 18px; }
.tRules li { counter-increment: r; position: relative; padding-left: 34px; font-size: var(--fs-body); line-height: 1.6; }
.tRules li + li { margin-top: 10px; }
.tRules li::before { content: counter(r); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.chipLabel { display: inline-block; font-size: 13px; font-weight: 600; color: var(--o2); background: var(--peach-pill); padding: 6px 14px; border-radius: var(--pill); }
.bubble { position: relative; margin-top: 14px; background: #fff; border-radius: 10px 30px 30px 30px; padding: 26px 30px; font-size: var(--fs-body-l); font-weight: 500; line-height: 1.6; box-shadow: 0 10px 30px rgba(0, 0, 0, .04); }
.bubble::before { content: "T"; position: absolute; left: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }

.method ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.method li { position: relative; background: var(--peach); border-radius: var(--radius); padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 36px); }
.method li + li::before { content: "→"; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--o2); font-weight: 700; z-index: 1; }
.method .num { font-size: 14px; font-weight: 700; color: var(--o2); }
.method h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; margin-top: 6px; }
.method p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-top: 12px; }
.loop { position: relative; margin: 0 16.6% 0; padding-top: 22px; text-align: center; font-size: 14px; font-weight: 600; color: var(--gray-500); border: 2px dashed rgba(255, 118, 25, .45); border-top: 0; border-radius: 0 0 30px 30px; height: 64px; }
.loop span { color: var(--o2); font-size: 18px; margin-right: 4px; }
.gradeBox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(30px, 5vw, 80px); margin-top: clamp(80px, 9vw, 130px); align-items: start; }
.grades { display: flex; flex-direction: column; gap: 10px; }
.grades li { position: relative; width: var(--w); min-width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 16px 24px; border-radius: var(--radius); background: var(--gray-50); }
.grades b { font-size: var(--fs-body-l); font-weight: 600; }
.grades span { font-size: 14px; color: var(--gray-500); }
.grades li.top { background: var(--grad); color: #fff; }
.grades li.top span { color: rgba(255, 255, 255, .85); }
.badge { position: absolute; right: 16px; top: 16px; font-style: normal; font-size: 12px; font-weight: 700; background: #fff; color: var(--o1); padding: 4px 10px; border-radius: var(--pill); }

.appCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 50px; }
.appCards .scope { color: var(--ink); font-weight: 600; margin-top: 6px; }
.lchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.lchips li { min-width: 40px; padding: 0 10px; height: 32px; display: grid; place-items: center; border-radius: var(--pill); font-size: 12px; font-weight: 700; color: var(--gray-400); background: #fff; border: 1px solid var(--line); }
.lchips li.on { background: var(--grad); color: #fff; border-color: transparent; }
.lchips li.mix { border: 1px dashed var(--o2); color: var(--o2); }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--gray-500); max-width: 60em; }
.legend i { width: 18px; height: 12px; border-radius: var(--pill); display: inline-block; }
.legend i.on { background: var(--grad); }
.legend i.mix { border: 1px dashed var(--o2); margin-left: 12px; }

.posEval { color: #fff; }
.badgeLine { font-size: 14px; font-weight: 600; color: var(--o2); border: 1px solid var(--o2); padding: 8px 18px; border-radius: var(--pill); }
.evalGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); margin-top: 60px; align-items: end; }
.hypBars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; height: 340px; align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 0; }
.hypBars li { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; position: relative; }
.hypBars .bar { display: block; height: var(--h); border-radius: 10px 10px 0 0; border: 1px dashed rgba(255, 255, 255, .45); border-bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 6px, transparent 6px 12px); transform-origin: bottom; transition: transform 1.2s var(--ease); }
.hypBars li:last-child .bar { border-color: var(--o2); background: repeating-linear-gradient(135deg, rgba(255, 118, 25, .35) 0 6px, rgba(244, 43, 12, .12) 6px 12px); }
.js .hypBars:not(.active) .bar { transform: scaleY(0); }
.hypBars li:nth-child(2) .bar { transition-delay: .15s; } .hypBars li:nth-child(3) .bar { transition-delay: .3s; } .hypBars li:nth-child(4) .bar { transition-delay: .45s; }
.hypBars b { position: absolute; top: calc(100% + 12px); left: 0; right: 0; font-size: 16px; font-weight: 700; }
.hypBars .cd { position: absolute; top: calc(100% + 38px); left: 0; right: 0; font-size: 12px; color: rgba(255, 255, 255, .6); line-height: 1.3; }
.hypBars { margin-bottom: 92px; }
.hypList ul:first-child li { display: flex; gap: 14px; font-size: var(--fs-body-l); font-weight: 500; line-height: 1.5; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hypList ul:first-child b { color: var(--o2); flex: none; width: 28px; }
.hypList h3 { font-size: 15px; font-weight: 600; color: var(--gray-400); margin-top: 30px; }
.metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.metrics li { font-size: 14px; padding: 8px 16px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .85); }

.ethics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 50px; }
.ethics h3 { font-size: clamp(20px, 1.7vw, 24px); }
.paperCite { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--gray-500); max-width: 70em; }


/* PersonaOS v2 (논문 「judgement, not tone」) */
.lyr span { display: flex; align-items: center; gap: 8px; }
.wt { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--pill); background: var(--peach-pill); color: var(--o1); white-space: nowrap; }
.lyr.on .wt { background: rgba(255, 255, 255, .25); color: #fff; }
.layerNotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.layerNotes li { background: #fff; border-radius: var(--radius); padding: 26px 28px; }
.layerNotes h3 { font-size: var(--fs-body-l); font-weight: 600; }
.layerNotes p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-top: 10px; }
.vHead { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.vBar { width: 4px; height: 44px; border-radius: 4px; background: linear-gradient(to bottom, var(--o1), var(--o2)); }
.vPlus { font-weight: 700; color: var(--gray-400); }
.vBlock { margin-top: clamp(50px, 6vw, 80px); padding-top: clamp(40px, 4vw, 60px); border-top: 1px solid var(--line); }
.vIntro { max-width: 860px; }
.vIntro .subTit { margin-top: 14px; }
.vIntro > p { font-size: var(--fs-body-l); font-weight: 500; color: var(--gray-500); line-height: 1.6; margin-top: 16px; }
.vBlock .tCards { margin-top: 36px; }
.theoryLine { margin-top: 18px; font-size: 13px; color: var(--gray-400); line-height: 1.6; max-width: 70em; }
.ruleCard { margin-top: 36px; border-radius: var(--radius); background: var(--peach); padding: 10px clamp(20px, 3vw, 40px); }
.ruleCard li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255, 118, 25, .18); }
.ruleCard li:first-child { border-top: 0; }
.rk { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-lead); font-weight: 600; }
.rk b { font-size: 13px; font-weight: 700; color: var(--o2); }
.rd { font-size: 15px; color: var(--gray-500); }
.rx { background: #fff; border-radius: var(--pill); padding: 12px 20px; font-size: 15px; font-weight: 500; }
.rx em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--o2); margin-right: 8px; }
.ruleNote { margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--ink); max-width: 60em; }

.posFlow .panel.gray { padding: clamp(40px, 6vw, 90px) clamp(24px, 4.86vw, 70px); }
.flowWrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); margin-top: 50px; align-items: start; }
.caseCol h3 { font-size: var(--fs-lead); font-weight: 600; }
.facts { margin-top: 18px; background: #fff; border-radius: var(--radius); padding: 6px 24px; }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--gray-50); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: 13px; font-weight: 700; color: var(--o2); }
.facts dd { font-size: 15px; line-height: 1.55; }
.pick { margin-top: 28px; font-size: 15px; font-weight: 600; }
.scen { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.scen button { text-align: left; font: inherit; font-size: 15px; font-weight: 500; padding: 14px 22px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.scen button:hover { border-color: var(--o2); }
.scen button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.answer { margin-top: 22px; }
.js .answer:not(.on) { display: none; }
.answer .bubble { margin-top: 12px; }
.answer .bubble::before { content: "P"; }
.why { margin-top: 12px; font-size: 14px; color: var(--gray-500); line-height: 1.6; }
.profileCmp { margin-top: 18px; padding: 16px 20px; border: 1px dashed var(--gray-400); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--gray-500); }
.profileCmp b { color: var(--ink); font-weight: 600; }
.flow { display: flex; flex-direction: column; align-items: center; }
.fn { width: 100%; max-width: 420px; text-align: center; padding: 14px 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 500; transition: border-color .35s, background .35s, color .35s, opacity .35s; }
.fn.q { border-radius: var(--pill); border-style: dashed; }
.flow.picked .fn:not(.on) { opacity: .35; }
.fn.on { border-color: var(--o2); border-style: solid; }
.fn.act.on { background: var(--grad); color: #fff; border-color: transparent; }
.fn[data-n="def"].on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fa { display: block; width: 2px; height: 22px; background: var(--line); position: relative; }
.fa::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent; border-top-color: var(--gray-400); }
.fy { display: block; margin: 8px 0; font-size: 12px; font-weight: 600; color: var(--gray-500); }
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; margin-top: 14px; }
.br { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.br small { font-size: 12px; font-weight: 700; color: var(--o2); }
.br .fn { height: 100%; display: flex; align-items: center; justify-content: center; }
.floop { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--gray-500); text-align: center; }

.gradeRules { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.gradeRules li { position: relative; padding-left: 18px; font-size: 15px; color: var(--gray-500); line-height: 1.6; }
.gradeRules li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--o2); }
.ablation { margin-top: 0; font-size: 14px; color: rgba(255, 255, 255, .65); line-height: 1.6; }
.gapEth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.gaps { margin-top: 40px; }
.gaps li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.6; }
.gaps b { flex: none; font-size: 13px; color: var(--o2); padding-top: 2px; }
.ethicsList { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ethicsList li { background: var(--gray-50); border-radius: var(--radius); padding: 24px 26px; }
.ethicsList li:last-child { grid-column: 1 / -1; }
.ethicsList .gText { font-size: 14px; font-weight: 700; }
.ethicsList h3 { font-size: var(--fs-body-l); font-weight: 600; margin-top: 4px; }
.ethicsList p { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin-top: 8px; }
.closing { margin-top: clamp(80px, 9vw, 130px); text-align: center; font-size: clamp(24px, 2.6vw, 38px); font-weight: 600; line-height: 1.45; letter-spacing: -0.8px; max-width: 980px; margin-left: auto; margin-right: auto; }

/* 가독성: 한 줄 최대 70~75자 */
.quotePanel .cite, .pv p, .pvBody p { max-width: 70em; }
.contact .direct, .contactPanel a { display: inline-block; padding: 6px 0; }

/* ── 푸터 (원본 footer) ── */
#footer { background: var(--ink); padding: 60px clamp(20px, 6.9vw, 100px); }
#footer .inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footerLogo img { height: 22px; width: auto; }
.footerLogo img.inv { filter: brightness(0) invert(1); }
.footerCert { margin-top: 20px; }
.footerCert img { height: 82px; width: auto; }
#footer .right { display: flex; gap: 80px; flex-wrap: wrap; }
.footerGroup h4 { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 14px; }
.footerGroup li { font-size: 15px; color: var(--gray-500); line-height: 1.6; }
.footerGroup a { display: inline-block; padding: 6px 0; }
.footerGroup a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .fadeAni, .hero-in > * { opacity: 1 !important; transform: none !important; }
}

/* ── 화면 단계 1240 / 1024 / 768 / 540 ── */
@media (max-width: 1240px) {
  #gnb ul { gap: 22px; }
  #gnb a { font-size: 14px; }
  .certList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  #gnb, #langSelector { display: none; }
  #hamburger { display: block; }
  #mobileGnb { display: flex; flex-direction: column; position: fixed; inset: 0; background: #fff; padding: 100px 30px 40px; transform: translateX(100%); transition: transform .5s var(--ease); z-index: -1; color: var(--ink); }
  #mobileGnb.show { transform: none; }
  .mobileNav a { display: block; font-size: 26px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--gray-50); }
  .mobileNav a.on { color: var(--o2); }
  .mobileLang { display: flex; gap: 10px; margin-top: 30px; }
  .mobileLang a { padding: 8px 18px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 14px; }
  .mobileLang a.current { background: var(--ink); color: #fff; border-color: var(--ink); }
  body.fixed #header #hamburger, body.on-dark.fixed #header:not(.solid) #hamburger { color: var(--ink); }
  body.fixed #header .logo img { filter: none !important; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .whiteCards { grid-template-columns: minmax(0, 1fr); }
  .talkRow { grid-template-columns: minmax(0, 1fr); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decomp { grid-template-columns: minmax(0, 1fr); }
  .stackWrap, .tRules, .gradeBox, .evalGrid { grid-template-columns: minmax(0, 1fr); }
  .lyrInfo { position: static; }
  .flowWrap, .gapEth, .layerNotes { grid-template-columns: minmax(0, 1fr); }
  .tCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ethics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contactPanel { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .patentPanel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .infoCards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leafList { flex-wrap: wrap; gap: 14px; }
  .leaf { width: calc(50% - 7px); }
  .leaf + .leaf { margin-left: 0; }
  .leaf:nth-child(even) { margin-top: 0; }
}
@media (max-width: 768px) {
  .pills { flex-direction: column; align-items: center; }
  .limitCards, .appCards, .method ol, .tCards { grid-template-columns: minmax(0, 1fr); }
  .ruleCard li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rx { border-radius: var(--radius); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ethicsList { grid-template-columns: minmax(0, 1fr); }
  .lyr .wt { display: none; }
  .ethics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method li + li::before { content: "↓"; left: 50%; top: -17px; transform: translateX(-50%); }
  .loop { margin: 0 24px; }
  .lyr { --w: 100% !important; height: 52px; padding: 0 18px; grid-template-columns: 34px minmax(0, 1fr) auto; }
  .hypBars { height: 240px; gap: 10px; }
  .grades li { width: 100%; min-width: 0; }
  .heroThemes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .heroThemes li:nth-child(3) { border-left: 0; }
  .orbitHero .heroTit { letter-spacing: -1px; }
  .pills li { width: 100%; }
  .pills li + li { margin: -20px 0 0; }
  .circles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infoCards, .endCards { grid-template-columns: minmax(0, 1fr); }
  .certList { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 24px 30px; }
  .certBand summary { padding: 26px 24px; }
  .ringCircles { flex-direction: column; align-items: center; }
  .ringCircles li + li { margin: -30px 0 0; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .graph { overflow-x: auto; }
  .graph svg { min-width: 680px; }
  .patents li { flex-basis: 70%; }
  .layers li { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 22px; }
  .layers span { grid-column: 1 / -1; grid-row: 2; }
  .timeline { padding-left: 40px; }
  .timeline .dot { left: -33px; }
  .timeline::before { left: 7px; }
}
@media (max-width: 540px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .leaf { width: 100%; aspect-ratio: 1.4; }
  .infoCards.four { grid-template-columns: minmax(0, 1fr); }
  .panel.peach { padding-left: 20px; padding-right: 20px; }
  .talk { padding: 20px; }
  .msg { max-width: 92%; }
  .footerCert img { height: 60px; }
}

/* ── Crossroads: 연구 카드 뉴스 (애플 지원 페이지식 둥근 회색 카드) ── */
.xrTit { margin-top: 24px; font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; max-width: 900px; }
.xr .lead { margin-top: 16px; max-width: 760px; }
.xrHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.xrHead h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; }
.xrHead p { color: #5f5f5f; font-size: var(--fs-body); }
.xr .filters { margin-top: 24px; }
.xr .filters button { min-height: 44px; }
.xr .filters .n { margin-left: 4px; opacity: .7; font-size: .9em; }
.xgrid { gap: 20px; align-items: stretch; }
.xcard article { height: 100%; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 18px; background: var(--gray-50); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.xcard article:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.xTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xOrg { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 10px; background: #fff; border: 1px solid #e3e3e3; font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.xTopic { font-size: 14px; font-weight: 600; color: #d92a0a; }
.xH { margin-top: 24px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; line-height: 1.35; }
.xMeta { margin-top: 10px; font-size: 14px; color: #5f5f5f; }
.xS { margin-top: 16px; font-size: var(--fs-body); line-height: 1.65; }
.xUse { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: #fff; }
.xUse strong { display: block; font-size: 14px; color: #d92a0a; }
.xUse p { margin-top: 6px; font-size: var(--fs-body); line-height: 1.6; }
.xFoot { margin-top: auto; padding-top: 20px; }
.xPaper { font-size: 13px; line-height: 1.5; color: #5f5f5f; font-style: italic; }
.xLink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: var(--fs-body); font-weight: 600; color: #0066cc; }
.xLink:hover { text-decoration: underline; }
.xLink .chev { margin-left: 4px; }
.xcard .chips { margin-top: 4px; }
.xNote { margin-top: 48px; font-size: 14px; color: #5f5f5f; }
@media (max-width: 768px) {
  .xgrid { grid-template-columns: 1fr; }
  .xcard article { padding: 28px 22px 22px; }
}

/* 점검 보완 (2026-11-02) */
.scrollDown { min-height: 44px; min-width: 44px; padding: 8px 12px; justify-content: center; }
@media (max-width: 768px) {
  /* 카드가 많아 길어지므로 주제 버튼을 화면 위에 붙여 두고 한 줄로 넘겨 본다 */
  .xr .filters { position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--side) * -1); margin-right: calc(var(--side) * -1); padding: 10px var(--side); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: none; }
  .xr .filters::-webkit-scrollbar { display: none; }
  .xr .filters button { flex: 0 0 auto; padding: 10px 16px; }
  .xrHead { margin-top: 40px; }
}

/* 메뉴 개편·Work (2026-11-03) */
.leaf .line { font-size: 14px; line-height: 1.55; margin-top: 10px; opacity: .9; max-width: 22em; }
.infoCards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.who .statement.vision { font-size: var(--fs-lead); font-weight: 700; line-height: 1.6; max-width: 34em; }
.wcard .wNum { font-size: 15px; font-weight: 700; }
.wcard .xH { margin-top: 14px; }
.wList { margin-top: 18px; display: grid; gap: 14px; }
.wList div { padding: 14px 16px; border-radius: 12px; background: #fff; }
.wList dt { font-size: 13px; font-weight: 700; color: #d92a0a; }
.wList dd { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.6; }
.checkList { counter-reset: ck; display: grid; gap: 10px; }
.checkList li { counter-increment: ck; position: relative; padding: 14px 18px 14px 56px; border-radius: 12px; background: var(--gray-50); font-size: var(--fs-body); line-height: 1.6; }
.checkList li::before { content: counter(ck, decimal-leading-zero); position: absolute; left: 18px; top: 14px; font-weight: 700; color: #d92a0a; }
.rubricPanel h2 { font-size: var(--fs-lead); font-weight: 700; }
.rubricPanel p { margin-top: 14px; font-size: var(--fs-body-l); line-height: 1.7; max-width: 46em; }
@media (max-width: 1024px) {
  .infoCards.three { grid-template-columns: minmax(0, 1fr); }
  .leaf .line { display: none; }
}