/* =====================================================================
   Beyondgraphy Tools · Shared Styles
   메인 사이트의 디자인 언어를 그대로 이식
   ===================================================================== */

:root{
  --bone: #ECE4D2;
  --cream: #F4EDDD;
  --ink:  #141109;
  --ink-soft: #2a2418;
  --ember: #B93A1F;
  --rust: #8c2a12;
  --olive: #5A5440;
  --sand: #d6ccb4;
  --line: rgba(20,17,9,.18);
  --soft-line: rgba(20,17,9,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background: var(--bone);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  min-height: 100vh;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Grain overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.serif{ font-family: 'Fraunces', 'Instrument Serif', serif; font-variation-settings: "SOFT" 30, "opsz" 144; }
.italic-serif{ font-family: 'Instrument Serif', serif; font-style: italic; }
.mono{ font-family: 'JetBrains Mono', monospace; font-weight: 300; letter-spacing: 0.04em; }

/* =================== NAV =================== */
nav.site-nav{
  position: fixed; top:0; left:0; right:0;
  z-index: 200;
  padding: 22px clamp(20px, 4vw, 48px);
  display:flex; justify-content: space-between; align-items:center;
  mix-blend-mode: difference;
  color: #f4eddd;
}
nav.site-nav .logo{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  text-decoration: none;
  text-transform: none;
  color: inherit;
}
nav.site-nav .logo em{
  font-family:'Instrument Serif'; font-style: italic; font-weight: 400;
  text-transform: none;
}
nav.site-nav ul{
  list-style: none;
  display:flex; gap: clamp(18px, 3vw, 42px);
}
nav.site-nav a{
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
nav.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0%;
  background: currentColor; transition: width .4s cubic-bezier(.2,.9,.3,1);
}
nav.site-nav a:hover::after, nav.site-nav a.current::after{ width: 100%; }
.nav-mobile-hide{display:flex}
.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 2px;
  font-weight: 300;
  align-items: center;
  gap: 10px;
}
.nav-toggle .toggle-mark{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 0.8;
  display: inline-block;
  transition: transform .4s cubic-bezier(.32,.72,0,1);
}
body.nav-open .nav-toggle .toggle-mark{
  transform: rotate(45deg);
}
@media (max-width: 720px){
  nav.site-nav .nav-mobile-hide{display:none}
  nav.site-nav .nav-toggle{display: inline-flex}
}

.nav-overlay{
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--cream);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s cubic-bezier(.32,.72,0,1), visibility .5s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px clamp(20px, 4vw, 48px);
}
.nav-overlay.open{ opacity: 1; visibility: visible; }
.nav-overlay ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 28px);
  text-align: center;
}
.nav-overlay a{
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 70, "opsz" 144, "wght" 380;
  font-size: clamp(44px, 11vw, 84px);
  color: inherit;
  text-decoration: none;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: color .3s, opacity .5s cubic-bezier(.32,.72,0,1), transform .5s cubic-bezier(.32,.72,0,1);
}
.nav-overlay.open a{opacity: 1; transform: translateY(0);}
.nav-overlay.open li:nth-child(1) a{ transition-delay: .15s; }
.nav-overlay.open li:nth-child(2) a{ transition-delay: .22s; }
.nav-overlay.open li:nth-child(3) a{ transition-delay: .29s; }
.nav-overlay.open li:nth-child(4) a{ transition-delay: .36s; }
.nav-overlay.open li:nth-child(5) a{ transition-delay: .43s; }
@media (hover: hover){
  .nav-overlay a:hover{ color: var(--ember); font-style: italic; }
}
body.nav-open{ overflow: hidden; }

/* =================== SECTION LABEL =================== */
.section-label{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember);
  margin-bottom: 24px;
  display:flex; align-items:center; gap: 12px;
  font-weight: 300;
}
.section-label::before{
  content:""; width: 28px; height:1px; background: var(--ember);
}

