:root{
  --primary:#2779bd;--primary-dark:#1e669f;--text:#20262e;--muted:#707983;
  --border:#e3e7eb;--soft:#f6f8fa;--white:#fff;--danger:#dc3545;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f8fa;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.site-shell{max-width:980px;margin:0 auto;padding:0 18px 50px}
.site-header{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800}
.brand-mark{display:inline-flex;width:36px;height:28px;border-radius:6px;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-size:13px;letter-spacing:-.04em}
.brand-text{font-size:14px}
.top-nav{display:flex;gap:18px;color:#69727d;font-size:13px}
.top-nav a:hover{color:var(--primary)}
.page-intro{padding:28px 2px 20px}
.breadcrumb{display:flex;gap:7px;align-items:center;color:#9aa2aa;font-size:12px;margin-bottom:10px}
.breadcrumb strong{color:#6b7280}
.page-intro h1{margin:0 0 7px;font-size:30px;letter-spacing:-.045em}
.page-intro p{margin:0;color:var(--muted);font-size:14px}
.ad-slot{height:100px;border:1px dashed #d6dbe0;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 0 18px;color:#adb4bb;font-size:10px;letter-spacing:.08em}
.tool-card{background:var(--white);border:1px solid var(--border);border-radius:9px;overflow:hidden;box-shadow:0 2px 12px rgba(23,33,43,.035)}
.tool-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 12px}
.tool-tab{background:none;border:0;color:#68727c;padding:14px 17px;font-weight:700;font-size:13px;position:relative}
.tool-tab.active{color:var(--primary)}
.tool-tab.active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--primary)}
.preview-area{padding:20px 20px 17px;border-bottom:1px solid var(--border)}
.preview-box{min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#barcodeCanvas{max-width:100%;height:auto}
.preview-empty{display:flex;flex-direction:column;align-items:center;gap:5px;color:#9aa2aa;text-align:center}
.preview-empty strong{font-size:14px;color:#6b7280}
.preview-empty span{font-size:12px}
.empty-icon{width:42px;height:42px;border-radius:50%;background:#f0f6fb;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:3px}
.error{min-height:18px;color:var(--danger);font-size:12px;margin:8px 0 0;text-align:center}
.preview-buttons{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.btn{border:1px solid #cfd6dd;background:#fff;color:#44505b;border-radius:5px;padding:8px 14px;font-size:12px;font-weight:700}
.btn:hover{border-color:#aeb9c4;background:#f9fafb}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.control-panel{padding:20px}
.input-group{margin-bottom:20px}
.input-group label,.setting label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;margin-bottom:7px;color:#35404b}
.input-row{display:grid;grid-template-columns:minmax(0,1fr) 190px}
.input-row input,.input-row select,.setting select,.color-row input[type=text],.color-row input:not([type]){
  width:100%;height:38px;border:1px solid #cfd6dd;background:#fff;outline:none;color:#26313b
}
.input-row input{border-radius:5px 0 0 5px;padding:0 11px}
.input-row select{border-left:0;border-radius:0 5px 5px 0;padding:0 9px}
.setting select{border-radius:5px;padding:0 9px}
input:focus,select:focus{border-color:#7bb2d9;box-shadow:0 0 0 3px rgba(39,121,189,.08)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;row-gap:1px}
.setting{min-width:0;margin-bottom:18px}
.setting output{color:var(--primary);font-weight:800}
input[type=range]{width:100%;height:18px;margin:0;accent-color:var(--primary)}
.color-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px}
input[type=color]{width:42px;height:38px;padding:3px;border:1px solid #cfd6dd;border-radius:5px;background:#fff}
.color-row input[type=text],.color-row input:not([type]){border-radius:5px;padding:0 9px;font-size:12px}
.segmented{display:flex}
.seg{border:1px solid #cfd6dd;background:#fff;color:#59636d;padding:7px 12px;font-size:12px;margin-left:-1px}
.seg:first-child{margin-left:0;border-radius:5px 0 0 5px}
.seg:last-child{border-radius:0 5px 5px 0}
.seg.active{position:relative;z-index:1;color:#fff;background:var(--primary);border-color:var(--primary)}
.hint{margin:7px 0 0;color:#8a949e;font-size:11px;line-height:1.5}
.hidden{display:none!important}
.privacy-note{display:flex;gap:9px;align-items:flex-start;background:#f7fafc;border:1px solid #e4edf4;border-radius:6px;padding:11px 12px;color:#65717c;font-size:11px;line-height:1.55;margin-top:3px}
.privacy-note>span{color:#2b8a57;font-weight:900}
.privacy-note strong{color:#44515d}
.content-section{padding:32px 3px 0}
.content-section h2{font-size:22px;letter-spacing:-.035em;margin:0 0 11px}
.content-section>p{font-size:13px;line-height:1.85;color:#626d77;margin:0 0 28px}
.info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:34px}
.info-cards article{background:#fff;border:1px solid var(--border);border-radius:7px;padding:15px}
.info-cards h3{font-size:14px;margin:0 0 6px}
.info-cards p{font-size:12px;line-height:1.65;color:#6b7580;margin:0}
.faq-section{padding-top:2px}
.section-kicker{font-size:11px;color:var(--primary);font-weight:800;letter-spacing:.12em;margin-bottom:5px}
.faq-section h2{margin-bottom:13px}
.faq-section details{background:#fff;border:1px solid var(--border);border-bottom:0;padding:0 15px}
.faq-section details:last-child{border-bottom:1px solid var(--border);border-radius:0 0 6px 6px}
.faq-section details:first-of-type{border-radius:6px 6px 0 0}
.faq-section summary{list-style:none;cursor:pointer;padding:15px 2px;font-size:13px;font-weight:700;position:relative;padding-right:28px}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary:after{content:"+";position:absolute;right:2px;color:#9aa3ab;font-size:18px;top:12px}
.faq-section details[open] summary:after{content:"−"}
.faq-section details p{font-size:12px;line-height:1.75;color:#68727c;padding:0 2px 15px;margin:0}
.site-footer{border-top:1px solid var(--border);margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;color:#9aa2aa;font-size:11px}
.footer-links{display:flex;gap:14px}
@media(max-width:700px){
  .site-shell{padding:0 10px 38px}
  .site-header{height:52px}
  .top-nav{display:none}
  .page-intro{padding:21px 2px 16px}
  .page-intro h1{font-size:25px}
  .ad-slot{height:72px;margin-bottom:12px}
  .tool-tabs{padding:0 7px}
  .tool-tab{padding:13px 15px}
  .preview-area{padding:16px 10px 14px}
  .preview-box{min-height:190px}
  .preview-buttons{display:grid;grid-template-columns:1fr 1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .preview-buttons .btn-primary{grid-column:1/-1}
  .btn{min-height:40px}
  .control-panel{padding:16px 13px}
  .input-row{grid-template-columns:1fr}
  .input-row input{border-radius:5px}
  .input-row select{border-left:1px solid #cfd6dd;border-radius:5px;margin-top:7px}
  .settings-grid{display:block}
  .setting{margin-bottom:17px}
  .content-section{padding-top:27px}
  .content-section h2{font-size:20px}
  .info-cards{grid-template-columns:1fr;gap:8px}
  .faq-section summary{padding-top:14px;padding-bottom:14px}
  .site-footer{display:block;line-height:2}
  .footer-links{margin-top:5px}
}
@media(max-width:380px){
  .preview-buttons{grid-template-columns:1fr}
  .preview-buttons .btn-primary{grid-column:auto}
}