:root{--orange:#e94f0e;--ink:#171717;--muted:#747474;--line:#deded9;--paper:#f6f6f2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Noto Sans KR',sans-serif;font-size:14px}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}aside{position:fixed;inset:0 auto 0 0;width:252px;background:#151515;color:#fff;padding:38px 25px;display:flex;flex-direction:column;z-index:2}.brand img{width:136px;height:auto}.side-label{font-size:9px;letter-spacing:1.6px;color:#919191;margin-top:48px}.library-title{font-size:30px;line-height:1.14;letter-spacing:-1px;margin-top:13px}.library-title>span{display:block;font-size:12px;color:#aaa;letter-spacing:0;margin-top:16px}.line{border-top:1px solid #373737;padding-top:25px;display:flex;justify-content:space-between;margin-top:40px}nav{margin:16px -25px 10px}nav button{width:100%;display:flex;align-items:center;gap:17px;background:none;border:0;border-left:3px solid transparent;text-align:left;padding:18px 22px;color:#a8a8a8;font-size:14px}nav button span{font-size:10px;color:#777}nav button.active{background:#25211e;border-left-color:var(--orange);color:#fff}nav button.active span{color:var(--orange)}nav button:hover{background:#242424}.compare-side{background:transparent;color:#ddd;border:1px solid #454545;display:flex;gap:12px;align-items:center;padding:16px;text-align:left;margin-top:16px}.compare-side small{display:block;font-size:10px;color:#999;margin-top:5px}.compare-side>span:last-child{margin-left:auto}.side-bottom{margin-top:auto;padding-top:40px;font-size:8px;letter-spacing:1px;color:#999}.dot{display:inline-block;width:5px;height:5px;background:var(--orange);margin-right:6px}.side-bottom a{display:block;font-size:11px;letter-spacing:0;margin-top:18px;color:#ccc}main{margin-left:252px}header{height:78px;padding:0 46px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:9px;letter-spacing:1.4px}header span{padding:0 15px;color:#bbb}header button{background:none;border:0;font-size:11px;letter-spacing:0}.hero{padding:40px 46px 32px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#eeeee9}.eyebrow{font-size:9px;letter-spacing:2px;position:relative;z-index:1;color:#555}h1{font-size:clamp(40px,4.8vw,70px);font-weight:500;letter-spacing:-3.5px;line-height:1.02;margin:23px 0 26px;position:relative;z-index:1}h1 em{font-style:normal;color:var(--orange)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;position:relative;z-index:1}.hero p{font-size:12px;line-height:1.9;color:#686868;margin:0}.edition{font-size:8px;letter-spacing:2px;text-align:right}.edition span{display:block;font-size:9px;letter-spacing:1px;margin-top:8px;color:#777}.hero-art{position:absolute;right:3%;top:-75px;width:390px;height:380px;transform:rotate(-23deg);opacity:.75}.hero-art i{position:absolute;inset:60px 30px 50px 50px;border:1px solid #c4c4bc;border-radius:22px;transform:skew(-15deg);background:linear-gradient(135deg,#ffffff50,#c7c7be15)}.hero-art i:nth-child(2){transform:translate(18px,26px) skew(-15deg)}.hero-art i:nth-child(3){transform:translate(36px,52px) skew(-15deg)}.hero-art i:nth-child(4){transform:translate(54px,78px) skew(-15deg);border-top:2px solid var(--orange)}.hero-art b{position:absolute;top:170px;left:140px;font-size:9px;letter-spacing:3px;color:#999;line-height:1.8}.workspace{padding:28px 46px 45px}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:15px}.breadcrumbs{font-size:10px;letter-spacing:1.4px;color:#73736f}.search{display:flex;align-items:center;gap:10px;border-bottom:1px solid #bdbdb7;padding:8px 0;width:290px}.search span{font-size:23px}.search input{background:none;border:0;width:100%;outline:none;font-size:11px;color:#333}.product-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.product-head .eyebrow{color:var(--orange);font-size:8px}h2{font-size:35px;letter-spacing:-1.5px;font-weight:500;margin:10px 0 7px}.subtitle{font-size:12px;color:#747474;line-height:1.7}.download{background:var(--ink);color:white;padding:14px 18px;font-size:11px;white-space:nowrap}.download span{margin-left:20px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0;border:1px solid var(--line);background:#fff}.metric{padding:23px 24px;border-right:1px solid var(--line)}.metric:last-child{border:0}.metric label{display:block;font-size:10px;color:#777;margin-bottom:13px}.metric strong{font-size:29px;font-weight:500;letter-spacing:-1px}.metric small{font-size:11px;color:#888;margin-left:6px}.metric p{font-size:9px;color:#999;margin:9px 0 0}.tabs{display:flex;gap:26px;border-bottom:1px solid #ccc;margin-top:30px}.tabs button{border:0;background:none;padding:0 0 13px;color:#888;font-size:12px}.tabs button.active{color:var(--ink);border-bottom:2px solid var(--orange)}.section-title{display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px}.section-title h3{font-size:14px;font-weight:500;margin:0}.section-title span{font-size:9px;letter-spacing:1px;color:#999}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:11px}thead{background:#eaeae5;color:#6d6d69}th{font-weight:400;padding:13px 16px;font-size:9px;letter-spacing:.4px}td{padding:15px 16px;border-bottom:1px solid var(--line);line-height:1.5}td:nth-child(2){font-weight:600}td:last-child{color:#737373;font-size:10px}.tag{font-size:8px;display:inline-block;color:#777;padding:3px 7px;border:1px solid var(--line);margin-bottom:6px}.note{margin:22px 0;padding:14px 18px;background:#eeeee8;border-left:2px solid var(--orange);font-size:11px;line-height:1.8;color:#70706a}.notes-list{padding:0;list-style:none}.notes-list li{padding:17px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.9;color:#555}.source-link{display:flex;justify-content:space-between;border:1px solid var(--line);padding:20px;margin-top:20px;font-size:12px;background:#fff}.source-link small{display:block;margin-top:7px;color:#999;font-size:10px}footer{margin:0 46px;padding:24px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:8px;color:#999}.compare-table{min-width:850px}.compare-table th{min-width:140px}.compare-table th:first-child{min-width:180px}.compare-table td{font-weight:400}.compare-table td:first-child{font-weight:600}.empty{padding:35px;text-align:center;color:#777}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.chips label{border:1px solid #d3d3cd;background:white;padding:10px 12px;font-size:11px;cursor:pointer}.chips input{accent-color:var(--orange);margin-right:6px}@media(min-width:1500px){main{max-width:1500px}.hero-art{right:12%}}@media(max-width:1000px){aside{width:210px;padding:28px 20px}main{margin-left:210px}header,.hero{padding-left:28px;padding-right:28px}.workspace{padding:25px 28px}h1{font-size:50px}.hero-art{right:-90px;opacity:.5}.edition{display:none}.metric{padding:18px 14px}.metric strong{font-size:24px}nav{margin-left:-20px;margin-right:-20px}}@media(max-width:720px){aside{position:relative;width:100%;padding:20px}.brand img{width:105px}.side-label,.library-title,.side-bottom{display:none}nav{display:flex;overflow:auto;margin:18px -20px -4px}nav button{min-width:max-content;padding:14px 17px;border-left:0;border-bottom:2px solid transparent;font-size:12px;gap:8px}nav button.active{border-bottom-color:var(--orange)}.compare-side{position:absolute;right:20px;top:17px;margin:0;padding:10px;font-size:11px}.compare-side small{display:none}main{margin-left:0}header{padding:0 20px;height:55px;font-size:8px;letter-spacing:.6px}header span{padding:0 5px}header button{font-size:10px}.hero{padding:29px 20px}.hero-art{right:-160px;top:-30px;opacity:.35}h1{font-size:46px;letter-spacing:-2px}.hero p{font-size:11px}.workspace{padding:24px 20px}.toolbar{align-items:start;flex-direction:column;gap:12px}.search{width:100%}.product-head{align-items:start}h2{font-size:29px}.download{font-size:10px;padding:11px}.download span{margin-left:5px}.metrics{grid-template-columns:1fr;margin:20px 0}.metric{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:15px 18px}.metric label{margin:0}.metric strong{font-size:25px}.metric p{grid-column:1/-1;margin-top:5px}.tabs{gap:20px}.tabs button{font-size:11px}table{min-width:550px}footer{margin:0 20px;flex-wrap:wrap;font-size:8px}.section-title span{font-size:8px}}@media print{aside,header,.hero,.toolbar,.tabs,.download,footer,.chips{display:none}main{margin:0}.workspace{padding:0}.table-wrap{overflow:visible}table{min-width:0!important;font-size:9px}td,th{padding:8px}.metrics{break-inside:avoid}.note{break-inside:avoid}body{background:white}}

/* Readable specifications and comparison tables. */
@media screen {
  table { font-size: 13px; }
  th { font-size: 11px; font-weight: 500; padding: 15px 16px; color: #555550; }
  td { padding: 17px 16px; line-height: 1.65; }
  td:last-child { font-size: 12px; color: #606060; }
  .compare-table td { font-size: 13px; }
}

/* Clearer hierarchy, contrast and scanning across the library. */
@media screen {
  body { font-size: 15px; line-height: 1.5; }
  aside { overflow-y: auto; }
  .side-label { font-size: 10px; color: #b0b0b0; letter-spacing: 1.2px; }
  .library-title > span { font-size: 13px; color: #bdbdbd; }
  nav button { font-size: 15px; color: #c3c3c3; padding-top: 17px; padding-bottom: 17px; }
  nav button span { font-size: 11px; color: #aaa; }
  nav button.active { font-weight: 600; background: #30241d; }
  .compare-side { font-size: 14px; gap: 8px; padding: 14px 12px; }
  .compare-side small { font-size: 11px; color: #b8b8b8; }
  .side-bottom { font-size: 9px; color: #b0b0b0; }
  .side-bottom a { font-size: 12px; }
  header { height: 66px; font-size: 10px; letter-spacing: 1px; }
  header button { font-size: 12px; min-height: 40px; }
  .hero { padding-top: 30px; padding-bottom: 28px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  h1 { font-size: clamp(42px,4.3vw,60px); letter-spacing: -2.5px; line-height: 1.08; margin: 20px 0; }
  .hero p { font-size: 14px; line-height: 1.75; color: #51514d; }
  .edition { font-size: 10px; }
  .edition span { font-size: 10px; color: #60605b; }
  .breadcrumbs { font-size: 11px; color: #555550; letter-spacing: 1px; }
  .search { width: 330px; max-width: 100%; padding: 9px 14px; background: #fff; border: 1px solid #babbb3; border-radius: 4px; }
  .search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 2px #e94f0e20; }
  .search input { font-size: 13px; min-width: 0; }
  .search input::placeholder { color: #6a6a65; opacity: 1; }
  .product-head .eyebrow { font-size: 11px; color: #b63a08; font-weight: 600; }
  h2 { font-size: 36px; font-weight: 600; margin-top: 8px; }
  .subtitle { font-size: 15px; color: #555550; max-width: 70ch; }
  .metrics { margin: 26px 0; }
  .metric { padding: 22px; }
  .metric label { font-size: 13px; color: #50504b; margin-bottom: 10px; }
  .metric strong { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .metric small { font-size: 13px; color: #555; }
  .metric p { font-size: 12px; line-height: 1.6; color: #66665f; }
  .tabs { gap: 12px; margin-top: 28px; }
  .tabs button { font-size: 14px; color: #555; padding: 12px 16px 14px; min-height: 48px; }
  .tabs button.active { font-weight: 600; background: #e94f0e09; border-bottom-width: 3px; }
  .tabs button:hover { color: #171717; background: #e9e9e3; }
  .section-title { margin: 28px 0 16px; gap: 16px; }
  .section-title h3 { font-size: 18px; font-weight: 600; }
  .section-title span { font-size: 11px; color: #66665f; white-space: nowrap; }
  .table-wrap { border: 1px solid #d3d3cc; border-radius: 4px; background: white; }
  table { font-size: 14px; }
  thead { background: #e4e5de; }
  th { font-size: 12px; color: #383a34; font-weight: 600; padding: 16px 18px; letter-spacing: .5px; }
  td { padding: 17px 18px; line-height: 1.65; border-bottom: 1px solid #dcded6; }
  td:first-child { font-weight: 500; }
  td:nth-child(2) { font-weight: 600; font-variant-numeric: tabular-nums; }
  td:last-child { font-size: 13px; color: #50534b; }
  tbody tr:nth-child(even) { background: #f5f6f1; }
  tbody tr:hover { background: #fff0e7; }
  tbody tr:last-child td { border-bottom: 0; }
  .compare-table td { font-size: 14px; }
  .compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: #eaece4; box-shadow: 1px 0 #d3d3cc; }
  .note { font-size: 13px; color: #50534b; padding: 18px 20px; line-height: 1.85; border-left-width: 3px; }
  .notes-list li { font-size: 15px; line-height: 1.85; color: #41443d; padding: 20px 0; max-width: 85ch; }
  .chips label { font-size: 13px; padding: 12px 14px; }
  .chips label:has(input:checked) { border-color: #b63a08; background: #fff4ed; }
  .empty { font-size: 14px; color: #555; }
  footer { font-size: 11px; line-height: 1.7; color: #62625d; flex-wrap: wrap; }
}
@media screen and (max-width: 1000px) {
  .metric { padding: 18px 14px; }
  .metric label { font-size: 12px; }
  .metric strong { font-size: 28px; }
  .hero-art { opacity: .3; }
}
@media screen and (max-width: 720px) {
  aside { overflow: visible; }
  nav button { font-size: 14px; padding: 14px 17px; }
  .compare-side { font-size: 12px; padding: 9px 12px; }
  header { font-size: 9px; letter-spacing: .3px; gap: 10px; }
  header button { font-size: 11px; white-space: nowrap; }
  .hero { padding: 26px 20px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1px; }
  h1 { font-size: 44px; letter-spacing: -2px; }
  .hero p { font-size: 13px; }
  .search { width: 100%; }
  h2 { font-size: 31px; }
  .subtitle { font-size: 14px; }
  .metric { padding: 18px; }
  .metric label { font-size: 13px; }
  .tabs { gap: 0; }
  .tabs button { padding: 12px 9px; font-size: 12px; flex: 1; }
  .section-title h3 { font-size: 16px; }
  .section-title span { font-size: 10px; letter-spacing: .3px; }
  th, td { padding: 15px 14px; }
  .note { padding: 16px; }
  footer { font-size: 10px; }
}