/* =================== TOOL HERO =================== */
.tool-hero{
  padding: 120px clamp(20px, 4vw, 48px) 60px;
  max-width: 1300px;
  margin: 0 auto;
}
.tool-hero-top{
  display:flex; justify-content: space-between;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
@media (max-width: 560px){
  .tool-hero-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
.tool-hero-title{
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 80, "opsz" 144, "wght" 360;
  font-size: clamp(52px, 10vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 32px;
}
.tool-hero-title em{
  font-family:'Instrument Serif'; font-style: italic; color: var(--ember);
  font-weight: 400;
}
.tool-hero-title .accent{
  font-family:'Instrument Serif'; font-style: italic; color: var(--ember);
  font-weight: 400;
  display: block;
  padding-left: clamp(30px, 10vw, 120px);
}
.tool-hero-ko{
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--ink-soft);
  letter-spacing: -0.015em;
  margin-top: 16px;
  opacity: 0.82;
}
.tool-hero-tagline{
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 40, "opsz" 72, "wght" 420;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.tool-hero-tagline em{
  font-family:'Instrument Serif'; font-style: italic; color: var(--ember);
  font-weight: 400;
}

/* Editorial masthead — Built by / Served by */
.tool-hero-bottom{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
  align-items: end;
}
@media (max-width: 760px){
  .tool-hero-bottom{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.tool-hero-credits{
  justify-self: end;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 760px){
  .tool-hero-credits{
    justify-self: start;
    text-align: left;
    white-space: normal;
    font-size: 10px;
  }
}
.tool-hero-credits .cr-row{ margin-bottom: 14px; }
.tool-hero-credits .cr-row:last-child{ margin-bottom: 0; }
.tool-hero-credits .cr-label{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--olive);
  letter-spacing: 0;
  text-transform: none;
  margin-right: 10px;
  display: inline-block;
}
.tool-hero-credits .cr-entity{
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  display: inline-block;
}

/* =================== TOOL BODY =================== */
.tool-body{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 48px) 80px;
}

.tool-block{
  margin-bottom: 36px;
}
.tool-block-header{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
  gap: 16px;
}
.tool-block-label{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 300;
}
.tool-action{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 4px 0;
  transition: color .3s;
}
.tool-action:hover{ color: var(--ember); }

/* Input / Output textareas */
.tool-input, .tool-output{
  width: 100%;
  min-height: 180px;
  padding: 20px 22px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: -0.005em;
  resize: vertical;
  outline: none;
  transition: border-color .3s, background .3s;
  border-radius: 0;
  -webkit-appearance: none;
}
.tool-input:focus{
  border-color: var(--ink);
  background: #fff8e8;
}
.tool-input.mono-style, .tool-output.mono-style{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.75;
}
/* iOS Safari auto-zoom 방지: 모바일에서 입력 폰트 16px 이상 */
@media (max-width: 720px){
  .tool-input, .tool-output{
    font-size: 16px;
  }
  .tool-input.mono-style, .tool-output.mono-style{
    font-size: 16px;
  }
}
.tool-input::placeholder{
  color: rgba(20, 17, 9, 0.3);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
}
/* iOS Safari: 16px 미만 input focus 시 페이지 줌인 방지 */
@media (max-width: 720px){
  .tool-input, .tool-output{ font-size: 16px; }
  .tool-input::placeholder{ font-size: 16px; }
  .tool-input.mono-style, .tool-output.mono-style{ font-size: 16px; }
}

/* Stats grid */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream);
  border: 1px solid var(--line);
  margin-bottom: 0;
}
.stat-cell{
  padding: 22px 16px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat-cell:last-child{ border-right: none; }
.stat-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 300;
}
.stat-value{
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 40, "opsz" 72, "wght" 400;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.stat-value.emphasize{
  font-family:'Instrument Serif';
  font-style: italic;
  color: var(--ember);
}
.stat-unit{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 6px;
  font-weight: 300;
}

/* Detected chips */
.detected-panel{
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: none;
  padding: 20px 22px;
}
.detected-header{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  font-weight: 300;
}
.chip-list{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 300;
  background: rgba(255,255,255,.4);
}
.chip-ember{ border-color: rgba(185,58,31,.4); color: var(--ember); }
.chip-olive{ border-color: rgba(90,84,64,.4); color: var(--olive); }
.chip-rust{ border-color: rgba(140,42,18,.4); color: var(--rust); }
.chip-ink{ border-color: rgba(20,17,9,.3); color: var(--ink); }

/* Mode toggle */
.mode-group{
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: 200px;
  overflow: hidden;
  flex-wrap: wrap;
}
.mode-btn{
  background: transparent;
  color: var(--ink);
  border: none;
  padding: 12px 24px;
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 40, "opsz" 72, "wght" 420;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .3s, color .3s;
  border-radius: 200px;
}
.mode-btn.active{
  background: var(--ink);
  color: var(--cream);
}
.mode-btn:hover:not(.active){
  background: var(--cream);
}

/* Submit/copy button (pill) */
.pill-btn{
  align-self: flex-start;
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 40, "opsz" 72, "wght" 400;
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 10px 24px;
  border-radius: 200px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  letter-spacing: -0.005em;
}
.pill-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
  z-index: -1;
}
.pill-btn:hover{ color: var(--cream); }
.pill-btn:hover::before{ transform: translateY(0); }
.pill-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.pill-btn:disabled:hover{ color: var(--ink); }
.pill-btn:disabled:hover::before{ transform: translateY(101%); }
.pill-btn.copied{
  background: var(--ember);
  color: var(--cream);
  border-color: var(--ember);
}
.pill-btn.copied::before{ display: none; }
.pill-btn .arrow{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
}

/* Options panel */
.options-toggle{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  transition: color .3s;
}
.options-toggle:hover{ color: var(--ember); }
.options-toggle .plus{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 0.8;
  color: var(--ember);
  transition: transform .4s;
}
.options-toggle.open .plus{ transform: rotate(45deg); }
.options-panel{
  margin-top: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
}
.option-row{
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--soft-line);
  cursor: pointer;
}
.option-row:last-child{ border-bottom: none; }
.option-row:hover{ background: rgba(255,255,255,.3); }
.option-row input[type="checkbox"]{
  margin-top: 3px;
  width: 14px;
  height: 14px;
  accent-color: var(--ember);
  flex-shrink: 0;
}
.option-label{
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.option-desc{
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Preview (rendered output) */
.preview-box{
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 36px);
  font-family: 'Pretendard Variable', sans-serif;
  line-height: 1.75;
  color: var(--ink);
}
.preview-box > *:first-child{ margin-top: 0; }
.preview-box > *:last-child{ margin-bottom: 0; }
.preview-box h1{ font-family:'Fraunces', serif; font-variation-settings:"SOFT" 50, "opsz" 144, "wght" 460; font-size: 1.8rem; line-height: 1.15; margin: 1.2rem 0 0.8rem; letter-spacing: -0.02em; }
.preview-box h2{ font-family:'Fraunces', serif; font-variation-settings:"SOFT" 50, "opsz" 144, "wght" 440; font-size: 1.45rem; line-height: 1.2; margin: 1.4rem 0 0.7rem; letter-spacing: -0.02em; }
.preview-box h3{ font-family:'Fraunces', serif; font-variation-settings:"SOFT" 50, "opsz" 72, "wght" 500; font-size: 1.18rem; margin: 1.2rem 0 0.6rem; }
.preview-box h4{ font-size: 1.05rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.preview-box p{ margin: 0.7rem 0; }
.preview-box ul, .preview-box ol{ margin: 0.7rem 0; padding-left: 1.7rem; }
.preview-box li{ margin: 0.3rem 0; }
.preview-box blockquote{
  border-left: 2px solid var(--ember);
  padding-left: 1.2rem;
  margin: 1.2rem 0;
  color: var(--ink-soft);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.05em;
}
.preview-box code{
  background: var(--bone);
  padding: 0.1rem 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}
.preview-box pre{
  background: var(--ink);
  color: var(--cream);
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  line-height: 1.6;
}
.preview-box pre code{ background: transparent; padding: 0; color: inherit; }
.preview-box a{
  color: var(--ember);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
.preview-box hr{ border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.preview-box strong{ font-weight: 700; }
.preview-box em{ font-style: italic; }

/* Empty state */
.empty-state{
  background: rgba(90,84,64,.08);
  border: 1px dashed var(--line);
  padding: 22px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--olive);
  font-size: 17px;
  line-height: 1.55;
}

/* =================== BACK LINK =================== */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 40px;
  font-weight: 300;
  transition: color .3s;
}
.back-link:hover{ color: var(--ember); }
.back-link .arrow{
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  transition: transform .4s;
}
.back-link:hover .arrow{ transform: translateX(-4px); }

/* =================== FOOTER =================== */
footer{
  border-top: 1px solid var(--line);
  padding: 40px clamp(20px, 4vw, 48px) 28px;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  max-width: 1300px;
  margin: 0 auto;
}
.footer-main{
  display:flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
footer .foot-logo{
  font-family:'Fraunces', serif;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
footer .foot-logo:hover{ color: var(--ember); }
footer .foot-logo em{font-family:'Instrument Serif'; font-style: italic}
footer ul{list-style: none; display:flex; gap: 24px; flex-wrap: wrap}
footer a{color: inherit; text-decoration:none}
footer a:hover{color: var(--ember)}

.tool-footer-note{
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--soft-line);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--olive);
}

/* =================== REVEAL =================== */
.reveal{opacity: 0; transform: translateY(30px); transition: opacity .9s, transform .9s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1; transform: translateY(0)}

/* =================== A11Y · FOCUS VISIBLE =================== */
/* 키보드 포커스 인디케이터 — 마우스 사용자에겐 안 보이고 키보드 Tab 이동 시만 노출 */
.tool-input:focus-visible,
.tool-output:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-color: var(--ink);
}
.pill-btn:focus-visible,
.mode-btn:focus-visible,
.nav-toggle:focus-visible,
.back-link:focus-visible,
.tool-action:focus-visible,
.options-toggle:focus-visible,
.tools-cta:focus-visible,
nav.site-nav a:focus-visible,
.nav-overlay a:focus-visible,
footer a:focus-visible,
.tool-chip:focus-visible,
.tool-detail:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}
/* 체크박스 — accent-color만으론 부족해서 래퍼에 테두리 */
.option-row:focus-within{
  outline: 2px solid var(--ember);
  outline-offset: -2px;
}

