:root{
    --bg:#EEF2EC;
    --surface:#FFFFFF;
    --ink:#16231C;
    --muted:#62705F;
    --line:#CBD6C6;
    --line-soft:#DDE5D8;

    --json:#C7692F;
    --json-soft:#F1DCC7;
    --yaml:#46589E;
    --yaml-soft:#DBDFF0;
    --csv:#2C7A5B;
    --csv-soft:#D3E9DD;
    --error:#B4432E;
    --error-soft:#F4D9D2;

    --mono:'JetBrains Mono', ui-monospace, monospace;
    --sans:'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    min-height:100vh;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px);
    background-size: 100% 44px;
    background-position: 0 120px;
  }
  .page{
    max-width:1180px;
    margin:0 auto;
    padding:40px 24px 64px;
  }

  /* ---------- Header ---------- */
  header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    padding-bottom:28px;
    border-bottom:2px solid var(--ink);
    margin-bottom:32px;
    flex-wrap:wrap;
  }
  .brand-eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 6px;
    white-space:nowrap;
  }
  h1{
    font-family:var(--mono);
    font-weight:700;
    font-size:clamp(28px, 4vw, 42px);
    margin:0;
    letter-spacing:-0.01em;
    line-height:1.1;
  }
  h1 .sep{ color:var(--muted); font-weight:500; padding:0 10px;}
  h1 .json-hl{color:var(--json);}
  h1 .csv-hl{color:var(--csv);}
  h1 .yaml-hl{color:var(--yaml);}
  header p{
    font-size:14px;
    color:var(--muted);
    max-width:360px;
    margin:0 0 4px;
    line-height:1.5;
    word-break:keep-all;
  }

  /* ---------- Switchyard ---------- */
  .switchyard{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px 24px;
    margin-bottom:28px;
  }
  .format-group{
    display:flex;
    gap:8px;
  }
  .format-group .glabel{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.1em;
    align-self:center;
    margin-right:4px;
  }
  .pill{
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    border:1.5px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
    transition: all .15s ease;
  }
  .pill:hover{ border-color:var(--ink); color:var(--ink); }
  .pill.active[data-fmt="json"]{ background:var(--json); border-color:var(--json); color:#fff; }
  .pill.active[data-fmt="yaml"]{ background:var(--yaml); border-color:var(--yaml); color:#fff; }
  .pill.active[data-fmt="csv"]{ background:var(--csv); border-color:var(--csv); color:#fff; }

  .track{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .track svg{ width:46px; height:14px; display:block; }
  .swap-btn{
    width:38px; height:38px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
    font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition: transform .2s ease, background .15s ease;
  }
  .swap-btn:hover{ background:var(--ink); color:var(--bg); transform:rotate(180deg); }

  /* ---------- Editors ---------- */
  .editors{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap:16px;
    align-items:stretch;
  }
  @media (max-width: 860px){
    .editors{ grid-template-columns: 1fr; }
    .connector{ flex-direction:row; justify-content:center; padding:8px 0; }
    .connector svg{ transform:rotate(90deg); }
  }
  .panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
  }
  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    border-bottom:1px solid var(--line-soft);
  }
  .panel-head .tag{
    font-family:var(--mono);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:6px;
  }
  .panel.source .tag{ background:var(--json-soft); color:var(--json); }
  .panel.source[data-fmt="yaml"] .tag{ background:var(--yaml-soft); color:var(--yaml); }
  .panel.source[data-fmt="csv"] .tag{ background:var(--csv-soft); color:var(--csv); }
  .panel.output .tag{ background:var(--line-soft); color:var(--muted); }
  .panel.output[data-fmt="json"] .tag{ background:var(--json-soft); color:var(--json); }
  .panel.output[data-fmt="yaml"] .tag{ background:var(--yaml-soft); color:var(--yaml); }
  .panel.output[data-fmt="csv"] .tag{ background:var(--csv-soft); color:var(--csv); }

  .panel-actions{ display:flex; gap:6px; }
  .mini-btn{
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--muted);
    padding:5px 10px;
    border-radius:7px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .mini-btn:hover{ border-color:var(--ink); color:var(--ink); }

  .editor-wrap{
    display:flex;
    flex:1;
    min-height:360px;
    position:relative;
  }
  .gutter{
    font-family:var(--mono);
    font-size:12.5px;
    line-height:20px;
    padding:14px 0;
    width:52px;
    flex-shrink:0;
    overflow:hidden;
    background:#FAFBF9;
    border-right:1px solid var(--line-soft);
    user-select:none;
  }
  .g-row{
    display:flex;
    align-items:center;
    height:20px;
    padding-left:6px;
    gap:6px;
  }
  .g-num{ color:#A6B3A0; width:22px; text-align:right; font-size:11px; }
  .g-bar{ width:7px; height:12px; border-radius:2px; background:var(--line-soft); flex-shrink:0; }

  .g-bar.json.d0{ background:rgba(199,105,47,0.28); }
  .g-bar.json.d1{ background:rgba(199,105,47,0.48); }
  .g-bar.json.d2{ background:rgba(199,105,47,0.68); }
  .g-bar.json.d3{ background:rgba(199,105,47,0.86); }
  .g-bar.json.d4{ background:rgba(199,105,47,1); }

  .g-bar.yaml.d0{ background:rgba(70,88,158,0.28); }
  .g-bar.yaml.d1{ background:rgba(70,88,158,0.48); }
  .g-bar.yaml.d2{ background:rgba(70,88,158,0.68); }
  .g-bar.yaml.d3{ background:rgba(70,88,158,0.86); }
  .g-bar.yaml.d4{ background:rgba(70,88,158,1); }

  .g-bar.csv.head{ background:var(--csv); }
  .g-bar.csv.odd{ background:rgba(44,122,91,0.22); }
  .g-bar.csv.even{ background:rgba(44,122,91,0.4); }

  textarea{
    flex:1;
    border:none;
    outline:none;
    resize:none;
    padding:14px 16px;
    font-family:var(--mono);
    font-size:12.5px;
    line-height:20px;
    color:var(--ink);
    background:transparent;
    white-space:pre;
    overflow:auto;
  }
  textarea::placeholder{ color:#A6B3A0; }
  textarea[readonly]{ background:#FCFDFB; color:#33413A; }

  .status{
    display:flex;
    justify-content:space-between;
    padding:8px 16px;
    border-top:1px solid var(--line-soft);
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--muted);
    min-height:32px;
    align-items:center;
  }
  .status.is-error{ color:var(--error); }
  .status .badge-ok{ color:var(--csv); }

  .connector{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
  }
  #convertBtn{
    font-family:var(--mono);
    font-weight:700;
    font-size:13px;
    background:var(--ink);
    color:var(--bg);
    border:none;
    border-radius:10px;
    padding:14px 10px;
    cursor:pointer;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    letter-spacing:0.05em;
    transition: background .15s ease;
  }
  #convertBtn:hover{ background:#2b3d31; }
  @media (max-width: 860px){
    #convertBtn{ writing-mode:horizontal-tb; padding:10px 20px; }
  }

  footer{
    margin-top:28px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--muted);
    text-align:center;
    line-height:1.6;
  }
  footer .legend{
    display:flex;
    gap:18px;
    justify-content:center;
    margin-top:10px;
    flex-wrap:wrap;
  }
  footer .legend span{ display:inline-flex; align-items:center; gap:6px; }
  footer .dot{ width:8px; height:8px; border-radius:2px; display:inline-block; }
  footer .dot.json{ background:var(--json); }
  footer .dot.yaml{ background:var(--yaml); }
  footer .dot.csv{ background:var(--csv); }

  footer .legal-links{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line-soft);
    font-size:11px;
  }
  footer .legal-links a{ color:var(--muted); text-decoration:none; }
  footer .legal-links a:hover{ color:var(--ink); }
/* ---- SY Project 안내/FAQ 섹션 ---- */
.sy-info{ margin-top:32px; padding-top:22px; border-top:2px solid var(--ink); }
.sy-info h2{ font-family:var(--mono); font-size:16px; color:var(--ink); margin-bottom:10px; }
.sy-info > p{ font-size:13.5px; line-height:1.75; color:var(--muted); margin-bottom:16px; }
.sy-faq details{ border-top:1px solid var(--line-soft); padding:12px 0; }
.sy-faq summary{ cursor:pointer; font-weight:600; font-family:var(--mono); font-size:13px; color:var(--ink); list-style:none; }
.sy-faq summary::-webkit-details-marker{ display:none; }
.sy-faq summary::before{ content:'// '; color:var(--json); }
.sy-faq details p{ margin-top:8px; font-size:13px; color:var(--muted); line-height:1.7; }