/* ─────────────────────────────────────────────────────── */
/* 반응형 기초 — 미디어쿼리 + Touch/Prefers 변수 */
/* ─────────────────────────────────────────────────────── */
:root{
  --safe-top:0;--safe-bottom:0;--safe-left:0;--safe-right:0;
  --touch-target:44px;
  --mobile-nav-h:56px;
}
@supports (padding: max(0px)) {
  :root {
    --safe-top:env(safe-area-inset-top);
    --safe-bottom:env(safe-area-inset-bottom);
    --safe-left:env(safe-area-inset-left);
    --safe-right:env(safe-area-inset-right);
  }
}
@media (prefers-color-scheme:dark){
  body.auto-dark{--bg:#1A120B;--bg-card:#2A1F14;--bg-card-alt:#3D2B1F;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
@media (prefers-contrast:more){
  :root{--text:#000;--bg:#FFF;--border:#333;}
}

/* ─────────────────────────────────────────────────────── */
/* Mobile: ≤480px */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px){
  html{font-size:14px;}
  body{font-size:13px;overflow-y:auto;height:auto;}
  #app{height:auto;flex-direction:column;}
  input,textarea,select{font-size:16px;}
  *{-webkit-tap-highlight-color:transparent;}
  ::-webkit-scrollbar{width:4px;height:4px;}
  ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:2px;}
}

@media (max-width:480px){
  .title-bar{
    flex-wrap:wrap;height:auto;min-height:44px;padding:8px max(12px,var(--safe-left)) 8px max(12px,var(--safe-right));
    padding-top:max(8px,var(--safe-top));gap:8px;align-items:center;
  }
  .title-bar .logo{flex:0 0 auto;font-size:12px;}
  .title-bar .doc-name{flex:0 1 200px;font-size:12px;padding:2px 6px;}
  .title-bar .doc-name[data-hidden]{display:none;}
  .title-bar .doc-name[data-visible]{display:block;order:10;flex-basis:100%;}
  .title-bar .user-avatar{width:24px;height:24px;font-size:10px;}
  .title-bar .menu-toggle{flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
}

@media (max-width:480px){
  .ribbon{display:flex;flex-direction:column;}
  .ribbon-tabs{flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--border);gap:0;padding:0;}
  .ribbon-tab{flex:0 0 auto;border-radius:0;padding:8px 12px;font-size:11px;white-space:nowrap;}
  .ribbon-tab.active{border-bottom:2px solid var(--gold);margin:0;background:transparent;}
  .ribbon-panels{display:none;}
  .ribbon-panels.active{display:flex;flex-direction:column;background:var(--bg-card);border-top:1px solid var(--border);}
  .ribbon-panel{flex-direction:column;padding:8px;gap:8px;min-height:auto;}
  .ribbon-group{width:100%;border:none;border-bottom:1px solid var(--border-light);padding:8px;}
  .ribbon-group:last-child{border-bottom:none;}
  .ribbon-group-label{position:static;font-size:11px;font-weight:600;margin-bottom:4px;}
  .tb-btn{width:40px;height:40px;font-size:14px;}
  .tb-btn-lg{padding:8px 12px;font-size:12px;width:100%;justify-content:flex-start;flex-direction:row;}
  .tb-select{height:32px;width:100%;margin:4px 0;}
  .tb-select-sm{height:32px;width:100%;}
}

@media (max-width:480px){
  .app-tabs{flex-wrap:wrap;height:auto;overflow-x:auto;}
  .app-mode-tab{flex:1 1 auto;min-width:70px;padding:8px 12px;font-size:12px;}
  .main-area{flex-direction:column;}
  .editor-area{
    padding:8px max(8px,var(--safe-left)) 8px max(8px,var(--safe-right));
    padding-bottom:calc(8px + var(--mobile-nav-h));margin:0;background:#FFF8F0;
  }
  .sidebar{
    position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;max-height:calc(100vh - 200px);
    border-left:none;border-top:1px solid var(--border);border-radius:12px 12px 0 0;
    overflow-y:auto;display:none;z-index:100;background:var(--bg-card);
    padding:max(12px,var(--safe-left)) max(12px,var(--safe-right)) max(var(--mobile-nav-h),var(--safe-bottom));
  }
  .sidebar.open{display:block;}
  .status-bar{position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-h);border-top:1px solid var(--border);padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right));padding-bottom:var(--safe-bottom);}
  .status-bar .zoom-controls{display:none;}
  .mobile-nav{position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-h);background:var(--bg-card);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;z-index:99;padding-bottom:var(--safe-bottom);}
  .mobile-nav-btn{flex:1;height:var(--mobile-nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted);gap:2px;cursor:pointer;}
  .mobile-nav-btn.active{color:var(--gold);font-weight:600;}
}