/* =================== ACCESSIBILITY — :focus-visible =================== */
/* 키보드 사용자를 위한 focus ring — 마우스 클릭에는 나타나지 않음 */
.tool-input:focus-visible,
.tool-output:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-color: var(--ink);
}
.pill-btn:focus-visible,
.mode-btn:focus-visible,
.tool-action:focus-visible,
.options-toggle:focus-visible,
.back-link:focus-visible,
.tools-cta:focus-visible,
.nav-toggle:focus-visible,
nav.site-nav a:focus-visible,
.nav-overlay a:focus-visible,
footer a:focus-visible,
.tool-chip:focus-visible,
.tool-detail:focus-visible,
.option-row input:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 3px;
}
/* nav은 mix-blend-mode difference라 ember가 안 보일 수 있음 → 화이트 outline */
nav.site-nav a:focus-visible,
.nav-toggle:focus-visible{
  outline-color: currentColor;
}

/* =================== PREVIEW POLISH =================== */
.preview-box > *:first-child{ margin-top: 0; }
.preview-box > *:last-child{ margin-bottom: 0; }

/* =================== HOVER GUARD =================== */
/* 터치 기기에서 :hover sticky 방지 */
@media (hover: none){
  .nav-overlay a:hover{ color: inherit; font-style: normal; }
  .tool-chip:hover,
  .tool-detail:hover,
  .service:hover{ background: transparent; padding-left: 12px; padding-right: 12px; }
}