/* Homepage and company introduction. Values come from the TACTILE token sheet. */
.company-site a.xk-gnav-cta { color:var(--primary-text); }
.ai-hero { padding: var(--space-9) 0 var(--space-9); text-align:center; border-bottom:1px solid var(--line); }
.company-site .ai-hero h1 { font-size: var(--fs-num-xl); letter-spacing:-.045em; line-height:1.15; }
.ai-hero p { max-width:790px; margin: var(--space-5) auto 0 !important; font-size: var(--fs-h3); line-height:1.65; color:var(--muted); }
.ai-actions { display:flex; gap: var(--space-3); flex-wrap:wrap; align-items:center; margin-top: var(--space-5); }
.ai-hero .ai-actions { justify-content:center; }
.ai-actions .btn { padding: 0 var(--space-5); }
.ai-section { padding: var(--space-8) 0; border-bottom:1px solid var(--line); }
.ai-section-head { display:flex; justify-content:space-between; align-items:baseline; gap: var(--space-6); margin-bottom: var(--space-6); }
.ai-section-head h2 { font-size: var(--fs-h1); line-height:1.25; letter-spacing:-.035em; }
.ai-section-head p { max-width:360px; margin:0 !important; color:var(--muted); font-size: var(--fs-lead); text-align:right; }
.ai-products,.ai-industry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: var(--space-4); }
.ai-product { min-width:0; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column; }
.ai-thumb { min-width:0; height:232px; padding: var(--space-5) var(--space-4) var(--space-4); background:var(--ice); overflow:hidden; }
.ai-window { height:100%; padding:0; background:var(--surface-raised); border:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; box-shadow:var(--secondary-shadow); overflow:hidden; }
.ai-window-head { display:flex; justify-content:space-between; gap: var(--space-2); align-items:center; padding: var(--space-3) var(--space-3); background:var(--canvas); border-bottom:1px solid var(--line); font-size:var(--fs-caption); }
.ai-window-head small { font-size:var(--fs-caption); color:var(--muted); white-space:nowrap; }
.ai-window-body { padding: var(--space-4); font-size:var(--fs-caption); }
.ai-window-body > b { display:block; margin-bottom: var(--space-3); font-size: var(--fs-small); }
.ai-list-row { display:grid; grid-template-columns:1fr 1.7fr auto; align-items:center; gap: var(--space-2); border-top:1px solid var(--line); padding: var(--space-2) 0; }
.ai-list-row span { color:var(--muted); }
.ai-list-row em { font-size:var(--fs-caption); font-style:normal; background:var(--canvas); padding: var(--space-1) var(--space-1); white-space:nowrap; }
.ai-table-scroll table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left; font-size:var(--fs-caption); }
.ai-table-scroll th,.ai-table-scroll td { border:1px solid var(--line); padding: var(--space-1) var(--space-1); line-height:1.2; overflow-wrap:anywhere; }
.ai-table-scroll th { background:var(--canvas); }
.ai-table-scroll td.ai-review { background:var(--selected-fill); color:var(--ink); }
.ai-product:nth-child(2) .ai-window-body { padding: var(--space-1) var(--space-3); }
.ai-product:nth-child(2) .ai-window-body > b { margin-bottom:0; }
.ai-product:nth-child(2) .ai-window-head { padding-block: var(--space-1); }
.ai-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-2); margin-bottom: var(--space-2); }
.ai-metrics div { background:var(--canvas); padding: var(--space-2) var(--space-1); font-size:var(--fs-caption); color:var(--muted); }
.ai-metrics strong { display:block; font-size: var(--fs-body); color:var(--ink); }
.ai-product-copy { display:flex; flex-direction:column; flex:1; padding: var(--space-5); }
.company-site .ai-product h3 { font-size: var(--fs-h2); line-height:1.2; }
.ai-product-copy .ai-role { margin-top: var(--space-1); font-size:var(--fs-caption); color:var(--muted); }
.ai-product-copy > p:not(.ai-role) { margin-top: var(--space-5); color:var(--muted); font-size: var(--fs-body); line-height:1.7; }
.ai-product-copy a { align-self:flex-start; margin-top:auto; padding-top: var(--space-5); font-weight:600; font-size: var(--fs-body); text-decoration:underline; text-underline-offset:5px; }
.ai-industries { background:var(--surface); }
.ai-industry-grid a,.ai-schema-templates > div { display:block; padding: var(--space-5); background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-sm); min-width:0; }
.company-site .ai-industry-grid h3 { font-size: var(--fs-h3); }
.ai-industry-grid p { margin: var(--space-4) 0 var(--space-5) !important; color:var(--muted); font-size: var(--fs-body); min-height:75px; }
.ai-industry-grid span { font-size: var(--fs-body); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.ai-proof { padding: var(--space-8) 0 var(--space-8); background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); }
.company-site .ai-proof h2 { color:var(--ink); font-size: var(--fs-h1); }
.ai-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--space-6); margin: var(--space-6) 0 var(--space-5); }
.ai-stats > div { display:flex; flex-direction:column-reverse; border-top:1px solid var(--line); padding-top: var(--space-4); }
.ai-stats dt { color:var(--muted); font-size: var(--fs-body); }
.ai-stats dd { margin: 0 0 var(--space-1); color:var(--ink); font-size: var(--fs-h1); white-space:nowrap; line-height:1.2; }
.ai-proof p { color:var(--muted); }
.ai-contact { padding: var(--space-8) 0; }
.ai-contact > div { display:flex; align-items:center; justify-content:space-between; gap: var(--space-5); }
.ai-contact h2 { font-size: var(--fs-h1); max-width:740px; }
.ai-contact a { white-space:nowrap; min-height:48px; padding: var(--space-3) var(--space-5); }
.ai-about-hero { padding: var(--space-9) 0 var(--space-9); border-bottom:1px solid var(--line); }
.ai-overline { color:var(--muted); font-size: var(--fs-body); }
.company-site .ai-about-hero h1 { margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-num-xl); font-weight:var(--fw-medium); letter-spacing:-.065em; line-height:1.08; }
.ai-about-intro { max-width:880px; font-size: var(--fs-h3); line-height:1.65; }
.ai-about-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-7); }
.ai-about-paths a { display:block; padding: var(--space-5); min-height:118px; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-sm); }
.ai-about-paths a:hover { background:var(--canvas); }
.ai-about-paths b { display:block; font-size: var(--fs-h3); }
.ai-about-paths span { display:block; margin-top: var(--space-3); font-size: var(--fs-small); color:var(--muted); }
/* coSchema introduction */
.ai-schema-wrap { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.dn-main .ai-schema-hero { padding: var(--space-9) 0; background:var(--surface); border-bottom:1px solid var(--line); }
.ai-schema-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap: var(--space-8); align-items:center; }
.dn-main .ai-schema-hero h1 { margin: var(--space-4) 0 var(--space-5); font-size: var(--fs-num-xl); line-height:1.14; letter-spacing:-.045em; }
.ai-schema-lead { font-size: var(--fs-h3); line-height:1.7; max-width:620px; }
.ai-schema-note { margin-top: var(--space-5); font-size: var(--fs-body); color:var(--muted); }
.ai-schema-output { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-raised); padding: var(--space-6); }
.ai-schema-output h2 { font-size: var(--fs-h3); line-height:1.3; margin: 0 0 var(--space-5); }
.ai-schema-output p { color:var(--muted); font-size: var(--fs-body); margin: 0 0 var(--space-3); }
.ai-schema-output p:last-child { margin: var(--space-4) 0 0; }
.ai-schema-sources { display:flex; flex-wrap:wrap; gap: var(--space-2); }
.ai-schema-sources span { padding: var(--space-2) var(--space-3); background:var(--canvas); border:1px solid var(--line); font-size: var(--fs-small); }
.ai-schema-arrow { display:block; margin: var(--space-4) 0; text-align:center; font-size: var(--fs-h3); }
.ai-schema-result { padding: var(--space-4); background:var(--canvas); border:0; border-radius:var(--radius-sm); }
.ai-schema-result strong,.ai-schema-result span { display:block; }
.ai-schema-result strong { margin-bottom: var(--space-3); }
.ai-schema-result span { color:var(--muted); font-size: var(--fs-small); line-height:1.7; }
.dn-main .ai-section { padding: var(--space-8) 0; }
/* 마지막 구간의 아래 선은 바닥글 위 선과 겹친다. 구간 사이 선만 남긴다(2026-10-06). */
.dn-main > .ai-section:last-child { border-bottom:0; }
.ai-steps,.ai-roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.ai-steps div,.ai-roles div { border-top:1px solid var(--line); padding-top: var(--space-4); }
.ai-steps b,.ai-roles b { font-size: var(--fs-lead); }
.ai-steps p,.ai-roles p { margin-top: var(--space-3); color:var(--muted); font-size: var(--fs-body); line-height:1.65; }
.ai-schema-templates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: var(--space-4); }
.ai-schema-templates h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.ai-schema-templates ul { margin:0; padding-left: var(--space-4); line-height:1.9; color:var(--muted); }
.dn-main [id] { scroll-margin-top: var(--space-8); }
.dn-main .ai-contact { background:var(--surface); }
.dn-main .ai-contact h2 { margin:0; }
@media(max-width:900px) {
  .ai-section-head { display:block; }
  .ai-section-head p { max-width:none; margin-top: var(--space-3) !important; text-align:left; }
  .ai-products,.ai-industry-grid,.ai-schema-templates { grid-template-columns:1fr; }
  .ai-product { display:grid; grid-template-columns:1fr 1fr; }
  .ai-thumb { height:100%; min-height:220px; }
  .ai-schema-two { grid-template-columns:1fr; gap: var(--space-6); }
  .ai-steps,.ai-roles,.ai-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .ai-hero { padding: var(--space-8) 0 var(--space-8); text-align:left; }
  .company-site .ai-hero h1 { font-size: var(--fs-h1); }
  .ai-hero p { font-size: var(--fs-lead); margin: var(--space-4) 0 0 !important; }
  .ai-hero .ai-actions { justify-content:flex-start; }
  .ai-actions .btn { flex:1; text-align:center; white-space:nowrap; padding-inline: var(--space-3); }
  .ai-section { padding: var(--space-7) 0; }
  .ai-product { display:grid; grid-template-columns:minmax(0,37%) minmax(0,63%); min-height:190px; }
  .ai-thumb { height:190px; min-height:0; padding: var(--space-2) 0 var(--space-2) var(--space-2); }
  .ai-window { width:250px; height:390px; max-width:none; transform:scale(.44); transform-origin:top left; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
  .ai-product-copy { padding: var(--space-4); }
  .company-site .ai-product h3 { font-size: var(--fs-h3); }
  .ai-product-copy > p:not(.ai-role) { margin-top: var(--space-2); font-size: var(--fs-small); line-height:1.5; }
  .ai-product-copy a { padding-top: var(--space-3); font-size: var(--fs-small); }
  .ai-industry-grid p { min-height:0; }
  .ai-stats { gap: var(--space-5); }
  .ai-stats dd { font-size: var(--fs-h2); }
  .ai-proof { padding: var(--space-7) 0; }
  .ai-contact { padding: var(--space-7) 0; }
  .ai-contact > div { display:block; }
  .ai-contact a { margin-top: var(--space-5); }
  .ai-about-hero { padding: var(--space-8) 0; }
  .company-site .ai-about-hero h1 { font-size: var(--fs-h1); }
  .ai-about-intro { font-size: var(--fs-body); }
  .ai-about-paths { grid-template-columns:1fr; gap: var(--space-2); margin-top: var(--space-6); }
  .ai-about-paths a { min-height:0; padding: var(--space-4); }
  .ai-schema-wrap { width:min(1200px,calc(100% - 40px)); }
  .dn-main .ai-schema-hero { padding: var(--space-8) 0; }
  .dn-main .ai-schema-hero h1 { font-size: var(--fs-h1); }
  .ai-schema-lead { font-size: var(--fs-body); }
  .dn-main .ai-section { padding: var(--space-7) 0; }
  .ai-steps,.ai-roles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-schema-output { padding: var(--space-5); }
}

/* coSchema's fictional walkthrough uses fixed preview space for each stage. */
.schema-demo-tabs{display:flex;gap: var(--space-2);overflow-x:auto;margin: var(--space-6) 0 var(--space-4)}
html:not(.js) .schema-demo-tabs,html:not(.js) #review-sample{display:none}
.schema-demo-tabs button{flex:none;border:0;box-shadow:var(--secondary-shadow);background:var(--surface);color:var(--ink);padding: var(--space-2) var(--space-3);border-radius: var(--radius-sm);cursor:pointer}
.schema-demo-tabs button[aria-selected="true"]{background:var(--ink);color:var(--primary-text)}
body.x-site .schema-demo-tabs button[role=tab]:focus-visible{outline-offset:-4px} /* 가로 스크롤 줄이 바깥 링 위·아래를 잘라 「( )」 조각이 남지 않게 링을 탭 안쪽에 둔다 */
.schema-demo{border:0;border-radius:var(--radius-card);box-shadow:var(--panel-shadow);background:var(--glass-light),var(--panel-fill);padding: var(--space-5);min-height:390px}
.schema-demo-heading h3{font-size: var(--fs-h3);margin: var(--space-1) 0}.schema-demo-heading p{color:var(--muted)}
.schema-demo-meta{display:flex;flex-wrap:wrap;gap: var(--space-3);margin: var(--space-4) 0;font-size: var(--fs-caption);color:var(--muted)}
.schema-demo-table{overflow-x:auto}.schema-demo .data-table{width:100%;border-collapse:collapse;min-width:560px}
.schema-demo .data-table th,.schema-demo .data-table td{border-bottom:1px solid var(--line);padding: var(--space-3);text-align:left;font-size: var(--fs-small)}
.schema-demo .data-table tr.selected{background:color-mix(in srgb,var(--palette-ink) 10%,var(--palette-white))}
.schema-demo-bottom{display:flex;gap: var(--space-4);align-items:center;margin: var(--space-4) 0}.schema-demo-bottom div{display:flex;gap: var(--space-2);flex-wrap:wrap;font-size: var(--fs-small)}
@media(max-width:600px){.schema-demo{padding: var(--space-4);min-height:400px}.schema-demo-tabs button{font-size: var(--fs-small)}}

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .company-site .ai-hero h1 { font-size: var(--fs-h1); }
  .ai-section-head h2 { font-size: var(--fs-h2); }
  .company-site .ai-proof h2 { font-size: var(--fs-h2); }
  .ai-stats dd { font-size: var(--fs-h2); }
  .ai-contact h2 { font-size: var(--fs-h2); }
  .company-site .ai-about-hero h1 { font-size: var(--fs-display); }
  .dn-main .ai-schema-hero h1 { font-size: var(--fs-h1); }
}