@media (max-width:480px){
  .editor-wrapper{display:flex;flex-direction:column;}
  .editor-page{
    width:100%;min-height:calc(100vh - 120px);background:#FFF;margin:0;padding:12px;box-shadow:none;
    border:1px solid var(--border);border-radius:6px;
  }
  .editor-content{font-size:13px;line-height:1.5;}
  .editor-content h1{font-size:18pt;margin:12px 0 6px;}
  .editor-content h2{font-size:14pt;margin:10px 0 4px;}
  .editor-content h3{font-size:12pt;margin:8px 0 2px;}
  .editor-content p{margin:2px 0;}
  .editor-content ul,.editor-content ol{padding-left:16px;}
  .editor-table{font-size:11px;margin:8px 0;overflow-x:auto;}
  .editor-table td,.editor-table th{padding:4px;}
  .find-panel{
    position:fixed;top:0;left:0;right:0;bottom:auto;width:100%;border-radius:0;z-index:200;
    padding:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  .find-input{width:100%;flex:1;}
}

@media (max-width:480px){
  .sheet-wrapper{height:calc(100vh - 120px);}
  .formula-bar{flex-wrap:wrap;height:auto;min-height:32px;gap:2px;padding:4px;}
  .cell-ref{width:auto;min-width:40px;font-size:11px;padding:2px 4px;border-right:none;}
  .formula-input{font-size:11px;padding:4px;}
  .sheet-grid{position:relative;}
  .col-header{font-size:10px;padding:2px;min-width:50px;height:24px;}
  .row-header{min-width:30px;font-size:10px;}
  .sheet-cell{min-width:50px;height:24px;padding:0 2px;font-size:11px;}
  .sheet-cell.selected{outline:2px solid var(--info);background:rgba(66,133,244,.1);}
  .sheet-tabs{overflow-x:auto;height:24px;}
  .sheet-tab{padding:2px 8px;font-size:10px;}
  .chart-container{max-width:calc(100vw - 20px);max-height:200px;}
}

@media (max-width:480px){
  .slide-wrapper{flex-direction:column;}
  .slide-list-panel{width:100%;height:auto;max-height:120px;border:none;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;display:flex;gap:4px;}
  .slide-thumb{width:100px;height:auto;aspect-ratio:16/9;flex-shrink:0;margin-bottom:0;}
  .slide-thumb-num{font-size:9px;}
  .slide-canvas-area{
    padding:8px;flex-direction:column;justify-content:flex-start;padding-bottom:calc(8px + var(--mobile-nav-h));
  }
  .slide-canvas{
    width:calc(100vw - 16px);aspect-ratio:16/9;max-height:calc(100vh - 180px - var(--mobile-nav-h));
  }
  .slide-notes-panel{display:none;}
  .slide-notes-panel.mobile-expanded{display:block;height:auto;max-height:200px;}
}

@media (max-width:480px){
  .modal-overlay{padding:12px;}
  .dialog{
    width:100%;min-width:auto;max-width:100%;min-height:auto;
    border-radius:12px 12px 0 0;margin:0;max-height:calc(100vh - 120px);overflow-y:auto;
  }
  .dialog-header{padding:12px 16px max(12px,var(--safe-right));}
  .dialog-body{padding:12px 16px;}
  .dialog-footer{flex-wrap:wrap;gap:4px;padding:8px 16px max(12px,var(--safe-bottom));}
  .confirm-dialog{width:100%;max-width:calc(100% - 24px);}
  .context-menu{
    width:calc(100% - 24px);max-height:50vh;overflow-y:auto;left:12px!important;right:12px!important;top:auto!important;
  }
}

@media (max-width:480px){
  .file-manager{padding:8px;padding-top:calc(8px + var(--safe-top));padding-bottom:calc(8px + var(--mobile-nav-h));max-width:100%;margin:0;}
  .fm-header{flex-direction:column;gap:8px;margin-bottom:12px;}
  .fm-header h2{font-size:18px;}
  .fm-search{width:100%;font-size:13px;}
  .fm-new-btns{flex-wrap:wrap;gap:4px;margin-bottom:12px;}
  .fm-new-btn{width:calc(50% - 2px);height:80px;font-size:12px;}
  .fm-new-btn .icon{font-size:24px;}
  .fm-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .fm-card{padding:8px;}
  .fm-card .fm-icon{font-size:28px;margin-bottom:4px;}
  .fm-card .fm-name{font-size:12px;}
  .fm-card .fm-date{font-size:10px;}
}

@media (hover:none) and (pointer:coarse){
  button,a,.tb-btn,.fm-card,.cm-item{min-height:var(--touch-target);min-width:var(--touch-target);}
  a:hover,button:hover,.tb-btn:hover{background-color:var(--bg-card-alt);}
  input,textarea,select{padding:8px 12px;min-height:44px;}
  .tb-btn{width:44px;height:44px;}
  .ribbon-group{padding:8px;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);}
}
@media (hover:hover) and (pointer:fine){
  button:hover,a:hover{opacity:.8;}
}

