/* =====================================================================
   mobile.css – 모바일·태블릿 최적화 (2026.10.14 고객 수정의견 12~14장)
   · 다른 스타일시트 뒤에 로드되어 모바일 폭에서의 규칙을 한곳에서 덮어씀
   · 기준: 900px 이하(태블릿) / 700px 이하(모바일) / 420px 이하(소형)
   ===================================================================== */

/* 공통 보정: 그리드/플렉스 자식이 내용 폭 때문에 화면 밖으로 밀려나지 않도록 */
.ar-layout>div,.da-detail-left,.da-detail-right,.db-box,.iw-content,.in-card{min-width:0}
.menu-toggle{display:none}

/* ---------- 태블릿 ---------- */
@media(max-width:900px){
  .gnb a{padding:0 14px;font-size:16px}.gnb a::after{left:14px;right:14px}
  .db-hero-left h1{font-size:24px}
}

/* ---------- 모바일 ---------- */
@media(max-width:700px){
  html{font-size:14px}
  body{font-size:14px}
  .header-inner,.footer-inner,.da-main,.da-breadcrumb{width:calc(100% - 32px)}

  /* 헤더: 로고 축소 + 우측 전체 메뉴 버튼, 메뉴는 펼침 패널 */
  .site-header{position:sticky;top:0}
  .header-inner{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;padding:0}
  .brand-ci img{height:30px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;background:none;border-radius:8px;color:#1c222b}
  .menu-toggle:hover{background:#f3f5f8}
  .menu-toggle .bars{display:flex;flex-direction:column;gap:5px;width:22px}
  .menu-toggle .bars i{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .18s,opacity .18s}
  body.menu-open .menu-toggle .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .menu-toggle .bars i:nth-child(2){opacity:0}
  body.menu-open .menu-toggle .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .gnb{display:none;position:absolute;left:0;right:0;top:100%;margin:0;width:100%;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(20,30,50,.12);overflow:visible;padding:6px 0 8px;z-index:60}
  body.menu-open .gnb{display:flex}
  .gnb a{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 20px;font-size:16px;font-weight:600;border-top:1px solid var(--line-soft)}
  .gnb a:first-child{border-top:0}
  .gnb a::after{display:none}
  .gnb a.on{color:var(--accent);background:#f3f7ff}
  .gnb a.on::before{content:"";width:3px;height:18px;background:var(--accent);border-radius:1px;margin-right:12px;order:-1}

  /* 현재 위치(브레드크럼): 모바일에서는 숨겨 상단 탐색 요소를 줄임 */
  .crumb-bar{display:none}
  .da-main{padding-top:20px;padding-bottom:48px;min-height:0}
  .ar-head h1,.insight-scope .iw-head h1,.da-detail-title h1{font-size:23px;letter-spacing:-.8px}
  .ar-head p,.insight-scope .iw-head-bottom p{font-size:14px}

  /* 공통 검색 UI(.ar-search): 선택 박스 → 입력창 → 버튼 순으로 세로 배치, 입력 영역 폭 확보 */
  .ar-search{flex-wrap:wrap;gap:8px;padding:10px}
  .ar-search .sel{flex:1 1 calc(50% - 4px);width:auto;min-width:0}
  .ar-search select{width:100%;height:40px;font-size:14px;padding:0 32px 0 12px}
  .ar-search .field{flex:1 1 100%;height:42px;padding:0 12px}
  .ar-search input{font-size:15px}
  .ar-search .ar-btn{flex:1 1 auto;height:40px;font-size:15px}
  .ar-search .ar-reset{flex:none;height:40px;padding:0 10px}
  .ar-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .ar-help{margin-top:0;height:30px;font-size:13px}
  .board-search .sel{flex:1 1 calc(50% - 4px)}

  /* 대시보드 */
  .db-hero{padding:18px 16px 18px;border-radius:12px;margin-bottom:20px}
  .db-hero-top{grid-template-columns:1fr;gap:10px}
  .db-hero-deco{display:none}
  .db-hero-label{font-size:12px;gap:8px;margin-bottom:6px}
  .db-hero-left h1{font-size:21px;letter-spacing:-.8px;margin-bottom:4px}
  .db-hero-left p{font-size:14px;line-height:1.55}
  .db-hero-right{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .db-hero-btn{height:36px;padding:0 14px;gap:12px;font-size:14px}
  .db-hero-chart-wrap{margin-top:10px}
  .db-hero-chart-head{margin-left:0}
  .db-hero-chart-head span{font-size:15px}
  .db-hero .db-hero-chart.in-mini{padding:0}
  .db-hero-chart .chart-legend{position:static;margin:4px 0 8px;font-size:13px}
  /* 차트: 모바일에서는 항목명을 막대 위에 두어 막대가 전체 폭을 쓰도록 (수정의견 14장) */
  .db-hero .db-hero-chart.in-mini .bar-row{grid-template-columns:1fr;gap:3px}
  .db-hero .db-hero-chart.in-mini .bar-label{font-size:13px;white-space:normal;overflow:visible}
  .db-hero .db-hero-chart.in-mini .bar-mark{height:12px}
  .db-hero-chart .bar-mark b{font-size:13px}
  .db-hero .db-hero-chart.in-mini .bar-axis{margin:8px 36px 0 0;font-size:12px}
  .db-hero .db-hero-chart.in-mini .donut-wrap{flex-direction:column;gap:12px}
  .db-hero-chart .donut-ring{width:140px;height:140px}
  .db-hero-chart .donut-list{width:100%;max-width:none}
  .db-hero-search{margin-top:14px}
  .db-search{flex-direction:column;gap:8px}
  .db-search .field{height:44px;padding:0 14px}
  .db-search input{font-size:15px}
  .db-search .ar-btn{height:42px;font-size:15px;width:100%}
  .db-keywords button{height:26px;font-size:12px;padding:0 10px}
  .db-row{grid-template-columns:1fr;gap:16px}
  .db-box{padding:14px 14px 16px}
  #view-dashboard .sec-h{font-size:17px}
  .db-box-recent{height:auto;min-height:0}
  .db-recent-scroll{position:static;max-height:330px;overflow-y:auto;overflow-x:hidden}
  .db-recent-scroll .ar-tbl-wrap{position:static;overflow:visible}
  .db-recent-tbl .c-type{display:none}
  .db-recent-tbl .c-date{width:84px;font-size:13px;padding-right:4px}
  .db-recent-tbl th,.db-recent-tbl td{padding:8px 6px;font-size:14px}
  .db-recent-tbl th.c-title{text-align:left}
  .db-kpis{gap:6px}
  .db-kpi span{font-size:13px;letter-spacing:-.6px}
  .db-kpi b{font-size:24px}
  .db-latest{font-size:14px;margin:12px 0}

  /* 데이터 아카이브 목록 */
  .ar-layout{grid-template-columns:1fr;gap:16px}
  .ar-side{grid-template-columns:1fr;gap:10px}
  .ar-box{padding:12px 12px 10px}
  .ar-opts{display:flex;flex-wrap:wrap;gap:6px}
  .ar-opt{width:auto;height:32px;padding:0 8px 0 10px;font-size:13px;gap:6px}
  .ar-opt .n{width:20px;height:20px;font-size:12px}
  .ar-banner{flex-direction:row;gap:14px;padding:14px;margin-bottom:14px}
  .ar-cover{width:72px;height:98px}
  .ar-cover.css{padding:9px 7px 0}.ar-cover.css .t1,.ar-cover.css .t2{font-size:9px}
  .ar-banner h2{font-size:16px;margin-bottom:6px}
  .ar-banner .meta{gap:10px;font-size:13px}
  .ar-banner .desc{font-size:13px;line-height:1.6}
  .ar-globe{display:none}
  .ar-top{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .ar-top .sum{font-size:14px}
  .ar-sort select{min-width:0;height:30px;font-size:13px;padding:0 28px 0 10px}
  .ar-group-head h2{font-size:17px}.ar-group-desc{font-size:13px}
  /* 목록 테이블 → 행 카드 형태 (가로 스크롤 없이 한 줄에 조사명, 아래 줄에 시기·연구책임자·버튼) */
  #groups .ar-tbl-wrap{overflow:visible;border-bottom:1px solid var(--line)}
  #groups .ar-tbl{min-width:0;display:block}
  #groups .ar-tbl thead{display:none}
  #groups .ar-tbl tbody{display:block}
  #groups .ar-tbl tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"type type type" "title title title" "date who act";gap:4px 6px;align-items:center;padding:12px 2px;border-top:1px solid var(--line-soft)}
  #groups .ar-tbl tbody tr:first-child{border-top:0}
  #groups .ar-tbl td{display:block;padding:0;border:0;width:auto;text-align:left;font-size:14px}
  #groups .ar-tbl td.c-type{grid-area:type}
  #groups .ar-tbl td.c-type[hidden]{display:none!important}
  #groups .ar-tbl tr:has(td.c-type[hidden]){grid-template-areas:"title title title" "date who act"}
  #groups .ar-tbl .ar-tag{min-width:0;font-size:12px;padding:1px 6px}
  #groups .ar-tbl td.c-title{grid-area:title}
  #groups .ar-tbl .title{font-size:15px;line-height:1.4;gap:6px}
  #groups .ar-tbl .ar-status{font-size:12px;padding:1px 6px}
  #groups .ar-tbl td.c-date,#groups .ar-tbl td.c-who{font-size:13px;color:#6a7380;white-space:normal}
  #groups .ar-tbl td.c-date{grid-area:date;white-space:nowrap}#groups .ar-tbl td.c-who{grid-area:who}
  #groups .ar-tbl td.c-date::before{content:"조사 시기 ";color:#8a919c}
  #groups .ar-tbl td.c-who::before{content:"· ";color:#b9bec6}
  #groups .ar-tbl td.c-act{grid-area:act;justify-self:end}
  #groups .ar-mini{height:28px;padding:0 10px;font-size:13px}
  .ar-more{font-size:14px;padding:8px}
  .ar-pager{margin-top:18px;gap:4px}.ar-pager button{min-width:28px;height:28px;font-size:13px}
  .ar-empty{padding:40px 16px;font-size:14px}

  /* 조사 상세 */
  .da-back{font-size:14px;margin-bottom:14px}
  .da-detail-title{padding:16px;margin-bottom:16px;border-radius:10px}
  .da-detail-title h1{font-size:21px;margin:8px 0 12px}
  .da-detail-meta{font-size:14px;gap:6px 16px}
  .da-detail-layout{grid-template-columns:1fr;gap:16px}
  .da-panel{padding:16px;margin-bottom:14px;border-radius:10px}
  .da-panel h2,.da-download h2{font-size:18px;margin-bottom:12px}
  .da-panel p{font-size:14px;line-height:1.7}
  .da-info-table{grid-template-columns:84px minmax(0,1fr);font-size:14px}
  .da-info-table dt,.da-info-table dd{padding:10px 8px}
  .da-topics{grid-template-columns:1fr;gap:8px}.da-topic{font-size:14px}
  .da-qlist li{grid-template-columns:36px 1fr;font-size:14px;gap:8px}
  .cite-row{grid-template-columns:52px 1fr;gap:6px}.cite-row span{font-size:14px}.cite-row .da-copy{grid-column:2;justify-self:start;font-size:13px}
  .da-citation{padding:12px;font-size:14px}
  .pub-tbl{min-width:0}.pub-tbl .c-auth,.pub-tbl th.c-auth{display:none}.pub-tbl .c-year{width:70px}.pub-tbl .c-act{width:92px}
  .pub-tbl td,.pub-tbl th{padding:8px 6px;font-size:13px}
  .da-download{padding:16px;border-radius:10px}
  .da-download>p{font-size:14px}
  .da-file{padding:12px 0}.da-file-main strong{font-size:14px}.da-file-name,.da-file-size,.da-pending-status{font-size:13px}
  .da-btn{font-size:15px;min-height:44px;padding:10px 16px}
  .da-support{padding:16px}
  .da-bottom-nav{margin-top:20px}

  /* 이용 신청 팝업 */
  .da-modal{width:calc(100% - 24px);max-height:92vh;border-radius:12px}
  .da-modal-head{padding:16px 18px 14px}.da-modal-head h2{font-size:18px}
  .da-modal-body{padding:16px 18px}.da-modal-body h3{font-size:15px;margin:18px 0 10px}
  .da-agreement{height:150px;font-size:14px;padding:12px}
  .da-modal .da-checkline{font-size:14px}
  .da-form-grid{grid-template-columns:1fr;gap:10px}.da-form-grid .wide{grid-column:1}
  .da-form-grid select,.da-form-grid input,.da-form-grid textarea{font-size:15px}
  .da-modal-actions{flex-direction:column-reverse;gap:8px}.da-modal-actions .da-btn{width:100%}
  .guide-steps li span{font-size:14px}

  /* 데이터 인사이트 */
  .insight-scope .iw-head{margin-bottom:14px}
  .insight-scope .iw-categories{grid-template-columns:repeat(3,1fr);gap:3px}
  .insight-scope .iw-category{height:34px;font-size:13px;padding:0 4px}
  .insight-scope .iw-dash-grid{gap:14px}
  .insight-scope .in-card{padding:14px}
  .insight-scope .in-head{flex-wrap:wrap;gap:8px}.insight-scope .in-title{font-size:16px;flex-basis:100%;order:3}
  .insight-scope .in-period{font-size:13px}
  .insight-scope .in-chart-title{font-size:14px;padding:6px 10px 6px 6px}.insight-scope .in-chart-title .ic{width:26px;height:26px}
  .insight-scope .in-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .insight-scope .in-mini{padding:12px 10px;min-height:0}
  .insight-scope .in-mini .bar-row{grid-template-columns:1fr;gap:3px}
  .insight-scope .in-mini .bar-label{font-size:13px}
  .insight-scope .in-mini .bar-axis{margin:10px 36px 0 0;font-size:12px}
  .insight-scope .in-mini .donut-wrap{flex-direction:column;gap:12px;min-height:0}
  .insight-scope .in-mini .donut-list{width:100%;max-width:none}
  .insight-scope .in-more{height:36px;font-size:14px}
  .insight-scope .iw-back{font-size:14px;margin-bottom:12px}
  .insight-scope .iw-detail-head{padding-bottom:14px;margin-bottom:14px;display:block}
  .insight-scope .iw-detail-head h1{font-size:21px;margin-top:8px}
  .insight-scope .iw-detail-head p{font-size:14px;margin-top:6px}
  .insight-scope .iw-count{display:none}
  .insight-scope .iw-detail-grid{display:block}
  .insight-scope .iw-indicator-nav{margin-bottom:14px;border-radius:10px}
  .insight-scope .iw-indicator-nav h2{padding:12px 14px;font-size:15px}
  .insight-scope #iw-indicators{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
  .insight-scope .iw-indicator{width:auto;border:1px solid #d6dde9!important;border-radius:4px;padding:7px 10px;font-size:13px;line-height:1.4;box-shadow:none}
  .insight-scope .iw-indicator[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)!important;box-shadow:none}
  .insight-scope .iw-indicator small{display:none}
  .insight-scope .iw-other-topics{display:none}
  .insight-scope .iw-chart-panel,.insight-scope .iw-table-panel{padding:14px;border-radius:10px}
  .insight-scope .iw-chart-top{margin-bottom:12px}.insight-scope .iw-chart-top h2{font-size:17px}
  .insight-scope .iw-filters{padding:10px 12px;gap:8px 12px;font-size:14px;margin-bottom:14px}
  .insight-scope .iw-range input[type=month]{width:100%}
  .insight-scope .chart-legend{font-size:13px;gap:6px 12px;margin-bottom:12px}
  .insight-scope .bar-rows{gap:12px}
  .insight-scope .bar-row{grid-template-columns:1fr;gap:4px}
  .insight-scope .bar-label{font-size:13px;line-height:1.4}
  .insight-scope .bar-grid{margin-right:40px}
  .insight-scope .bar-mark{height:12px}.insight-scope .bar-mark b{font-size:13px;line-height:12px}
  .insight-scope .bar-mark.lollipop b{top:-5px}
  .insight-scope .bar-axis{margin:10px 40px 0 0;font-size:12px}
  .insight-scope .donut-wrap{flex-direction:column;gap:16px;min-height:0}
  .insight-scope .donut-ring{width:150px;height:150px}.insight-scope .donut-ring:after{inset:24px}
  .insight-scope .donut-list{max-width:none;width:100%;gap:8px;font-size:14px}
  .insight-scope .stack-row{grid-template-columns:64px minmax(0,1fr);gap:8px;font-size:13px}
  .insight-scope .stack-track{height:32px}.insight-scope .stack-track span{font-size:13px}
  .insight-scope .matrix{grid-template-columns:44px repeat(3,1fr);gap:4px;font-size:13px}
  .insight-scope .matrix .cell{font-size:18px;padding:22px 4px}
  .insight-scope .iw-chart-bottom{flex-direction:column;align-items:flex-start;gap:10px;font-size:13px}
  .insight-scope .iw-downloads{width:100%}.insight-scope .iw-downloads button{flex:1;padding:9px 8px;font-size:13px}
  .insight-scope .iw-table-panel h2{font-size:17px;margin-bottom:12px}
  .insight-scope .iw-data-table{font-size:13px}
  .insight-scope .iw-data-table th,.insight-scope .iw-data-table td{padding:9px 8px}
  .insight-scope .iw-data-table th:first-child{min-width:150px}
  .insight-scope .iw-source{font-size:13px;line-height:1.8;padding-top:14px}
  .insight-scope .iw-related{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;font-size:14px}
  .insight-scope .iw-related button{width:100%}

  /* 문의 */
  #inquiry-design .sec-h{font-size:17px}
  .faq-q{padding:10px 10px;font-size:14px;min-height:42px;gap:10px}
  .faq-a{padding:10px 10px 12px;gap:10px}.faq-a p{font-size:14px}
  .qa-notice{padding:10px 12px}.qa-notice p{font-size:13px}
  .board-count{font-size:14px}
  .board-table{min-width:0;table-layout:auto}
  .board-table .col-number,.board-table th:first-child,.board-table td:first-child,.board-table .col-date:last-child,.board-table th:last-child,.board-table td:last-child{display:none}
  .board-table th,.board-table td{padding:9px 6px;font-size:13px}
  .board-table .post-title{font-size:14px}
  .board-table .status{font-size:12px;padding:1px 6px}
  .write-row{grid-template-columns:1fr}
  .write-row label{padding:8px 10px 0;border:0!important;font-size:13px}
  .write-row>div{padding:6px 10px 10px;border:0!important}
  .write-row>div+label{border-top:1px solid #e3e7ee!important}
  .write-actions{flex-direction:column}.write-actions .ar-btn{width:100%}
  .detail-actions{flex-wrap:wrap}.detail-actions .ar-btn{flex:1 1 calc(50% - 4px)}

  /* 푸터 */
  .site-footer{padding:28px 0 28px}
  .footer-inner{display:block;position:relative}
  .footer-top,.footer-bottom{display:block}
  .footer-logos{gap:18px;margin-bottom:14px;min-width:0}
  .footer-ci{height:26px}.footer-mrtc img{height:32px}
  .footer-links{gap:16px;font-size:14px;margin-bottom:0}
  .top-button{top:-58px}
  .footer-content{font-size:13px;line-height:1.7}
  .footer-content p span{display:block;margin-left:0}
  .copyright{font-size:13px}
  .footer-kogl{display:flex;width:100%;margin-top:12px;gap:10px;padding:8px}
  .kogl-mark{width:54px;height:40px}
  .kogl-text{font-size:12px}.kogl-text small{font-size:11px}
  .top-button{position:absolute;right:0;top:0;width:44px;height:44px;margin:0}.top-button span{font-size:11px}

  /* 시연용 이용 신청 내역 */
  .admin-tbl{min-width:640px}
  .da-toast{font-size:14px;padding:10px 16px}
}

/* ---------- 소형 모바일 ---------- */
@media(max-width:420px){
  .header-inner,.footer-inner,.da-main{width:calc(100% - 24px)}
  .db-hero{padding:16px 12px}
  .db-kpis{grid-template-columns:repeat(3,1fr);gap:4px}
  .db-kpi{padding:10px 2px 8px}.db-kpi span{font-size:12px}.db-kpi b{font-size:22px}
  .insight-scope .iw-categories{grid-template-columns:repeat(3,1fr)}
  .ar-search .sel{flex-basis:100%}
}