body[data-tool="aspect_ratio_calculator"] {
  --ar-paper: #F3F1EC; --ar-card: #FFFFFF; --ar-ink: #131313; --ar-ink2: #4F4B45; --ar-mute: #8A857C; --ar-line: #DCD6CB;
  --ar-mon: #0F1012; --ar-mon2: #1B1D21; --ar-acc: #FF5A1F; --ar-frame: #F2EFE7;
  --ar-disp: "Space Grotesk", "Pretendard Variable", Pretendard, "Helvetica Neue", Arial, sans-serif; --ar-mono: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, SFMono-Regular, Menlo, monospace; --ar-sans: Inter, "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ar-paper); color: var(--ar-ink); font-family: var(--ar-sans);
}
body[data-tool="aspect_ratio_calculator"] .dt-nav { background: var(--ar-paper); border-bottom: 1px solid var(--ar-line); }
.dt-bare { display: block; width: 100%; flex: 1; }
.arx { max-width: 1160px; margin: 0 auto; padding: 34px 20px 72px; }
.ar-hero h1 { margin: 0; font-family: var(--ar-disp); font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.025em; }
.ar-hero p { margin: 12px 0 0; font-size: 17px; color: var(--ar-ink2); }

.ar { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); background: var(--ar-card); border: 1.5px solid var(--ar-ink); border-radius: 18px; overflow: hidden; box-shadow: 6px 6px 0 var(--ar-ink); }
.ar-panel { padding: 24px; border-right: 1.5px solid var(--ar-ink); min-width: 0; }
.ar-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.ar-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ar-f span, .ar-k, .ar-out span { font-family: var(--ar-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-mute); }
.ar-f input { width: 100%; min-width: 0; box-sizing: border-box; border: 2px solid var(--ar-line); border-radius: 10px; background: var(--ar-paper); color: var(--ar-ink); font-family: var(--ar-mono); font-size: 30px; line-height: 1.2; font-weight: 700; padding: 8px 12px; outline: none; transition: border-color .15s; }
.ar-f input:focus { border-color: var(--ar-ink); background: #fff; }
.ar-f input.bad { border-color: var(--ar-acc); }
.ar-swap { width: 42px; height: 42px; margin-bottom: 6px; border-radius: 50%; border: 1.5px solid var(--ar-ink); background: #fff; color: var(--ar-ink); font-size: 18px; cursor: pointer; }
.ar-swap:hover { background: var(--ar-ink); color: #fff; }
.ar-file { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ar-up { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--ar-ink2); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--ar-ink); cursor: pointer; }
.ar-up:hover { border-style: solid; background: var(--ar-paper); }
.ar-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ar-up::before { content: ""; width: 14px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
.ar-file small { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink2); overflow-wrap: anywhere; }
.ar-res { margin-top: 20px; }
.ar-res .ar-k { display: block; }
.ar-big { display: block; margin-top: 4px; font-family: var(--ar-disp); font-size: 88px; line-height: .95; font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ar-sub { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--ar-mono); font-size: 14px; color: var(--ar-ink2); }
.ar-sub #arExact { color: var(--ar-acc); font-weight: 700; }
.ar-sub span:empty { display: none; }
.ar-near { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--ar-line); display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--ar-ink); }
.ar-presets { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-presets button { border: 1.5px solid var(--ar-line); background: #fff; color: var(--ar-ink); font-family: var(--ar-mono); font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.ar-presets button:hover { border-color: var(--ar-ink); }
.ar-presets button[aria-pressed="true"] { background: var(--ar-ink); border-color: var(--ar-ink); color: #fff; }

.ar-mon { background: var(--ar-mon); padding: 18px; display: flex; min-width: 0; }
.ar-stage { --fh: 320px; flex: 1; min-height: 380px; display: flex; align-items: center; justify-content: center; padding: 26px; border-radius: 10px; background-color: var(--ar-mon2); background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; min-width: 0; }
.ar-frame { position: relative; aspect-ratio: var(--r); width: min(100%, calc(var(--fh) * var(--r))); max-height: var(--fh); border: 1.5px solid var(--ar-frame); background: rgba(242,239,231,.05); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; container-type: inline-size; }
.ar-frame i { position: absolute; background: rgba(242,239,231,.16); }
.ar-g1, .ar-g2 { top: 0; bottom: 0; width: 1px; } .ar-g1 { left: 33.333%; } .ar-g2 { left: 66.666%; }
.ar-g3, .ar-g4 { left: 0; right: 0; height: 1px; } .ar-g3 { top: 33.333%; } .ar-g4 { top: 66.666%; }
.ar-c { position: absolute; width: 16px; height: 16px; border: 0 solid var(--ar-acc); }
.ar-c1 { top: -7px; left: -7px; border-top-width: 3px; border-left-width: 3px; } .ar-c2 { top: -7px; right: -7px; border-top-width: 3px; border-right-width: 3px; }
.ar-c3 { bottom: -7px; left: -7px; border-bottom-width: 3px; border-left-width: 3px; } .ar-c4 { bottom: -7px; right: -7px; border-bottom-width: 3px; border-right-width: 3px; }
.ar-frame b { position: relative; font-family: var(--ar-disp); font-size: clamp(14px, 16cqi, 40px); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.ar-frame em { position: relative; font-style: normal; font-family: var(--ar-mono); font-size: clamp(9px, 7cqi, 13px); color: rgba(242,239,231,.7); white-space: nowrap; }

.ar-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ar-ink); }
.ar-card { padding: 18px 24px 22px; min-width: 0; }
.ar-card + .ar-card { border-left: 1.5px solid var(--ar-ink); }
.ar-ct { font-family: var(--ar-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-ink2); }
.ar-ct b { color: var(--ar-acc); }
.ar-rs { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ar-sm input { font-size: 22px; padding: 7px 10px; width: 132px; }
.ar-pct input { width: 96px; }
.ar-x { font-family: var(--ar-mono); font-size: 20px; color: var(--ar-mute); padding-bottom: 10px; }
.ar-out { display: flex; flex-direction: column; gap: 6px; min-width: 96px; }
.ar-out b { font-family: var(--ar-mono); font-size: 24px; line-height: 1.2; font-weight: 700; padding: 8px 0; }

.ar-adwrap { margin: 30px 0 6px; }
.ar-article { max-width: 780px; margin: 30px auto 0; font-size: 17px; line-height: 1.68; color: #24221E; }
.ar-article h2, .ar-faq h2, .ar-more h2 { margin: 44px 0 12px; font-family: var(--ar-disp); font-size: 29px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ar-ink); }
.ar-article p { margin: 0 0 14px; }
.ar-article a, .ar-faq a { color: var(--ar-ink); text-decoration-color: var(--ar-acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ar-eq { font-family: var(--ar-mono); font-size: 15px; line-height: 1.8; background: var(--ar-card); border-left: 4px solid var(--ar-acc); padding: 12px 16px; border-radius: 0 10px 10px 0; }
.ar-tbl { overflow-x: auto; margin: 6px 0 16px; border: 1.5px solid var(--ar-ink); border-radius: 12px; background: var(--ar-card); }
.ar-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ar-tbl th { text-align: left; font-family: var(--ar-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ar-ink2); background: var(--ar-paper); padding: 10px 14px; border-bottom: 1.5px solid var(--ar-ink); }
.ar-tbl td { padding: 10px 14px; border-top: 1px solid var(--ar-line); vertical-align: top; }
.ar-tbl tr:first-child td { border-top: 0; }
.ar-tbl td:first-child { font-family: var(--ar-mono); font-weight: 700; white-space: nowrap; }
.ar-src { padding-left: 20px; font-size: 15px; color: var(--ar-ink2); }
.ar-src li { margin: 4px 0; }
.ar-faq { max-width: 780px; margin: 10px auto 0; }
.ar-q { border-top: 1.5px solid var(--ar-line); padding: 14px 2px; }
.ar-q:last-child { border-bottom: 1.5px solid var(--ar-line); }
.ar-q summary { cursor: pointer; font-size: 17.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ar-q summary::-webkit-details-marker { display: none; }
.ar-q summary::after { content: "+"; font-family: var(--ar-mono); color: var(--ar-acc); font-size: 20px; line-height: 1; }
.ar-q[open] summary::after { content: "−"; }
.ar-q p { margin: 10px 0 2px; font-size: 16px; line-height: 1.6; color: var(--ar-ink2); }
.ar-more { max-width: 1160px; margin: 20px auto 0; }
.ar-more > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ar-more a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--ar-card); border: 1.5px solid var(--ar-ink); border-radius: 12px; color: var(--ar-ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.ar-more a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ar-ink); }
.ar-more b { font-family: var(--ar-disp); font-size: 17px; }
.ar-more span { font-size: 14px; color: var(--ar-ink2); }

@media (max-width: 900px) {
  .ar { grid-template-columns: minmax(0, 1fr); box-shadow: 4px 4px 0 var(--ar-ink); }
  .ar-panel { border-right: 0; border-bottom: 1.5px solid var(--ar-ink); }
  .ar-row { grid-template-columns: minmax(0, 1fr); }
  .ar-card + .ar-card { border-left: 0; border-top: 1.5px solid var(--ar-ink); }
  .ar-more > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .arx { padding: 22px 14px 56px; }
  .ar-hero h1 { font-size: 38px; }
  .ar-hero p { font-size: 15.5px; }
  .ar-panel { padding: 18px; }
  .ar-f input { font-size: 24px; padding: 7px 10px; }
  .ar-big { font-size: 66px; }
  .ar-mon { padding: 12px; }
  .ar-stage { --fh: 200px; min-height: 250px; padding: 22px; }
  .ar-card { padding: 16px 18px 18px; }
  .ar-rs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ar-sm input, .ar-pct input { width: 100%; font-size: 20px; }
  .ar-pct { grid-column: 1 / -1; }
  .ar-rs.ar-dg { grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, 1fr); }
  .ar-out { min-width: 0; }
  .ar-out b { font-size: 20px; padding: 9px 0; }
  .ar-x { text-align: center; }
  .ar-article { font-size: 16px; }
  .ar-article h2, .ar-faq h2, .ar-more h2 { font-size: 24px; margin-top: 36px; }
  .ar-more > div { grid-template-columns: minmax(0, 1fr); }
}
html[lang="ko"] body[data-tool="aspect_ratio_calculator"] { word-break: keep-all; }
html[lang="ko"] .ar-f span, html[lang="ko"] .ar-k, html[lang="ko"] .ar-out span, html[lang="ko"] .ar-ct, html[lang="ko"] .ar-tbl th { font-family: var(--ar-sans); letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
html[lang="ko"] .ar-ct b { font-family: var(--ar-mono); }
html[lang="ko"] .ar-ct { font-size: 13.5px; }
html[lang="ko"] .ar-hero h1 { letter-spacing: -.035em; }
html[lang="ko"] .ar-article h2, html[lang="ko"] .ar-faq h2, html[lang="ko"] .ar-more h2 { letter-spacing: -.03em; line-height: 1.3; }
html[lang="ko"] .ar-article p, html[lang="ko"] .ar-q p { line-height: 1.8; }
html[lang="ko"] .ar-tbl td:first-child { font-family: var(--ar-sans); }