/* ─────────────────────────────────────────────────────── */
/* Tablet: 481px - 1024px */
/* ─────────────────────────────────────────────────────── */
@media (min-width:481px) and (max-width:1024px){
  html{font-size:15px;}
  .title-bar{height:40px;padding:0 12px;gap:8px;}
  .title-bar .logo{font-size:13px;}
  .title-bar .doc-name{flex:1;max-width:300px;}
  .title-bar .user-avatar{width:28px;height:28px;}
  .ribbon-tabs{padding:0 4px;}
  .ribbon-tab{padding:4px 12px;font-size:12px;}
  .ribbon-panel{min-height:56px;padding:4px;}
  .ribbon-group{padding:4px 6px;gap:2px;}
  .ribbon-group-label{font-size:10px;}
  .app-tabs{height:32px;}
  .app-mode-tab{padding:6px 14px;}
  .editor-area{padding:16px;width:90%;}
  .editor-page{width:100%;}
  .editor-content{font-size:11pt;}
  .editor-table{font-size:12px;}
  .sidebar{
    position:fixed;top:140px;right:0;height:calc(100vh - 140px - 24px);width:240px;z-index:50;
    display:block;border-left:1px solid var(--border);
  }
  .main-area{margin-right:0;}
  .sheet-grid{}
  .col-header{font-size:11px;}
  .sheet-cell{min-width:80px;font-size:12px;}
  .slide-list-panel{width:140px;}
  .slide-canvas-area{padding:16px;}
  .fm-grid{grid-template-columns:repeat(2,1fr);}
  .dialog{min-width:450px;max-width:550px;}
}

/* ─────────────────────────────────────────────────────── */
/* Desktop HD: 1025px - 1440px (표준 레이아웃) */
/* ─────────────────────────────────────────────────────── */
@media (min-width:1025px) and (max-width:1440px){
  html{font-size:16px;}
  body{overflow:hidden;}
  .editor-area{padding:20px;}
  .editor-page{width:210mm;}
  .sidebar{display:block;width:260px;}
  .sheet-table{min-width:1200px;}
  .fm-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}

