/* XERKONIX TACTILE · light.css · v3.1.0
   읽는 순서와 다음 행동을 위한 공통 컴포넌트. tokens.css 선행 로드. */
.x-stage,.x-stage--hero,.x-stage--quiet,.x-stage--tint{background:var(--x-bg)}
.x-stage--panel{background:var(--x-panel)}
.x-stage--dark{background:var(--x-black);color:var(--x-ink)}
.x-panel{background:var(--x-panel);border-radius:var(--x-r-lg);padding:var(--x-sp-6);box-shadow:none}
.x-flat,.x-lit{box-shadow:none}
.x-lit{position:relative}
.x-lit:is(a[href],button,[role="button"]):hover{box-shadow:inset 0 0 0 1px var(--x-hair)}
.x-lit::before{content:none}
@media(hover:hover) and (pointer:fine){
 .x-lit[data-cursor-light]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(220px circle at var(--x-mx,20%) var(--x-my,10%),var(--x-hi),transparent 70%);opacity:0;transition:opacity var(--x-t1) var(--x-ease)}
 .x-lit[data-cursor-light]:hover::before{opacity:.12}
}
.x-well{background:var(--x-bg);border:1px solid var(--x-muted);border-radius:var(--x-r-sm);box-shadow:none}
.x-well:focus-within{outline:2px solid var(--x-tint-text);outline-offset:3px}
.x-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--x-sp-2);min-height:var(--x-control-height);max-width:100%;background:var(--x-ink);color:var(--x-bg);border:1px solid transparent;border-radius:var(--x-pill);padding:12px 24px;font:600 var(--x-fs-small)/1.4 var(--x-sans);text-align:center;text-decoration:none;cursor:pointer;box-shadow:none;transition:box-shadow var(--x-t1) var(--x-ease),transform var(--x-t1) var(--x-ease)}
.x-btn:hover{box-shadow:0 0 0 3px var(--x-hair);text-decoration:none}
.x-btn:active{transform:scale(.98);box-shadow:none}
.x-btn:disabled,.x-btn[aria-disabled="true"]{opacity:.55;cursor:default;box-shadow:none;transform:none}
.x-btn--sm{min-height:44px;padding:8px 16px;font-size:14px}
.x-btn--ghost{background:transparent;color:var(--x-ink);border-color:var(--x-hair);box-shadow:none}
.x-btn--ghost:hover{background:var(--x-panel);border-color:var(--x-muted);box-shadow:none}
.x-btn--text{background:transparent;color:var(--x-tint-text);border-color:transparent;box-shadow:none;padding:8px 10px;font-weight:550}
.x-btn--text:hover{color:var(--x-tint-text);text-decoration:underline;text-underline-offset:4px;box-shadow:none}
.x-device{background:var(--x-ink);border-radius:var(--x-r-lg);padding:12px;box-shadow:none}
.x-screen{position:relative;border-radius:var(--x-r-card);overflow:hidden;background:var(--x-panel)}
.x-screen::after{content:none}
.x-scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;background:var(--x-tint-text);transform:translateY(0);transition:transform var(--x-t2) linear,opacity var(--x-t1) var(--x-ease)}
.x-mono{font-family:var(--x-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:var(--x-fs-caption);font-weight:500}
:focus-visible{outline:2px solid var(--x-tint-text);outline-offset:4px;border-radius:4px}

/* 소개 화면과 업무 화면은 제목의 역할·정렬을 구분한다. */
.x-wrap{width:min(var(--x-content-width),calc(100% - 48px));margin-inline:auto}
.x-narrow{max-width:var(--x-reading-width);margin-inline:auto}
.x-center{text-align:center}
.x-h-display{font-weight:700;letter-spacing:-.035em;font-size:clamp(var(--x-fs-display-mobile),4vw,var(--x-fs-display));line-height:1.16;color:var(--x-ink)}
.x-h-section{font-weight:700;letter-spacing:-.03em;font-size:clamp(var(--x-fs-section-mobile),3.1vw,var(--x-fs-section));line-height:var(--x-leading-heading);color:var(--x-ink)}
.x-h-tile{font-weight:600;font-size:var(--x-fs-title);line-height:1.4;color:var(--x-ink)}
.x-h-compare{font-weight:650;font-size:28px;line-height:1.3;color:var(--x-ink)}
.x-lede{font-weight:400;font-size:20px;line-height:1.55;color:var(--x-ink)}
.x-copy{font-size:var(--x-fs-body);line-height:var(--x-leading-body);color:var(--x-ink)}
.x-eyebrow{display:block;font-size:var(--x-fs-caption);line-height:1.5;font-weight:600;color:var(--x-muted);margin-bottom:12px}
.x-lnk{font-size:var(--x-fs-small);color:var(--x-tint-text);display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.x-lnk::after{content:" ›"}
.x-lnk:hover{color:var(--x-tint-text);text-decoration:underline;text-underline-offset:4px}
.x-lnk--sm{font-size:var(--x-fs-small)}
.x-glow-dark,.x-glow-light{color:var(--x-ink);background:none}
.x-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.x-page-heading h1,.x-page-heading h2{font-size:var(--x-fs-page);font-weight:700;line-height:1.25;letter-spacing:-.03em;margin:0}
.x-page-heading p{margin:12px 0 0;font-size:var(--x-fs-small);line-height:1.6;color:var(--x-muted);max-width:var(--x-reading-width)}
:is(.x-h-display,.x-h-section,.x-h-tile,.x-lede,.x-copy,.x-page-heading,.x-panel){word-break:keep-all;overflow-wrap:anywhere}
.x-page-heading>*{min-width:0}

/* 표와 기록은 각각의 읽기 방향을 그대로 표현한다. */
.x-table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.x-table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--x-fs-small);line-height:1.6}
.x-table caption{text-align:left;font-size:var(--x-fs-title);font-weight:600;padding-bottom:20px;color:var(--x-ink)}
.x-table th,.x-table td{padding:16px 20px;border-bottom:1px solid var(--x-hair);vertical-align:top}
.x-table th{font-weight:600}
.x-table thead th{font-size:var(--x-fs-caption);color:var(--x-muted);border-top:1px solid var(--x-ink)}
.x-table :is(th,td):first-child{padding-left:0}
.x-table :is(th,td):last-child{padding-right:0}
.x-records{list-style:none;padding:0;margin:0}
.x-records>li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:24px;padding:24px 0}
.x-records>li+li{border-top:1px solid var(--x-hair-soft)}
.x-records time{font-size:var(--x-fs-small);font-variant-numeric:tabular-nums;color:var(--x-muted)}
.x-records h3{font-size:var(--x-fs-title);line-height:1.4;margin:0 0 8px}
.x-records p{font-size:var(--x-fs-body);line-height:1.6;margin:0}
.x-disclosure{border-block:1px solid var(--x-hair);padding:4px 0;font-size:var(--x-fs-small);line-height:1.6}
.x-disclosure summary{padding:14px 0;cursor:pointer;font-weight:550;min-height:48px}
.x-disclosure[open]{padding-bottom:20px}
.x-empty{padding:32px 0;max-width:var(--x-reading-width)}
.x-empty h2,.x-empty h3{font-size:var(--x-fs-title);margin:0 0 12px;font-weight:600;line-height:1.4}
.x-empty p{font-size:var(--x-fs-body);line-height:1.6;margin:0 0 20px;color:var(--x-muted)}
.x-nav{position:sticky;top:0;z-index:50;height:60px;background:var(--x-bg);border-bottom:1px solid var(--x-hair-soft)}
.x-local{position:sticky;top:60px;z-index:45;min-height:52px;background:var(--x-bg);border-bottom:1px solid var(--x-hair-soft)}
.x-ribbon{height:14px;background:var(--x-panel);border-bottom:1px solid var(--x-hair)}
img.x-wordmark{display:block;height:14px;width:auto}
.x-tgl{width:44px;height:26px;border-radius:var(--x-pill);background:var(--x-well);position:relative;border:1px solid var(--x-muted);padding:0;cursor:pointer}
.x-tgl::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--x-panel);box-shadow:0 0 0 1px var(--x-hair);transition:transform var(--x-t2) var(--x-ease)}
.x-tgl[aria-pressed="true"],.x-tgl.on{background:var(--x-ink);border-color:var(--x-ink)}
.x-tgl[aria-pressed="true"]::after,.x-tgl.on::after{transform:translateX(18px);background:var(--x-bg)}
.x-tgl .x-knob{display:none}
.x-reveal,.x-reveal.is-in{opacity:1;transform:none}

@media(max-width:520px){
 .x-wrap{width:calc(100% - 40px)}
 .x-panel{padding:24px 20px}
 .x-h-display{font-size:var(--x-fs-display-mobile);line-height:1.18}
 .x-h-section{font-size:var(--x-fs-section-mobile);line-height:1.25}
 .x-h-tile{font-size:var(--x-fs-title-mobile)}
 .x-lede,.x-copy{font-size:var(--x-fs-body-mobile);line-height:1.6}
 .x-page-heading{margin-bottom:24px;gap:20px}
 .x-page-heading h1,.x-page-heading h2{font-size:var(--x-fs-page-mobile)}
 .x-table th,.x-table td{padding:14px 10px;font-size:14px}
 .x-records>li{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:20px 0}
 .x-records h3{font-size:20px}
 .x-records p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .x-lit::before,.x-btn,.x-scan,.x-reveal,.x-tgl,.x-tgl::after{animation:none!important;transition:none!important}
}
@media(forced-colors:active){
 .x-btn,.x-panel,.x-well,.x-tgl{border:1px solid ButtonText}
 :focus-visible{outline-color:Highlight}
}