:root{
  --navy:#0b2230;
  --navy-2:#102c3b;
  --navy-3:#071b27;
  --cyan:#25d9e7;
  --cyan-soft:#e7fbfd;
  --purple:#7b61ff;
  --purple-soft:#f0ebff;
  --mint:#e8fbf3;
  --mint-border:#88e7bb;
  --bg:#eff9fc;
  --panel:#ffffff;
  --line:#dfe9ee;
  --line-2:#cfdce3;
  --text:#10212d;
  --muted:#6f8290;
  --soft:#f8fbfc;
  --danger:#d9483f;
  --warning:#b16c18;
  --success:#06845c;
  --shadow:0 8px 24px rgba(9,34,49,.07);
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Pretendard,"Noto Sans KR","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-header{
  height:68px;background:var(--navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  height:100%;max-width:1500px;margin:0 auto;padding:0 34px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand-icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#4ce5ef;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)
}
.db-stack{
  width:18px;height:18px;border:2px solid #0a3543;border-radius:8px;position:relative
}
.db-stack:before,.db-stack:after{
  content:"";position:absolute;left:2px;right:2px;height:4px;border-top:2px solid #0a3543;border-radius:50%
}
.db-stack:before{top:4px}.db-stack:after{top:9px}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy small{font-size:9px;font-weight:900;letter-spacing:.14em;color:#82c9d2;margin-bottom:5px}
.brand-copy strong{font-size:16px;letter-spacing:-.03em}
.header-actions{display:flex;align-items:center;gap:12px}
.support-badge{
  font-size:11px;border:1px solid rgba(65,223,232,.38);background:rgba(37,217,231,.08);
  color:#a8f6f7;border-radius:999px;padding:5px 9px;font-weight:800
}
.version{font-size:11px;color:#8ca0ac}
.app-shell{
  max-width:1500px;margin:0 auto;display:grid;grid-template-columns:230px minmax(0,1fr);
  min-height:calc(100vh - 68px)
}
.sidebar{
  padding:30px 20px 28px 0;border-right:1px solid rgba(193,218,226,.55)
}
.sidebar-title{
  padding:0 14px 15px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#687b87
}
.side-nav{display:flex;flex-direction:column;gap:7px}
.side-nav-btn{
  width:100%;min-height:60px;border:0;background:transparent;border-radius:13px;
  display:grid;grid-template-columns:28px minmax(0,1fr) 16px;align-items:center;gap:8px;
  padding:9px 12px;text-align:left;color:#294250;transition:.16s
}
.side-nav-btn:hover{background:rgba(255,255,255,.65)}
.side-nav-btn.active{background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.side-icon{font-size:17px;color:#86a1af;text-align:center}
.side-nav-btn.active .side-icon,.side-nav-btn.active .chev{color:#28dce9}
.side-copy{min-width:0}
.side-copy strong{display:block;font-size:13px;letter-spacing:-.02em}
.side-copy small{display:block;margin-top:4px;font-size:9px;color:#8fa4af}
.side-nav-btn.active .side-copy small{color:#70b7c5}
.chev{font-size:20px;color:#8fa4af}
.sidebar-note{
  margin:34px 0 0;padding:16px;border-radius:16px;background:white;border:1px solid var(--line);
  box-shadow:var(--shadow)
}
.note-icon{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:#fff1d6;color:#d48a1f;margin-bottom:10px
}
.sidebar-note strong{font-size:12px}
.sidebar-note p{margin:8px 0 0;font-size:10px;line-height:1.7;color:#778996}
.main-content{padding:32px 32px 42px}
.tool-view{display:none}.tool-view.active{display:block}
.page-title-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px
}
.title-meta{display:flex;align-items:center;gap:9px;font-size:10px;color:#788894;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-weight:900}
.chip.cyan{background:var(--cyan-soft);color:#0f7f87;border:1px solid #a8edf2}
.chip.purple{background:var(--purple-soft);color:#6347db;border:1px solid #d5c9ff}
.page-title-row h1{margin:0;font-size:29px;letter-spacing:-.045em;line-height:1.2}
.page-title-row p{margin:8px 0 0;font-size:12px;color:#738691}
.segmented{
  display:flex;gap:3px;padding:4px;background:#e7f0f4;border:1px solid #d7e4e9;border-radius:999px
}
.segment{
  height:34px;padding:0 14px;border:0;background:transparent;border-radius:999px;color:#6f828e;font-size:11px;font-weight:800
}
.segment.active,.segment:hover{background:#fff;color:#192e3b;box-shadow:0 1px 4px rgba(14,43,60,.08)}
.workspace-grid{
  display:grid;grid-template-columns:300px minmax(0,1fr) 255px;gap:16px;align-items:start
}
.panel,.insight-card,.result-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.db-panel{padding:15px}
.panel-head{
  min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 3px 12px
}
.panel-head.compact{min-height:36px;padding-bottom:9px}
.panel-head>div{display:flex;align-items:center;gap:8px}
.panel-head strong{font-size:11px;letter-spacing:.06em}
.panel-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.panel-dot.cyan{background:var(--cyan)}.panel-dot.purple{background:var(--purple)}
.status-badge{font-size:10px;font-weight:900;border-radius:999px;padding:5px 8px}
.status-badge.neutral{background:#f1f5f7;color:#7d8c96}
.status-badge.success{background:#e9fbf3;color:#0d8b60}.status-badge.error{background:#fff0ee;color:#d74b42}
.connection-form{display:flex;flex-direction:column;gap:10px}
.connection-form label,.generator-fields label,.convert-fields label{display:block}
label>span{
  display:block;font-size:9px;font-weight:900;letter-spacing:.08em;color:#71838e;margin-bottom:5px
}
input,select,textarea{
  width:100%;border:1px solid var(--line-2);background:#fff;color:var(--text);
  border-radius:10px;outline:none;transition:.15s
}
input,select{height:38px;padding:0 10px;font-size:12px}
textarea{padding:14px}
input:focus,select:focus,textarea:focus{border-color:#66cfd9;box-shadow:0 0 0 3px rgba(37,217,231,.09)}
.two-inputs{display:grid;grid-template-columns:90px 1fr;gap:8px}
.password-wrap{position:relative}.password-wrap input{padding-right:52px}
.text-button{
  position:absolute;right:5px;top:5px;height:28px;border:0;background:#f4f7f8;border-radius:7px;
  color:#6c7e8a;font-size:10px;font-weight:800
}
.inline-check{display:flex!important;align-items:center;gap:7px;font-size:11px;color:#627783}
.inline-check input{width:15px;height:15px;margin:0}
.inline-check span{margin:0!important;font-size:10px!important;letter-spacing:0!important}
.inline-check.warning{color:#9c581d}
.primary-button,.run-button,.mini-button{
  border:0;border-radius:9px;font-weight:850;transition:.15s
}
.primary-button{height:38px;padding:0 14px;background:var(--navy);color:#fff;font-size:11px}
.primary-button:hover,.run-button:hover{background:#12394b}
.primary-button.full{width:100%}
.run-button{
  height:38px;padding:0 15px;background:var(--navy);color:#fff;font-size:11px;display:inline-flex;align-items:center;gap:7px
}
.run-button span{font-size:14px;color:var(--cyan)}
.mini-button{
  min-height:29px;padding:0 9px;background:#f8fbfc;border:1px solid var(--line);color:#566b77;font-size:10px
}
.mini-button:hover{background:#eef7fa}.mini-button:disabled{opacity:.45;cursor:not-allowed}
.hint{font-size:10px;color:#7a8d98;line-height:1.5}
.panel-divider{height:1px;background:var(--line);margin:15px 0}
.db-browser{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fbfdfe}
.table-list{max-height:180px;overflow:auto}
.table-item{
  width:100%;border:0;border-bottom:1px solid #edf3f5;background:transparent;
  display:flex;justify-content:space-between;gap:8px;padding:8px 9px;font-size:10px;color:#36505d;text-align:left
}
.table-item:hover,.table-item.active{background:#e9f9fc;color:#126b75}
.table-type{font-size:8px;color:#92a4ad;text-transform:uppercase}
.column-list{max-height:170px;overflow:auto}
.column-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 9px;border-top:1px solid #edf3f5;font-size:9px}
.column-row strong{font-size:9px}.column-meta{color:#8da0aa}
.empty-state{padding:15px;text-align:center;color:#92a3ad;font-size:10px}
.editor-panel{overflow:hidden}
.editor-panel .panel-head{padding:11px 13px;border-bottom:1px solid var(--line)}
.editor-tools{display:flex!important;align-items:center;gap:5px!important}
.max-row{display:flex;align-items:center;gap:6px}
.max-row span{margin:0;font-size:8px}.max-row input{width:66px;height:29px}
.editor-body{
  min-height:360px;display:grid;grid-template-columns:40px minmax(0,1fr);background:#fff
}
.code-gutter{
  padding:18px 10px;text-align:right;color:#b4c0c7;background:#fbfdfe;border-right:1px solid #edf2f4;
  font:10px/26px Consolas,monospace;user-select:none
}
#sqlEditor{
  min-height:360px;resize:vertical;border:0;border-radius:0;box-shadow:none;
  font:13px/26px Consolas,"SFMono-Regular",monospace;padding:16px;color:#162b37;background:#fff
}
#sqlEditor:focus{box-shadow:none}
.editor-bottom{
  min-height:54px;padding:9px 12px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.run-area{display:flex;align-items:center;gap:10px}
.insight-column{display:flex;flex-direction:column;gap:14px}
.insight-card{padding:15px}
.safety-card{background:var(--mint);border-color:var(--mint-border)}
.insight-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.insight-title>div{display:flex;align-items:center;gap:8px}
.insight-title strong{font-size:12px}
.round-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900}
.round-icon.success{border:1px solid #46b88e;color:#087b59;background:#f4fff9}
.insight-card p{margin:10px 0 0;font-size:10px;line-height:1.7;color:#607984}
.query-type{font-size:9px;background:#f3f5f6;border-radius:999px;padding:4px 7px}
.query-structure{display:flex;flex-direction:column;gap:12px;margin-top:15px}
.query-structure span{display:block;font-size:8px;letter-spacing:.09em;color:#8a9aa3;font-weight:900;margin-bottom:4px}
.query-structure strong{display:block;font-size:10px;color:#233c49;word-break:break-word}
.dark-card{background:var(--navy);border-color:var(--navy);color:#fff}
.dark-card small{font-size:9px;color:#3fc9d4;font-weight:900}.dark-card h3{font-size:15px;margin:9px 0 0}.dark-card p{color:#8fb7c3}
.dark-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.dark-tags span{font-size:8px;padding:5px 7px;border-radius:999px;background:#173847;color:#a8cbd4}
.result-panel{margin-top:16px;overflow:hidden}
.result-head{
  min-height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;border-bottom:1px solid var(--line)
}
.result-head>div:first-child{display:flex;align-items:center;gap:8px}
.result-head strong{font-size:11px}.result-actions{display:flex;gap:5px}
.result-table-wrap{min-height:230px;max-height:430px;overflow:auto}
.result-empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8fa1ab;gap:5px}
.empty-glyph{font-size:28px;color:#bfd0d7}.result-empty strong{font-size:11px}.result-empty small{font-size:9px}
.result-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:10px}
.result-table th,.result-table td{
  padding:8px 10px;border-right:1px solid #edf2f4;border-bottom:1px solid #edf2f4;
  white-space:nowrap;text-align:left;max-width:380px;overflow:hidden;text-overflow:ellipsis
}
.result-table th{position:sticky;top:0;background:#f7fbfc;color:#506773;font-weight:900}
.null-value{color:#9aabb3;font-style:italic}
.dual-editor{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dual-editor .panel:first-child{border-radius:16px 0 0 16px}.dual-editor .panel:last-child{border-radius:0 16px 16px 0}
.dual-editor .panel{overflow:hidden;box-shadow:none}
.dual-editor .panel-head,.report-panel .panel-head{padding:10px 14px;border-bottom:1px solid var(--line)}
.dark-editor-panel{background:var(--navy-3);border-color:#163647}
.panel-head.dark{border-bottom-color:#274554;color:#d7f1f3}
.standalone-editor{
  min-height:420px;resize:vertical;border:0;border-radius:0;box-shadow:none;
  font:12px/1.8 Consolas,monospace;color:#152d39;background:#fff
}
.standalone-editor:focus{box-shadow:none}
.dark-editor{background:var(--navy-3);color:#e8fbfd}
.panel-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.dark-mini{background:#173645;border-color:#274b5c;color:#b9dae2}
.small-select{width:150px;height:30px}
.convert-control,.data-control{padding:14px 16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.convert-fields{display:flex;align-items:flex-end;gap:10px}.convert-fields label{min-width:180px}
.swap-badge{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#70838d;margin-bottom:3px}
.convert-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:16px}
.convert-side{display:flex;flex-direction:column;gap:14px}
.generator-panel{padding:16px}
.generator-fields{display:flex;align-items:flex-end;gap:12px}.generator-fields label{min-width:150px}.generator-fields .grow{flex:1}
.template-tabs{display:flex;gap:6px;margin:15px 0 12px}
.template-btn{height:30px;padding:0 11px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:9px;font-weight:900;color:#607581}
.template-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.analysis-layout{display:grid;grid-template-columns:1fr .75fr;gap:16px}
.analysis-layout>.panel{overflow:hidden}
.report-box{min-height:420px;padding:16px;background:#fbfdfe;font-size:11px;line-height:1.7;white-space:pre-wrap}
.report-section{padding:10px 0;border-bottom:1px solid #e9f0f3}.report-section:last-child{border:0}
.report-section span{display:block;font-size:8px;font-weight:900;letter-spacing:.1em;color:#95a5ad}
.report-section strong{display:block;margin-top:5px;font-size:10px;color:#2a4451}
.hidden{display:none!important}
.app-footer{
  max-width:1500px;margin:0 auto;padding:20px 34px;border-top:1px solid #dce9ee;
  display:flex;justify-content:space-between;align-items:center;gap:16px;background:#f8fcfd;color:#758893;font-size:10px
}
.app-footer strong{color:#263f4c;margin-right:8px}
.footer-pills{display:flex;gap:7px;flex-wrap:wrap}
.footer-pills span{padding:5px 8px;border:1px solid #dce7ec;border-radius:999px;background:#fff}
.toast{
  position:fixed;right:20px;bottom:20px;z-index:100;opacity:0;transform:translateY(15px);
  pointer-events:none;background:var(--navy);color:#fff;padding:10px 13px;border-radius:10px;
  font-size:10px;box-shadow:0 12px 28px rgba(4,28,41,.25);transition:.18s
}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1180px){
  .workspace-grid{grid-template-columns:270px minmax(0,1fr)}
  .insight-column{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .convert-layout{grid-template-columns:1fr}
  .convert-side{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}.sidebar{border-right:0;padding:16px 16px 0}
  .sidebar-title,.sidebar-note{display:none}.side-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .side-nav-btn{min-height:50px;grid-template-columns:22px 1fr;padding:7px 8px}.side-copy small,.chev{display:none}
  .main-content{padding:24px 16px 38px}.workspace-grid{grid-template-columns:1fr}
  .db-panel{order:1}.editor-panel{order:2}.insight-column{order:3;grid-template-columns:1fr 1fr}
  .page-title-row{flex-direction:column}.analysis-layout{grid-template-columns:1fr}
  .generator-fields{flex-wrap:wrap}.generator-fields .grow{flex-basis:100%}
}
@media(max-width:650px){
  .header-inner{padding:0 16px}.support-badge{display:none}
  .side-nav{grid-template-columns:1fr 1fr}.page-title-row h1{font-size:24px}
  .workspace-grid{gap:12px}.insight-column{grid-template-columns:1fr}
  .editor-tools{flex-wrap:wrap;justify-content:flex-end}
  .editor-bottom{align-items:flex-start;flex-direction:column}.run-area{width:100%;justify-content:space-between}
  .dual-editor{grid-template-columns:1fr;gap:12px}.dual-editor .panel{border-radius:16px!important}
  .convert-control,.data-control{align-items:stretch;flex-direction:column}
  .convert-fields{align-items:stretch;flex-direction:column}.swap-badge{display:none}.convert-fields label{min-width:0}
  .generator-fields{align-items:stretch;flex-direction:column}.generator-fields label{min-width:0}
  .app-footer{padding:18px 16px;align-items:flex-start;flex-direction:column}
}


.connection-string-box{
  margin-top:4px;padding:11px;border:1px solid var(--line);
  background:#f8fcfd;border-radius:11px
}
.connection-string-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:7px
}
.connection-string-head>div{display:flex;align-items:center;gap:7px}
.connection-string-head strong{font-size:10px;letter-spacing:.04em}
.connection-string-input{
  min-height:88px;resize:vertical;padding:10px;
  font:9.5px/1.55 Consolas,"SFMono-Regular",monospace;
  background:#fff;color:#19333f;word-break:break-all
}
.secondary-button{
  border:1px solid #b8dfe5;background:#eafafd;color:#126b75;
  border-radius:9px;height:36px;padding:0 12px;
  font-size:10px;font-weight:900;transition:.15s
}
.secondary-button:hover{background:#ddf6fa;border-color:#8fd5de}
.secondary-button:disabled{opacity:.5;cursor:not-allowed}
.secondary-button.full{width:100%;margin-top:7px}


.file-data-control{
  padding:14px 16px;
  margin-bottom:14px;
}
.data-top-controls{
  display:grid;
  grid-template-columns:145px minmax(160px,1fr) 145px auto auto;
  align-items:end;
  gap:10px;
}
.multi-insert-switch .switch-line{
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:#fff;
}
.multi-insert-switch .switch-line input{
  appearance:none;
  -webkit-appearance:none;
  width:31px;
  height:18px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#c8d4da;
  position:relative;
  cursor:pointer;
  transition:.18s;
}
.multi-insert-switch .switch-line input:before{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  top:2px;
  left:2px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:.18s;
}
.multi-insert-switch .switch-line input:checked{
  background:#123b4d;
}
.multi-insert-switch .switch-line input:checked:before{
  transform:translateX(13px);
}
.multi-insert-switch .switch-line span{
  margin:0!important;
  font-size:10px!important;
  letter-spacing:0!important;
  color:#233d4a!important;
  font-weight:850;
}
.secondary-action-button{
  height:38px;
  border:1px solid #cfe0e6;
  border-radius:10px;
  padding:0 13px;
  background:#f2fbfd;
  color:#274c5a;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.secondary-action-button:hover{
  background:#e6f8fb;
}
.secondary-action-button:disabled{
  opacity:.55;
  cursor:wait;
}
.button-symbol{
  font-size:14px;
  margin-right:4px;
}
.file-info-line{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
  color:#71858f;
}
#selectedFileName{
  font-weight:800;
  color:#385765;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-support{
  flex:0 0 auto;
}
.manual-data-row{
  margin-top:9px;
  display:flex;
  align-items:end;
  gap:10px;
}
.manual-data-row label{
  width:130px;
}
.manual-data-row span{
  padding-bottom:9px;
  font-size:9px;
  color:#8b9ba4;
}
.data-editors .standalone-editor{
  min-height:410px;
}
.editor-count{
  font-size:9px;
  color:#83949e;
}
.sql-output-actions{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
}
.dark-text-button{
  border:0;
  background:transparent;
  color:#c6e0e6;
  font-size:9px;
  font-weight:800;
  padding:4px 2px;
}
.dark-text-button:hover{
  color:#4ce5ef;
}
.data-info-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:12px;
}
.data-info-card{
  min-height:54px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.72);
}
.data-info-card strong{
  display:block;
  font-size:10px;
  color:#254351;
}
.data-info-card span{
  display:block;
  margin-top:5px;
  font-size:8.5px;
  color:#80919a;
}

@media(max-width:1050px){
  .data-top-controls{
    grid-template-columns:1fr 1fr 1fr;
  }
  .data-top-controls .secondary-action-button,
  .data-top-controls .run-button{
    width:100%;
  }
  .data-info-cards{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:650px){
  .data-top-controls{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .file-info-line{
    flex-direction:column;
  }
  .file-support{
    flex:initial;
  }
  .manual-data-row{
    align-items:stretch;
    flex-direction:column;
  }
  .manual-data-row label{
    width:100%;
  }
  .manual-data-row span{
    padding-bottom:0;
  }
  .data-info-cards{
    grid-template-columns:1fr;
  }
}


/* ===== v6 readability scale ===== */
/* 1366px급 화면에서도 글자가 작지 않도록 전체 가독성 확대 */

body{
  font-size:15px;
}

/* Header */
.app-header{
  height:76px;
}
.header-inner{
  padding:0 28px;
}
.brand-icon{
  width:44px;
  height:44px;
}
.brand-copy small{
  font-size:11px;
  margin-bottom:6px;
}
.brand-copy strong{
  font-size:19px;
}
.support-badge{
  font-size:12px;
  padding:6px 11px;
}
.version{
  font-size:12px;
}

/* Main layout */
.app-shell{
  grid-template-columns:245px minmax(0,1fr);
  min-height:calc(100vh - 76px);
}
.sidebar{
  padding-top:32px;
}
.sidebar-title{
  font-size:13px;
  padding-bottom:17px;
}
.side-nav-btn{
  min-height:66px;
  padding:10px 13px;
}
.side-icon{
  font-size:20px;
}
.side-copy strong{
  font-size:15px;
}
.side-copy small{
  font-size:11px;
  margin-top:5px;
}
.chev{
  font-size:22px;
}
.sidebar-note{
  padding:18px;
}
.sidebar-note strong{
  font-size:14px;
}
.sidebar-note p{
  font-size:12px;
  line-height:1.65;
}
.note-icon{
  width:32px;
  height:32px;
}

/* Main title */
.main-content{
  padding:34px 32px 44px;
}
.title-meta{
  font-size:12px;
  margin-bottom:10px;
}
.chip{
  height:26px;
  padding:0 10px;
}
.page-title-row h1{
  font-size:34px;
}
.page-title-row p{
  font-size:14px;
  margin-top:9px;
}
.segment{
  height:38px;
  padding:0 16px;
  font-size:13px;
}

/* DB / editor / insight layout */
.workspace-grid{
  grid-template-columns:315px minmax(0,1fr) 270px;
  gap:17px;
}
.db-panel{
  padding:17px;
}
.panel-head{
  min-height:46px;
}
.panel-head strong{
  font-size:13px;
}
.status-badge{
  font-size:12px;
  padding:6px 9px;
}
.panel-dot{
  width:7px;
  height:7px;
}

/* Labels / controls */
label>span{
  font-size:11px;
  margin-bottom:6px;
}
input, select{
  height:42px;
  padding:0 11px;
  font-size:14px;
}
.connection-form{
  gap:12px;
}
.two-inputs{
  grid-template-columns:96px 1fr;
  gap:9px;
}
.text-button{
  height:31px;
  top:5px;
  font-size:11px;
}
.inline-check{
  font-size:13px;
}
.inline-check span{
  font-size:12px!important;
}
.inline-check input{
  width:17px;
  height:17px;
}
.primary-button,
.run-button{
  height:42px;
  font-size:13px;
}
.mini-button{
  min-height:32px;
  font-size:11px;
  padding:0 10px;
}
.hint{
  font-size:12px;
  line-height:1.55;
}

/* Connection string */
.connection-string-head strong{
  font-size:12px;
}
.connection-string-input{
  min-height:100px;
  font-size:11px;
  line-height:1.6;
}
.secondary-button{
  height:39px;
  font-size:12px;
}

/* Table browser */
.table-item{
  padding:9px 10px;
  font-size:12px;
}
.table-type{
  font-size:9px;
}
.column-row{
  padding:8px 10px;
  font-size:11px;
}
.column-row strong{
  font-size:11px;
}
.empty-state{
  font-size:12px;
}

/* SQL editor */
.editor-panel .panel-head{
  padding:12px 14px;
}
.max-row span{
  font-size:10px;
}
.max-row input{
  width:72px;
  height:32px;
}
.editor-body{
  grid-template-columns:46px minmax(0,1fr);
  min-height:390px;
}
.code-gutter{
  padding:18px 11px;
  font-size:12px;
  line-height:28px;
}
#sqlEditor{
  min-height:390px;
  font-size:15px;
  line-height:28px;
  padding:17px 18px;
}
.editor-bottom{
  min-height:60px;
  padding:10px 13px;
}

/* Right insight cards */
.insight-card{
  padding:17px;
}
.insight-title strong{
  font-size:14px;
}
.round-icon{
  width:25px;
  height:25px;
  font-size:12px;
}
.insight-card p{
  font-size:12px;
  line-height:1.65;
}
.query-type{
  font-size:11px;
  padding:5px 8px;
}
.query-structure span{
  font-size:10px;
}
.query-structure strong{
  font-size:12px;
}
.dark-card small{
  font-size:11px;
}
.dark-card h3{
  font-size:17px;
}
.dark-tags span{
  font-size:10px;
  padding:6px 8px;
}

/* Result grid */
.result-head{
  min-height:58px;
  padding:0 16px;
}
.result-head strong{
  font-size:13px;
}
.result-table{
  font-size:12px;
}
.result-table th,
.result-table td{
  padding:10px 12px;
}
.result-empty strong{
  font-size:13px;
}
.result-empty small{
  font-size:11px;
}

/* Other tool pages */
.standalone-editor{
  font-size:14px;
  line-height:1.85;
}
.convert-fields label,
.generator-fields label{
  min-width:170px;
}
.template-btn{
  height:34px;
  padding:0 13px;
  font-size:11px;
}
.report-box{
  font-size:13px;
}
.report-section span{
  font-size:10px;
}
.report-section strong{
  font-size:12px;
}
.editor-count{
  font-size:11px;
}
.file-info-line,
.manual-data-row span{
  font-size:11px;
}
.data-info-card strong{
  font-size:12px;
}
.data-info-card span{
  font-size:10px;
}

/* Footer */
.app-footer{
  font-size:12px;
}

/* Safety danger state */
.round-icon.danger{
  border:1px solid #e87970;
  color:#c83d34;
  background:#fff2f1;
}

/* Responsive: 확대된 크기에 맞춰 조금 일찍 2열로 전환 */
@media(max-width:1280px){
  .workspace-grid{
    grid-template-columns:300px minmax(0,1fr);
  }
  .insight-column{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:900px){
  .app-header{
    height:70px;
  }
  .app-shell{
    min-height:calc(100vh - 70px);
  }
  .side-copy strong{
    font-size:14px;
  }
}

@media(max-width:650px){
  .page-title-row h1{
    font-size:28px;
  }
  .main-content{
    padding-left:14px;
    padding-right:14px;
  }
}


/* ===== v7 mobile layout final override ===== */
/* 반드시 CSS 파일의 가장 마지막에 위치해야 합니다. */

@media (max-width: 900px){

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    font-size:15px;
  }

  /* ---------- Header ---------- */
  .app-header{
    width:100%;
    height:82px;
  }

  .header-inner{
    width:100%;
    height:82px;
    padding:0 18px;
  }

  .brand{
    gap:11px;
  }

  .brand-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }

  .brand-copy small{
    font-size:10px;
    letter-spacing:.13em;
  }

  .brand-copy strong{
    font-size:18px;
  }

  .header-actions{
    margin-left:auto;
  }

  .support-badge{
    display:none;
  }

  .version{
    display:block;
    font-size:12px;
    color:#8ca0ac;
  }

  /* ---------- 전체 2열 해제 ---------- */
  .app-shell{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0;
  }

  /* ---------- Desktop sidebar -> Mobile horizontal menu ---------- */
  .sidebar{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border-right:0 !important;
    border-bottom:1px solid #dbe7ec;
    background:#fff;
    overflow:hidden;
  }

  .sidebar-title,
  .sidebar-note{
    display:none !important;
  }

  .side-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:0 8px;
  }

  .side-nav::-webkit-scrollbar{
    display:none;
  }

  .side-nav-btn{
    position:relative;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto !important;
    min-width:auto !important;
    min-height:64px !important;
    padding:0 15px !important;
    margin:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#65798a !important;
    white-space:nowrap;
  }

  .side-nav-btn:hover{
    background:#fff !important;
  }

  .side-nav-btn.active{
    color:#0d7280 !important;
    background:#fff !important;
  }

  .side-nav-btn.active::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:#20cbd8;
  }

  .side-icon{
    display:block !important;
    width:auto;
    color:#8098a8 !important;
    font-size:19px !important;
    line-height:1;
  }

  .side-nav-btn.active .side-icon{
    color:#0d8492 !important;
  }

  .side-copy{
    display:block;
  }

  .side-copy strong{
    display:block;
    font-size:14px !important;
    line-height:1;
    white-space:nowrap;
  }

  .side-copy small,
  .chev{
    display:none !important;
  }

  /* ---------- Main ---------- */
  .main-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:26px 16px 40px !important;
    margin:0 !important;
  }

  .tool-view{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .page-title-row{
    display:block !important;
    width:100%;
    margin-bottom:22px;
  }

  .page-title-row > div:first-child{
    width:100%;
  }

  .title-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:11px;
    margin-bottom:11px;
  }

  .page-title-row h1{
    width:100%;
    max-width:100%;
    font-size:30px !important;
    line-height:1.25 !important;
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  .page-title-row p{
    width:100%;
    max-width:100%;
    font-size:13px !important;
    line-height:1.65;
    word-break:keep-all;
  }

  .segmented{
    width:100%;
    margin-top:17px;
    justify-content:center;
  }

  .segment{
    flex:1 1 0;
    height:40px;
    padding:0 10px;
    font-size:12px;
  }

  /* ---------- DB page: 무조건 1열 ---------- */
  .workspace-grid{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:14px !important;
  }

  .db-panel,
  .editor-panel,
  .insight-column{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-column:auto !important;
  }

  .db-panel{
    order:1;
  }

  .editor-panel{
    order:2;
  }

  .insight-column{
    order:3;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .panel,
  .insight-card,
  .result-panel{
    max-width:100%;
    min-width:0;
  }

  /* ---------- DB form ---------- */
  .connection-form{
    width:100%;
  }

  .two-inputs{
    grid-template-columns:92px minmax(0,1fr) !important;
  }

  input,
  select,
  textarea{
    max-width:100%;
    min-width:0;
  }

  /* ---------- Connection string ---------- */
  .connection-string-input{
    width:100%;
    min-height:96px;
    word-break:break-all;
  }

  /* ---------- SQL editor ---------- */
  .editor-panel{
    overflow:hidden;
  }

  .editor-panel .panel-head{
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:13px;
  }

  .editor-tools{
    width:100%;
    display:flex !important;
    flex-wrap:wrap;
    justify-content:flex-start !important;
  }

  .max-row{
    margin-right:auto;
  }

  .editor-body{
    width:100%;
    min-width:0;
    grid-template-columns:40px minmax(0,1fr) !important;
    min-height:350px;
  }

  .code-gutter{
    font-size:10px !important;
    line-height:26px !important;
    padding-left:7px;
    padding-right:7px;
  }

  #sqlEditor{
    width:100%;
    min-width:0;
    min-height:350px;
    font-size:14px !important;
    line-height:26px !important;
    overflow:auto;
    white-space:pre;
  }

  .editor-bottom{
    display:flex;
    flex-direction:column;
    align-items:stretch !important;
    gap:12px;
  }

  .run-area{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:8px;
  }

  .run-area .hint{
    flex:1;
    min-width:0;
  }

  .run-button{
    flex:0 0 auto;
  }

  /* ---------- 분석 카드 ---------- */
  .insight-card{
    width:100%;
  }

  .query-structure{
    display:grid;
    grid-template-columns:1fr;
  }

  /* ---------- Result ---------- */
  .result-panel{
    width:100% !important;
    max-width:100% !important;
    margin-top:14px;
  }

  .result-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start !important;
    height:auto;
    min-height:0;
    padding:12px 13px;
  }

  .result-head > div:first-child{
    width:100%;
    flex-wrap:wrap;
  }

  .result-actions{
    width:100%;
    display:flex;
  }

  .result-actions .mini-button{
    flex:1;
  }

  .result-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* ---------- Other pages ---------- */
  .dual-editor,
  .analysis-layout,
  .convert-layout{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    gap:12px !important;
  }

  .dual-editor .panel,
  .analysis-layout .panel,
  .convert-layout .panel{
    width:100% !important;
    max-width:100% !important;
    border-radius:14px !important;
  }

  .convert-control,
  .data-control{
    width:100%;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .convert-fields,
  .generator-fields,
  .data-top-controls{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    gap:10px !important;
  }

  .convert-fields label,
  .generator-fields label,
  .data-top-controls label{
    width:100% !important;
    min-width:0 !important;
  }

  .swap-badge{
    display:none !important;
  }

  .generator-fields .grow{
    width:100%;
  }

  .standalone-editor{
    width:100%;
    min-height:340px;
    font-size:13px !important;
  }

  .data-info-cards{
    grid-template-columns:1fr !important;
  }

  .file-info-line{
    flex-direction:column;
  }

  /* ---------- Footer ---------- */
  .app-footer{
    width:100%;
    max-width:100%;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}


/* 더 작은 휴대폰 */
@media (max-width: 480px){

  .header-inner{
    padding:0 14px;
  }

  .brand-copy small{
    font-size:9px;
  }

  .brand-copy strong{
    font-size:17px;
  }

  .side-nav-btn{
    min-height:60px !important;
    padding:0 13px !important;
  }

  .side-copy strong{
    font-size:13px !important;
  }

  .side-icon{
    font-size:18px !important;
  }

  .main-content{
    padding:22px 13px 36px !important;
  }

  .page-title-row h1{
    font-size:27px !important;
  }

  .page-title-row p{
    font-size:12px !important;
  }

  .db-panel{
    padding:14px;
  }

  .two-inputs{
    grid-template-columns:82px minmax(0,1fr) !important;
  }

  input,
  select{
    font-size:13px;
  }

  .editor-tools .mini-button{
    flex:1 1 auto;
  }

  #sqlEditor{
    font-size:13px !important;
  }
}