/* ─────────────────────────────────────────────────────── */
/* Ultra-wide: 1441px+ (4K/멀티모니터) */
/* ─────────────────────────────────────────────────────── */
@media (min-width:1441px){
  html{font-size:17px;}
  .editor-area{
    padding:20px;justify-content:center;background:linear-gradient(90deg,var(--bg-card) 0%,#e8e0d8 20%,#e8e0d8 80%,var(--bg-card) 100%);
  }
  .editor-page{width:210mm;max-width:1000px;}
  .sidebar{display:block;width:280px;}
  .main-area{gap:12px;}
  .sheet-grid{min-width:1600px;}
  .sheet-table td,.sheet-table th{min-width:100px;}
  .fm-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
  .slide-canvas-area{padding:24px;}
}

/* ─────────────────────────────────────────────────────── */
/* Print Media */
/* ─────────────────────────────────────────────────────── */
@media print{
  body{background:#fff;height:auto;overflow:visible;}
  #app{height:auto;}
  .title-bar,.ribbon,.app-tabs,.status-bar,.sidebar,.mobile-nav,.find-panel{display:none!important;}
  .editor-area{
    background:#fff!important;padding:0!important;margin:0;width:100%;display:block;
  }
  .editor-page{
    width:100%!important;margin:0!important;padding:0!important;box-shadow:none!important;
    page-break-after:avoid;page-break-inside:avoid;background:#fff;
  }
  .editor-content{line-height:1.6;}
  .page-break{page-break-before:always;border:none!important;margin:0;}
  .editor-table{width:100%;margin:0;page-break-inside:avoid;}
  .sheet-grid{overflow:visible;}
  .sheet-table{width:100%;}
  .col-header,.row-header{display:none;}
  .slide-canvas{page-break-after:always;page-break-inside:avoid;}
  .comment-highlight,.track-insert,.track-delete{background:transparent;border:none;color:#000;}
  a{color:#000;text-decoration:none;}
  img{max-width:100%;page-break-inside:avoid;}
}

/* ─────────────────────────────────────────────────────── */
/* Dark Mode 반응형 조정 */
/* ─────────────────────────────────────────────────────── */
[data-theme=dark]{
  --bg:#0F0A08;--bg-card:#1A120B;--bg-card-alt:#2A1F14;
}
@media (max-width:480px){
  [data-theme=dark] .editor-area{background:#0F0A08;}
  [data-theme=dark] .editor-page{background:#1A120B;border-color:rgba(255,255,255,.1);}
  [data-theme=dark] .ribbon-tab.active{border-bottom-color:#C9A84C;}
}
@media (max-width:1024px){
  [data-theme=dark] .mobile-nav{background:var(--bg-card);}
  [data-theme=dark] .sidebar{background:var(--bg-card);}
}

/* ─────────────────────────────────────────────────────── */
/* 접근성 (Accessibility) */
/* ─────────────────────────────────────────────────────── */
:focus-visible{
  outline:2px solid var(--info);outline-offset:2px;
}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
@media (prefers-contrast:more){
  :root{
    --text:#000!important;--bg:#FFF!important;--border:#000!important;--primary:#000;
  }
  button,input,textarea,select{border:2px solid #000!important;}
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;--text:#E8D5C4;--bg:#1A120B;--border:#4A3828;
  }
}

/* ─────────────────────────────────────────────────────── */
/* Orientation (가로/세로) */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px) and (orientation:landscape){
  .title-bar{height:32px;}
  .ribbon{height:auto;overflow-x:auto;}
  .ribbon-panel{min-height:32px;}
  .editor-area{padding:8px;height:calc(100vh - 96px);}
  .editor-page{min-height:auto;}
  .status-bar{height:28px;}
}
@media (481px <= width <= 1024px) and (orientation:portrait){
  .sidebar{position:fixed;top:140px;width:200px;}
  .editor-area{flex:1;width:calc(100% - 200px);}
}
@media (481px <= width <= 1024px) and (orientation:landscape){
  .sidebar{position:fixed;right:0;width:200px;height:calc(100vh - 140px);}
  .editor-area{width:calc(100% - 200px);}
}

/* ─────────────────────────────────────────────────────── */
/* 폰트 스케일링 (rem 기반) */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px){
  body{font-size:0.875rem;}
  h1{font-size:1.75rem;}
  h2{font-size:1.5rem;}
  h3{font-size:1.25rem;}
  button,input,select,textarea{font-size:1rem;}
}
@media (481px) and (max-width:1024px){
  body{font-size:0.9375rem;}
  h1{font-size:2rem;}
  h2{font-size:1.625rem;}
  h3{font-size:1.375rem;}
}
@media (min-width:1441px){
  body{font-size:1.0625rem;}
  h1{font-size:2.5rem;}
  h2{font-size:2rem;}
  h3{font-size:1.75rem;}
}

/* ─────────────────────────────────────────────────────── */
/* Safe Area (노치, 아일랜드 대응) */
/* ─────────────────────────────────────────────────────── */
@supports (padding: max(0px)){
  .title-bar{
    padding-left:max(12px,var(--safe-left));
    padding-right:max(12px,var(--safe-right));
    padding-top:max(8px,var(--safe-top));
  }
  .status-bar{
    padding-left:max(12px,var(--safe-left));
    padding-right:max(12px,var(--safe-right));
    padding-bottom:max(4px,var(--safe-bottom));
  }
  .mobile-nav{
    padding-left:max(8px,var(--safe-left));
    padding-right:max(8px,var(--safe-right));
    padding-bottom:max(8px,var(--safe-bottom));
  }
  .sidebar{
    padding-left:max(8px,var(--safe-left));
    padding-right:max(8px,var(--safe-right));
  }
}

/* ─────────────────────────────────────────────────────── */
/* 터치 제스처 (CSS 힌트) */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px){
  .slide-canvas-area{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  .slide-thumb{-webkit-user-select:none;user-select:none;}
  *{-webkit-user-select:text;user-select:text;}
  input,textarea,button{-webkit-user-select:none;user-select:none;}
  ::selection{background:rgba(201,168,76,.4);}
  ::-webkit-selection{background:rgba(201,168,76,.4);}
}
.editor-content::selection{background:rgba(201,168,76,.4);color:inherit;}
.editor-content ::-webkit-selection{background:rgba(201,168,76,.4);color:inherit;}

/* ─────────────────────────────────────────────────────── */
/* 반응형 스크롤바 */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px) and (hover:none){
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);border-radius:4px;}
  ::-webkit-scrollbar-track{background:transparent;}
}
@media (481px) and (max-width:1024px){
  ::-webkit-scrollbar{width:6px;height:6px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
}
@media (min-width:1025px){
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;transition:.2s;}
  ::-webkit-scrollbar-thumb:hover{background:var(--text-sec);}
}

/* ─────────────────────────────────────────────────────── */
/* 시트 그리드 표시 최적화 */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px){
  .sheet-grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sheet-table{min-width:500px;}
  .col-header{position:sticky;top:0;z-index:3;}
  .row-header{position:sticky;left:0;z-index:2;}
}
@media (481px) and (max-width:1024px){
  .sheet-grid{overflow-x:auto;}
  .sheet-table{min-width:1000px;}
  .col-header{position:sticky;top:0;z-index:3;}
  .row-header{position:sticky;left:0;z-index:2;}
}
@media (min-width:1025px){
  .sheet-grid{overflow:auto;}
  .col-header{position:sticky;top:0;z-index:3;}
  .row-header{position:sticky;left:0;z-index:2;}
}

/* ─────────────────────────────────────────────────────── */
/* 터치 최적화 버튼 크기 */
/* ─────────────────────────────────────────────────────── */
@media (max-width:480px){
  button,.tb-btn{min-height:44px;min-width:44px;}
  .btn-primary,.btn-cancel{padding:10px 16px;min-height:44px;}
  .tb-btn{width:40px;height:40px;}
  input[type=range]{height:44px;-webkit-appearance:none;width:100%;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--gold);cursor:pointer;}
  input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--gold);cursor:pointer;border:none;}
}

/* ─────────────────────────────────────────────────────── */
/* 이미지 반응형 */
/* ─────────────────────────────────────────────────────── */
img{max-width:100%;height:auto;}
.img-wrapper{max-width:100%;}
@media (max-width:480px){
  img{max-width:calc(100vw - 24px);}
}
@media (481px) and (max-width:1024px){
  img{max-width:90%;}
}

/* ─────────────────────────────────────────────────────── */
/* 추가 유틸리티 & 최적화 */
/* ─────────────────────────────────────────────────────── */
.no-scroll{overflow:hidden;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.hidden-mobile{display:none;}
@media (min-width:1025px){.hidden-mobile{display:block;}}
.hidden-tablet{display:block;}
@media (max-width:1024px){.hidden-tablet{display:none;}}
.hidden-desktop{display:block;}
@media (min-width:1025px){.hidden-desktop{display:none;}}
.visible-mobile{display:block;}
@media (min-width:1025px){.visible-mobile{display:none;}}
.visible-tablet{display:none;}
@media (481px) and (max-width:1024px){.visible-tablet{display:block;}}
.visible-desktop{display:none;}
@media (min-width:1025px){.visible-desktop{display:block;}}
/* 끝 */