:root {
      --bg: #eef2f7;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: #e2e8f0;
      --primary: #0f172a;
      --blue: #1d4ed8;
      --light: #f3f4f6;
      --danger: #dc2626;
      --radius: 20px;
      --shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Microsoft YaHei", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    .page {
      width: min(1180px, calc(100% - 28px));
      margin: 28px auto 56px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 22px;
    }
    .header h1 {
      margin: 0;
      font-size: clamp(24px, 4vw, 34px);
      line-height: 1.2;
    }
    .header p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
    }
    .status {
      padding: 9px 13px;
      border-radius: 999px;
      background: #ecfdf5;
      color: #047857;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(330px, 400px) 1fr;
      gap: 24px;
      align-items: start;
    }
    .panel, .preview-shell {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .panel {
      padding: 22px;
      position: sticky;
      top: 18px;
    }
    .section-title {
      margin: 0 0 18px;
      font-size: 18px;
    }
    .field {
      margin-bottom: 17px;
    }
    label {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
      font-weight: 750;
    }
    .hint {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }
    input, textarea, select {
      width: 100%;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      padding: 12px 13px;
      font-size: 15px;
      outline: none;
      transition: 0.2s;
      background: #fff;
      color: var(--text);
    }
    textarea {
      min-height: 82px;
      resize: vertical;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.11);
    }
    .button-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 18px;
    }
    button.action {
      appearance: none;
      border: 0;
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 760;
      transition: 0.18s;
    }
    button.action:hover {
      transform: translateY(-1px);
    }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-image { background: var(--blue); color: #fff; }
    .btn-light { background: var(--light); color: #374151; }
    .btn-danger { background: #fef2f2; color: var(--danger); }

    .preview-shell { padding: 18px; }
    .preview-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .preview-toolbar strong { font-size: 15px; }
    .preview-toolbar span { color: var(--muted); font-size: 12px; }

    .image-stage {
      width: 100%;
      padding: 18px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(37,99,235,0.05), transparent 50%), #f8fafc;
      overflow: auto;
    }

    .export-card {
      width: min(100%, 700px);
      margin: 0 auto;
      padding: 34px 34px 30px;
      border-radius: 24px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      position: relative;
      overflow: hidden;
    }
    .export-card::before {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      right: -110px;
      top: -110px;
      border-radius: 50%;
      background: rgba(37, 99, 235, 0.05);
    }
    .card-top, .card-middle {
      position: relative;
      z-index: 1;
    }
    .main-title {
      text-align: center;
      font-size: clamp(28px, 4.8vw, 54px);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #111827;
      margin: 0 0 20px;
      line-height: 1.15;
    }
    .barcode-panel {
      padding: 24px 20px;
      border: 1px solid #e5e7eb;
      border-radius: 20px;
      background: #fbfcff;
      text-align: center;
    }
    .barcode-image-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .barcode-image-wrap img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }
    .info-stack {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .info-row {
      display: grid;
      grid-template-columns: 36% 1fr;
      align-items: center;
      min-height: 76px;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
    }
    .info-label {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 18px;
      background: #f8fafc;
      color: #475569;
      font-size: clamp(14px, 1.8vw, 18px);
      font-weight: 800;
      line-height: 1.35;
    }
    .info-value {
      padding: 14px 18px;
      font-size: clamp(21px, 3vw, 32px);
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: -0.02em;
      word-break: break-all;
    }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translate(-50%, 20px);
      background: rgba(17, 24, 39, 0.96);
      color: #fff;
      padding: 11px 16px;
      border-radius: 10px;
      font-size: 13px;
      opacity: 0;
      pointer-events: none;
      transition: 0.25s;
      z-index: 1000;
    }
    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .exporting {
      width: 1080px !important;
      padding: 58px 58px 50px !important;
      border-radius: 0 !important;
    }
    .exporting .main-title {
      font-size: 66px !important;
      margin-bottom: 28px !important;
    }
    .exporting .barcode-panel {
      padding: 34px 28px !important;
      border-radius: 26px !important;
    }
    .exporting .info-stack {
      gap: 16px !important;
      margin-top: 24px !important;
    }
    .exporting .info-row {
      min-height: 108px !important;
      border-radius: 20px !important;
    }
    .exporting .info-label {
      font-size: 25px !important;
      padding: 0 24px !important;
    }
    .exporting .info-value {
      font-size: 42px !important;
      padding: 18px 24px !important;
    }

    @media (max-width: 850px) {
      .layout { grid-template-columns: 1fr; }
      .panel { position: static; }
    }
    @media (max-width: 560px) {
      .header {
        align-items: flex-start;
        flex-direction: column;
      }
      .button-grid { grid-template-columns: 1fr; }
      .preview-shell, .image-stage { padding: 10px; }
      .export-card { border-radius: 16px; padding: 22px 18px 18px; }
      .main-title { margin-bottom: 14px; }
      .barcode-panel { padding: 16px 12px; }
      .info-row {
        min-height: 64px;
        grid-template-columns: 40% 1fr;
      }
      .info-label { padding: 0 10px; }
      .info-value { padding: 10px 12px; font-size: 18px; }
    }
   .quick-picker { position:relative; }
    .quick-picker input { padding-right:44px; }
    .quick-arrow { position:absolute;right:3px;top:3px;width:38px;height:40px;border:0;background:transparent;color:#64748b;cursor:pointer;font-size:16px; }
    .quick-options { position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;background:white;border:1px solid #d1d5db;border-radius:12px;box-shadow:0 8px 24px #0f172a22;padding:5px;max-height:240px;overflow:auto; }
    .quick-option { display:block;width:100%;text-align:left;border:0;border-radius:8px;background:white;color:#0f172a;padding:12px 8px;font-size:14px;cursor:pointer; }
    .quick-option:hover,.quick-option:focus { background:#eff6ff; }
    .quick-actions {display:flex;gap:8px;margin-top:8px;}
    .quick-actions button {flex:1;}
  
:root{--bg:#eff5fc;--text:#203453;--muted:#566b85;--line:#d5e3f1;--primary:#087d77;--blue:#1766c3;--shadow:0 10px 30px #214e8410}body{background:linear-gradient(135deg,#edf3ff,#f2f9fb 55%,#eef9f3);font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif}.page{width:min(1200px,calc(100% - 48px));margin:22px auto 44px}.sitebar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;font-size:13px}.sitebar a{text-decoration:none;color:#087d77;font-weight:650}.sitebar button{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#ffffffbd;color:#087d77;margin-left:8px;min-height:40px;cursor:pointer}.header{padding:26px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(115deg,#e9f2ff,#e5f8f4);box-shadow:var(--shadow);flex-wrap:wrap}.header h1{font-size:30px;color:var(--text)}.status{background:#ffffffa0;color:#476b7d;font-weight:500}.panel,.preview-shell{border-radius:16px}.layout>*{min-width:0}.panel{top:16px}.btn-primary,.btn-image{background:#087d77}.quick-option{overflow-wrap:anywhere;min-height:44px}.quick-actions button{padding:9px 6px;font-size:12px}.button-grid{grid-template-columns:1fr 1fr}.action{min-height:44px}input,select,textarea{font-size:16px;min-height:44px}button:focus-visible,a:focus-visible{outline:3px solid #6298f4;outline-offset:2px}.preview-toolbar{flex-wrap:wrap;gap:5px}.preview-toolbar span{font-size:12px}.info-value{overflow-wrap:anywhere}.toast{max-width:90vw;line-height:1.5}.quick-options[hidden]{display:none}#imageDialog{width:min(600px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--text)}#imageDialog::backdrop{background:#15324999}.image-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.image-dialog-head h2{font-size:20px;margin:0}#imageDialog button,#downloadImage{padding:12px 18px;border:0;background:#087d77;color:white;border-radius:9px;text-decoration:none;display:inline-block;cursor:pointer}#generatedImage{display:block;width:100%;height:auto;margin:12px 0;border:1px solid #eee}#imageDialog p{font-size:13px;color:var(--muted)}
@media(max-width:850px){.page{width:calc(100% - 24px);margin:12px auto 28px}.header{padding:20px;margin-bottom:14px}.layout{gap:14px}.panel{padding:16px}.header h1{font-size:25px}.field{margin-bottom:14px}.button-grid{grid-template-columns:1fr 1fr}.preview-shell{padding:12px}.image-stage{padding:4px}.export-card{padding:18px 10px}.main-title{font-size:28px}.barcode-panel{padding:12px 6px}.info-label{font-size:12px}.info-value{font-size:17px}.info-row{grid-template-columns:38% 1fr}.status{font-size:12px}.sitebar{font-size:12px}.quick-actions{gap:6px}}