*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;height:100%}
.boj-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.boj-skip{position:absolute;left:-999px;top:0;background:#14282e;color:#e8eef0;padding:8px 16px;z-index:10}
.boj-skip:focus{left:8px;top:8px}
.boj-body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#eef2f3;color:#1a2b30;font-family:ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.5;font-size:16px;font-weight:400;overflow-x:clip}
.boj-body a{color:#0b6560}
.boj-body a:hover,.boj-body a:focus-visible{color:#0a4f4b}
.boj-body a:focus-visible,:focus-visible{outline:3px solid #0b6560;outline-offset:2px}
.boj-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.boj-page{flex:1 0 auto;width:100%;padding:20px 0 36px}
.boj-head{background:#fff;border-bottom:1px solid #d4dee0}
.boj-mast{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:56px;padding-top:8px;padding-bottom:8px}
.boj-name{display:inline-flex;align-items:center;gap:8px;color:#1a2b30;text-decoration:none;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.boj-name:hover,.boj-name:focus-visible{color:#0b6560}
.boj-mark{display:block;flex:0 0 20px;color:#0b6560}
.boj-nav{margin-left:auto}
.boj-nav ul{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0;padding:0}
.boj-nav a{display:inline-flex;align-items:center;min-height:44px;color:#1a2b30;text-decoration:none;font-weight:600}
.boj-nav a:hover,.boj-nav a:focus-visible{color:#0b6560;text-decoration:underline}
.boj-sok{display:flex;gap:8px;margin:0;min-width:0}
.boj-sok input{flex:1;min-width:0;padding:0 14px;border:1px solid #9bb4b8;border-radius:8px;background:#fff;color:#1a2b30;font:inherit}
.boj-sok button{flex:0 0 auto;padding:0 18px;border:0;border-radius:8px;background:#0b6560;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.boj-sok button:hover,.boj-sok button:focus-visible{background:#0a4f4b}
.boj-sok-mast{flex:1 1 100%;width:100%}
.boj-sok-mast input,.boj-sok-mast button{height:44px;max-height:44px;min-height:44px}
.boj-sok-hero{width:100%;max-width:640px;margin:14px 0 0}
.boj-sok-hero input,.boj-sok-hero button{height:52px;min-height:52px}
.boj-hero{background:#fff;border:1px solid #d4dee0;border-radius:10px;padding:20px;margin:0 0 20px}
.boj-hero .boj-h1{margin:0 0 8px}
.boj-hero .boj-lede{margin:0}
.boj-work{display:flex;flex-direction:column;gap:20px}
.boj-examples{min-width:0}
.boj-h1{font-size:1.75rem;line-height:1.15;margin:0 0 8px;font-weight:800;letter-spacing:-.02em}
.boj-h2,.boj-sheet h2{font-size:1.25rem;margin:0 0 10px;color:#0b6560;font-weight:800;letter-spacing:-.02em}
.boj-lede{margin:0 0 16px;color:#3a5156;max-width:62ch;font-size:16px;font-weight:400;overflow-wrap:break-word}
.boj-pos{margin:0 0 10px;font-size:.95rem;color:#0b6560;font-weight:700}
.boj-uppslag{margin:0 0 16px}
.boj-bc{margin:0 0 12px;font-size:.82rem}
.boj-bc ol{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:0;padding:0}
.boj-bc a{color:#3a5156;text-decoration:none}
.boj-bc a:hover{color:#0b6560;text-decoration:underline}
.boj-bc li+li::before{content:"/";margin-right:8px;color:#8aa0a4}
.boj-scroll{margin:0 0 12px;background:#fff;border:1px solid #d4dee0;border-radius:10px;overflow:visible}
.boj-paradigm,.boj-index,.boj-letters{width:100%;border-collapse:collapse;font-size:16px;font-weight:400}
.boj-paradigm caption,.boj-index caption,.boj-letters caption{text-align:left;padding:12px 14px 8px;font-weight:700;background:#eef5f4}
.boj-paradigm th,.boj-paradigm td,.boj-index th,.boj-index td,.boj-letters th,.boj-letters td{padding:10px 14px;border-bottom:1px solid #e3ecee;text-align:left;vertical-align:top;font-weight:400;overflow-wrap:break-word;word-break:normal;hyphens:none}
.boj-paradigm thead th,.boj-index thead th,.boj-letters thead th{background:#e8eef0;font-weight:700}
.boj-index tbody tr:nth-child(even),.boj-paradigm tbody tr:nth-child(even){background:#f7fafa}
.boj-index tbody tr:last-child th,.boj-index tbody tr:last-child td,.boj-paradigm tbody tr:last-child th,.boj-paradigm tbody tr:last-child td,.boj-letters tbody tr:last-child th,.boj-letters tbody tr:last-child td{border-bottom:0}
.boj-form,.boj-hw{font-weight:700}
.boj-hw a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700}
.boj-hw a:hover,.boj-hw a:focus-visible{text-decoration:underline}
.boj-preview,.boj-poscell{font-weight:400}
.boj-g th{background:#dceae8;font-weight:700;font-size:.88rem}
.boj-letter{font-weight:700;width:3rem}
.boj-side{min-width:0}
.boj-toc{display:grid;gap:12px;margin:0}
.boj-posg{background:#fff;border:1px solid #d4dee0;border-radius:10px;padding:16px 16px 4px}
.boj-posg .boj-scroll{margin:0 0 8px;border:0}
.boj-letters a{display:inline-flex;align-items:center;min-height:44px}
.boj-pager{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:20px 0 0}
.boj-pager a,.boj-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.boj-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.boj-chips li{background:#fff;border:1px solid #d4dee0;padding:8px 12px;min-height:44px}
.boj-cols{columns:2;column-gap:20px;list-style:none;margin:0;padding:0}
.boj-cols li{break-inside:avoid;padding:6px 0;border-bottom:1px solid #e3ecee}
.boj-note{font-size:.88rem;color:#3a5156}
.boj-dl{margin:0 0 12px}
.boj-dl dt{font-weight:700;margin-top:8px}
.boj-dl dd{margin:0 0 8px}
.boj-ok{color:#0b5d38;font-weight:700}
.boj-no{color:#5c5c5c;text-decoration:line-through}
.boj-foot{flex-shrink:0;background:#e6eeef;color:#3a5156;padding:20px 0 28px;font-size:.875rem;border-top:1px solid #d4dee0}
.boj-foot a{color:#0b6560}
.boj-foot p{margin:0 0 8px;max-width:70ch}
.boj-foot-links ul{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:12px 0 8px;padding:0}
.boj-foot-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.boj-src{opacity:.9}
.boj-sense{margin:0 0 16px;min-width:0}
.boj-chips a,.boj-chips span{overflow-wrap:anywhere}
.boj-sheet{min-width:0}
.boj-hw a,.boj-sok button,.boj-nav a{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
@media (max-width:719px){
  .boj-index caption,.boj-paradigm caption{display:block;width:100%}
  .boj-index thead,.boj-paradigm thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .boj-index,.boj-paradigm,.boj-index tbody,.boj-paradigm tbody,.boj-index tr,.boj-paradigm tr,.boj-index th,.boj-paradigm th,.boj-index td,.boj-paradigm td{display:block;width:100%}
  .boj-index tr,.boj-paradigm tr{padding:10px 14px;border-bottom:1px solid #e3ecee;box-sizing:border-box}
  .boj-index tbody tr:nth-child(even),.boj-paradigm tbody tr:nth-child(even){background:#f7fafa}
  .boj-index th,.boj-index td,.boj-paradigm th,.boj-paradigm td{padding:4px 0;border:0;overflow-wrap:break-word;word-break:normal;hyphens:none}
  .boj-index th::before,.boj-index td::before,.boj-paradigm th::before,.boj-paradigm td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;color:#5a7176;margin-bottom:2px}
  .boj-g{background:#dceae8}
  .boj-g th{padding:8px 0;font-size:.88rem}
  .boj-g th::before{content:none}
  .boj-hw a{min-height:44px}
  .boj-letters th,.boj-letters td{overflow-wrap:break-word;word-break:normal;hyphens:none}
}
@media (min-width:720px){
  .boj-wrap{padding:0 24px}
  .boj-mast{min-height:64px;flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .boj-sok-mast{flex:0 1 22rem;width:auto;max-width:22rem;margin-left:0}
  .boj-hero{padding:24px 28px 28px;margin:0 0 24px}
  .boj-h1{font-size:2rem}
  .boj-hero .boj-h1{font-size:2.5rem}
  .boj-work{flex-direction:row;align-items:flex-start;gap:24px}
  .boj-examples{flex:1;min-width:0}
  .boj-side{width:280px;flex-shrink:0;position:sticky;top:12px}
  .boj-cols{columns:3}
  .boj-page{padding:20px 0 40px}
}
@media (prefers-reduced-motion:reduce){
  .boj-hw a,.boj-sok button,.boj-nav a{transition:none}
}