@import url("reset.css");
@import url("slick.css");


:root{
    --padding:20px;
    --header_h:100px;
    --width:1510px;
    --point-color-1:#df3d6e;

    /* dashboard layout shell */
    --c-primary:#3B7AF7;
    --c-primary-10:rgba(59,122,247,.1);
    --c-border:#E5E9F2;
    --c-page:#F9FAFB;
    --c-text:#111827;
    --c-text-2:#374151;
    --c-text-3:#6B7280;
    --c-muted:#9CA3AF;
    --c-usercard:#F4F7FF;
    --sidebar-w:204px;
    --topbar-h:54px;

    /* Figma 🎨 Colors — grayscale tokens */
    --g-50:#F8F8F8;
    --g-100:#F0F0F0;
    --g-150:#EBEBEB;
    --g-200:#E4E4E4;
    --g-300:#D8D8D8;
    --g-400:#C6C6C6;
    --g-500:#8E8E8E;
    --g-600:#727272;
    --g-700:#555555;
    --g-800:#343434;
    --g-900:#1D1D1D;
    /* semantic roles (from style guide) */
    --c-bg:#F8F8F8;
    --c-bg-disabled:#E4E4E4;
    --c-field-border:#D8D8D8;
    --c-text-body:#727272;
    --c-text-title:#555555;
    --c-danger:#E5484D;
    --c-success:#3B7AF7;
    --radius:8px;
}




/* ============================================================
   Dashboard layout shell (header.html / footer.html / index.html)
   - reset.css 에 있는 박스모델/리셋/폰트/유틸은 재선언하지 않음
   - .ico / .arrow 는 아이콘 자리 placeholder (추후 SVG 교체)
   ============================================================ */

/* layout frame */
.sidebar{position:fixed; top:0; left:0; z-index:100; display:flex; flex-direction:column; width:var(--sidebar-w); height:100vh; background:#fff; border-right:1px solid var(--c-border);}
.header{position:fixed; top:0; left:var(--sidebar-w); right:0; z-index:90; display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); padding:12px 24px; background:#fff; border-bottom:1px solid var(--c-border);}
.container{display:flex; flex-direction:column; min-height:100vh; margin-left:var(--sidebar-w); padding-top:var(--topbar-h); background:var(--c-page);}
html{scroll-behavior:smooth;}
.content{flex:1 0 auto; display:flex; flex-direction:column; gap:16px; padding:20px;}

/* icons (extracted SVGs) */
.gnb .ico, .gnb .arrow, .sidebar_foot .ico, .user .arrow, .header .search .ico, .header .btn_alarm .ico{flex:none; display:block;}

/* sidebar: logo */
.logo{padding:20px 20px 16px; border-bottom:1px solid var(--c-border);}
.logo img{display:block; width:163px; height:20px; object-fit:contain;}
.sidebar .company{padding:12px 16px; border-bottom:1px solid var(--c-border);}
.sidebar .company_select{width:100%; min-width:0; height:36px; font-size:13px; font-weight:600;}

/* sidebar: navigation */
.gnb{flex:1; overflow-y:auto; padding:12px 8px;}
.gnb > ul > li{margin-bottom:2px;}
.gnb a{display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:13px; color:var(--c-text-3); border-radius:10px;}
.gnb .ico{width:15px; height:15px;}
.gnb .txt{flex:1;}
.gnb .arrow{width:12px; height:12px;}
.gnb > ul > li.on > a{color:var(--c-primary); font-weight:600;}
/* accordion: submenus slide up/down (jQuery slideToggle controls display) */
.gnb .depth2, .gnb .depth3{display:none; overflow:hidden;}
.gnb a .arrow{margin-left:auto; transition:transform .2s ease;}
.gnb li.open > a .arrow{transform:rotate(180deg);}
.gnb .depth2{margin-top:2px; padding:0 0 4px 28px;}
.gnb .depth2 li{margin-bottom:2px;}
.gnb .depth2 a{padding:6px 10px; font-size:12px; color:var(--c-muted);}
.gnb .depth2 li.on > a{background:var(--c-primary-10); color:var(--c-primary); font-weight:600;}
.gnb .depth3{padding:2px 0 4px 14px;}
.gnb .depth3 a{padding:5px 10px; font-size:12px; color:var(--c-muted);}
.gnb .depth3 li.on > a{color:var(--c-primary); font-weight:600;}

/* sidebar: bottom (util + user card) */
.sidebar_foot{padding:12px 8px; border-top:1px solid var(--c-border);}
.sidebar_foot .utils a{display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:13px; font-weight:500; color:var(--c-muted); border-radius:10px;}
.sidebar_foot .utils .ico{width:15px; height:15px;}
.user{display:flex; align-items:center; gap:8px; margin-top:4px; padding:12px; background:var(--c-usercard); border-radius:14px;}
.user .thumb{display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; font-size:12px; font-weight:700; color:#fff; background:var(--c-primary); border-radius:50%;}
.user .info{flex:1; line-height:1.3;}
.user .info strong{display:block; font-size:12px; font-weight:600; color:var(--c-text);}
.user .info span{font-size:11px; color:var(--c-muted);}
.user .arrow{width:13px; height:13px;}

/* top bar */
.header_left{display:flex; align-items:center; gap:12px; min-width:0;}
.btn_menu{display:none; flex-direction:column; justify-content:center; gap:4px; width:32px; height:32px; padding:7px; border-radius:8px;}
.btn_menu span{display:block; height:2px; background:var(--c-text-2); border-radius:2px;}
.header .greeting{font-size:14px; color:var(--c-text-2);}
.header .greeting strong{font-weight:700; color:var(--c-primary);}
/* 업데이트내역 롤링 (Swiper vertical, 기획서 p.19) */
.header_left{flex:1;}
/* override swiper.css .swiper{margin-left/right:auto} → 좌측 정렬 유지 */
.notice_roll{flex:1; min-width:0; max-width:560px; height:24px; margin:0; overflow:hidden;}
.notice_roll .swiper-wrapper{height:24px;}
.notice_roll .swiper-slide{display:flex; align-items:center; gap:8px; height:24px; font-size:14px; color:var(--c-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.notice_roll .swiper-slide:hover{color:var(--c-primary);}
.notice_tag{flex:none; padding:1px 8px; font-size:11px; font-weight:600; color:var(--c-primary); background:var(--c-primary-10); border-radius:999px;}
.header .utils{display:flex; align-items:center; gap:8px;}
.header .search{position:relative; display:flex; align-items:center;}
.header .search .ico{position:absolute; left:12px; width:13px; height:13px;}
.header .search input{width:280px; height:30px; padding:6px 12px 6px 32px; font-size:12px; background:var(--c-page); border:1px solid var(--c-border); border-radius:10px;}
.header .btn_alarm{position:relative; padding:8px; border-radius:10px;}
.header .btn_alarm .ico{display:block; width:17px; height:17px;}
.header .btn_alarm::after{content:""; position:absolute; top:6px; right:6px; width:6px; height:6px; background:#FF6467; border-radius:50%;}

/* footer */
.footer{padding:20px 24px; text-align:center;}
.footer .company{font-size:12px; color:var(--c-muted); line-height:1.7;}

/* floating AI chatbot button */
.ai_fab{position:fixed; right:24px; bottom:24px; z-index:80; display:flex; align-items:center; justify-content:center; width:52px; height:52px; background:linear-gradient(135deg,#3B7AF7 0%,#6366F1 100%); border-radius:50%; box-shadow:0 4px 20px rgba(59,122,247,.4);}

/* off-canvas dim overlay (mobile only) */
.dim{display:none; position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;}
.dim.on{opacity:1; visibility:visible;}


/* ============================================================
   Form components + style-guide page (components.html)
   - reset.css 의 박스모델/폰트/유틸/[type=*] 기본은 재선언하지 않음
   ============================================================ */

/* ----- style-guide page chrome ----- */
.guide{max-width:960px; margin:0 auto; padding:32px 20px 80px;}
.guide_header{margin-bottom:8px;}
.guide_header h1{font-size:26px; font-weight:700; color:var(--c-text);}
.guide_header p{margin-top:6px; font-size:14px; color:var(--c-text-body);}
.guide_nav{position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:6px; margin:20px 0 32px; padding:12px 0; background:#fff; border-bottom:1px solid var(--c-border);}
.guide_nav a{padding:6px 12px; font-size:13px; color:var(--c-text-3); border:1px solid var(--c-border); border-radius:999px;}
.guide_nav a.on{color:#fff; background:var(--c-primary); border-color:var(--c-primary);}
.guide_title{margin:36px 0 14px; font-size:18px; font-weight:700; color:var(--c-text-title);}

/* component card */
.comp{margin-bottom:28px; border:1px solid var(--c-border); border-radius:14px; overflow:hidden;}
.comp_head{padding:14px 18px; border-bottom:1px solid var(--c-border);}
.comp_head h3{font-size:15px; font-weight:600; color:var(--c-text);}
.comp_head .cls{margin-top:4px; font-size:12px; color:var(--c-text-3);}
.comp_head .cls code{padding:2px 6px; font-size:12px; color:var(--c-primary); background:var(--c-primary-10); border-radius:4px;}
.comp_demo{display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; padding:24px 18px; background:var(--c-bg);}
.comp_demo--stack{flex-direction:column; align-items:stretch;}
.comp_desc{padding:0 18px 14px;}
.comp_desc table{font-size:12px;}
.comp_desc th, .comp_desc td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--c-border); vertical-align:top;}
.comp_desc th{color:var(--c-text-3); font-weight:600; white-space:nowrap;}
.comp_desc td code{color:var(--c-primary);}

/* code block + copy */
.code_block{position:relative; background:var(--g-900);}
.code_block pre{margin:0; padding:16px 18px; overflow:auto;}
.code_block code{font-family:Consolas,Monaco,"D2Coding",monospace; font-size:12px; line-height:1.6; color:#E6EDF3; white-space:pre;}
.code_copy{position:absolute; top:10px; right:10px; padding:5px 12px; font-size:12px; color:var(--g-200); background:rgba(255,255,255,.1); border-radius:6px;}
.code_copy:hover{background:rgba(255,255,255,.2);}
.code_copy.copied{color:#fff; background:var(--c-primary);}
.code_copy.failed{color:#fff; background:var(--c-danger);}

/* ----- form controls ----- */
.input{width:100%; height:40px; padding:0 12px; font-size:14px; color:var(--c-text); background:#fff; border:1px solid var(--c-field-border); border-radius:var(--radius);}
/* override reset.css input[type=text]{-webkit-border-radius:0} (specificity 0,0,1,1) */
input.input, select.input, textarea.input{-webkit-border-radius:var(--radius); border-radius:var(--radius);}
textarea.input{height:auto; min-height:88px; padding:10px 12px; line-height:1.5; resize:vertical;}
select.input{height:40px; padding:0 12px; cursor:pointer;}
.input::placeholder{color:var(--c-muted);}
.input:focus{border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-10); outline:none;}
.input:disabled, .input[readonly]{background:var(--c-bg-disabled); color:var(--c-muted); cursor:not-allowed;}
.input.is-error{border-color:var(--c-danger);}
.input.is-error:focus{box-shadow:0 0 0 3px rgba(229,72,77,.12);}

/* search field (icon + input) */
.search_field{position:relative; display:inline-flex; align-items:center; width:100%; max-width:320px;}
.search_field .input{padding-left:36px;}
.search_field .ico_search{position:absolute; left:12px; width:14px; height:14px; background:var(--c-muted); -webkit-mask:url("../img/ico/ico-search.svg") center/contain no-repeat; mask:url("../img/ico/ico-search.svg") center/contain no-repeat;}

/* form group (label + control + help/error) */
.form_group{margin-bottom:18px;}
.form_subgroup{display:none; margin-top:14px; padding:14px 16px; background:var(--c-page); border-radius:var(--radius);}
.form_subgroup.is-open{display:block;}
.form_subgroup .form_group:last-child{margin-bottom:0;}
.form_label{display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--c-text-title);}
.form_label .req{margin-left:2px; color:var(--c-danger);}
.form_help{margin-top:6px; font-size:13px; color:var(--c-muted);}
.form_error{margin-top:6px; font-size:13px; color:var(--c-danger);}
.block_hint{margin-top:6px; font-size:13px; color:var(--c-text-3); line-height:1.6;}

/* checkbox / radio (custom) */
.checkbox, .radio{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--c-text); cursor:pointer;}
.checkbox input, .radio input{position:absolute; opacity:0; width:0; height:0;}
.checkbox .box, .radio .box{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; background:#fff; border:1px solid var(--c-field-border); transition:all .15s;}
.checkbox .box{border-radius:5px;}
.radio .box{border-radius:50%;}
.checkbox input:checked + .box{background:var(--c-primary); border-color:var(--c-primary);}
.checkbox input:checked + .box::after{content:""; width:5px; height:9px; margin-top:-2px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.radio input:checked + .box{border-color:var(--c-primary);}
.radio input:checked + .box::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--c-primary);}
.checkbox input:focus-visible + .box, .radio input:focus-visible + .box{box-shadow:0 0 0 3px var(--c-primary-10);}
.checkbox input:disabled + .box, .radio input:disabled + .box{background:var(--c-bg-disabled);}
.checkbox.is-disabled, .radio.is-disabled{color:var(--c-muted); cursor:not-allowed;}

/* toggle switch */
.switch{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--c-text); cursor:pointer;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch .track{position:relative; width:40px; height:22px; flex:none; background:var(--c-300, #D8D8D8); border-radius:999px; transition:background .15s;}
.switch .track::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s;}
.switch input:checked + .track{background:var(--c-primary);}
.switch input:checked + .track::after{transform:translateX(18px);}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--c-primary-10);}
.switch input:disabled + .track{background:var(--c-bg-disabled);}
.switch--sm .track{width:34px; height:18px;}
.switch--sm .track::after{width:14px; height:14px;}
.switch--sm input:checked + .track::after{transform:translateX(16px);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 18px; font-size:14px; font-weight:600; color:#fff; background:var(--c-primary); border-radius:var(--radius); transition:filter .15s, background .15s;}
.btn:hover{filter:brightness(0.94);}
.btn:disabled, .btn.is-disabled{background:var(--c-bg-disabled); color:var(--c-muted); cursor:not-allowed; filter:none;}
.btn--secondary{color:var(--c-text-title); background:var(--g-150);}
.btn--secondary:hover{background:var(--g-200);}
.btn--outline{color:var(--c-primary); background:#fff; border:1px solid var(--c-primary);}
.btn--outline:hover{background:var(--c-primary-10); filter:none;}
.btn--sm{height:32px; padding:0 12px; font-size:13px;}
.btn--lg{height:48px; padding:0 24px; font-size:15px;}
.btn--loading{position:relative; color:transparent !important; pointer-events:none;}
.btn--loading::after{content:""; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:btnspin .6s linear infinite;}
.btn--outline.btn--loading::after{border-color:var(--c-primary-10); border-top-color:var(--c-primary);}
@keyframes btnspin{to{transform:rotate(360deg);}}

/* table (Figma node 193:5461) */
/* card container with header bar */
.table_card{background:#fff; border:1px solid var(--c-border); border-radius:16px; overflow:hidden;}
.table_card_head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #F3F4F6;}
.table_card_head h3{font-size:14px; font-weight:700; color:#111827;}
.btn--ghost{height:auto; padding:6px 12px; font-size:12px; font-weight:500; color:var(--c-text-3); background:#fff; border:1px solid var(--c-border); border-radius:10px;}
.btn--ghost:hover{background:#F3F4F6; filter:none;}
.btn--danger{color:#fff; background:var(--c-danger);}
.btn--danger:hover{filter:brightness(0.94);}
.btn--icon{padding:7px; gap:0;}
.btn--icon img{width:20px; height:20px;}
.btn--ghost img{width:12px; height:12px;}

.table_wrap{width:100%; overflow-x:auto;}
/* 프로그램 일정표 (시간 × 일차 타임테이블) */
.pv_sched{width:100%; border-collapse:collapse; font-size:12px; color:var(--c-text); table-layout:fixed;}
.pv_sched th, .pv_sched td{padding:8px 6px; text-align:center; vertical-align:middle; border:1px solid #E5E9F2; line-height:1.4;}
.pv_sched thead th{font-weight:700; color:var(--c-text-2); background:#F3F4F6;}
.pv_sched .s_time{font-weight:500; color:var(--c-text-3); background:#FAFBFC; white-space:nowrap;}
.pv_sched .s_b{background:#FBE4D5;}
.pv_sched .s_l{background:#FBF1CF;}
.pv_sched .s_d{background:#DBE5F4;}
.pv_sched .s_g{background:#D9EDE1;}
.pv_sched .s_y{background:#FBF3D8;}
.pv_sched .s_p{background:#ECE2F3;}
.table{font-size:13px; color:var(--c-text);}
.table th, .table td{padding:13px 16px; text-align:left; white-space:nowrap;}
.table thead th{font-size:11px; font-weight:500; color:#9CA3AF; background:#F9FAFB; border-bottom:1px solid #F3F4F6;}
.table tbody td{border-bottom:1px solid #F3F4F6;}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:#F9FAFB;}
/* cell variants */
.table .cell_file{display:inline-flex; align-items:center; gap:8px; color:#374151; font-weight:500;}
.table .cell_file img{width:14px; height:14px; flex:none;}
.table .cell_name{font-weight:600; color:#111827;}
.table .cell_act{display:flex; gap:6px; justify-content:flex-start;}
.table .th_check{width:36px;}
.table tbody tr[draggable="true"]{cursor:grab;}
.table tbody tr.is-dragging{opacity:.5; background:var(--c-primary-10); cursor:grabbing;}
.table .th_grip{width:30px;}
.table td.drag_grip{position:relative; width:30px; cursor:grab; color:var(--c-muted);}
.table td.drag_grip::before{content:""; position:absolute; top:50%; left:50%; width:3px; height:3px; margin:-7px 0 0 -4px; border-radius:50%; background:currentColor; box-shadow:5px 0 currentColor, 0 5px currentColor, 5px 5px currentColor, 0 10px currentColor, 5px 10px currentColor;}
.table tbody tr:hover td.drag_grip{color:var(--c-text-3);}
.table a.link{color:var(--c-primary);}
.table a.link:hover{text-decoration:underline;}
.table .cell_muted{color:#6B7280;}
.table .sortable{cursor:pointer;}
.table .sortable::after{content:"\2195"; margin-left:4px; color:var(--c-muted);}
.table .sortable.asc::after{content:"\2191"; color:var(--c-primary);}
.table .sortable.desc::after{content:"\2193"; color:var(--c-primary);}

/* status badge (pill) */
.badge{display:inline-flex; align-items:center; padding:3px 10px; font-size:11px; font-weight:500; line-height:1.5; border-radius:999px;}
.badge--success{color:#059669; background:#ECFDF5;}
.badge--warning{color:#D97706; background:#FFFBEB;}
.badge--danger{color:#DC2626; background:#FEF2F2;}
.badge--info{color:#3B7AF7; background:#EFF6FF;}

/* row action icon buttons */
.table_actions{display:inline-flex; align-items:center; gap:6px;}
.icon_btn{display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:10px;}
.icon_btn:hover{background:#F3F4F6;}
.icon_btn img{display:block; width:13px; height:13px;}

/* pagination */
.pagination{display:flex; align-items:center; justify-content:center; gap:4px; margin-top:16px;}
.pagination a{display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; font-size:13px; color:var(--c-text-3); border:1px solid var(--c-border); border-radius:6px;}
.pagination a.on{color:#fff; background:var(--c-primary); border-color:var(--c-primary);}
.pagination a.is-disabled{color:var(--c-muted); pointer-events:none;}

/* search filter bar */
.filter{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; padding:16px; background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--radius);}
.filter .filter_item{display:flex; flex-direction:column; gap:6px;}
.filter .filter_item > label{font-size:12px; font-weight:600; color:var(--c-text-title);}
.filter .filter_item .input, .filter .filter_item .search_field{width:180px;}
.filter .filter_actions{display:flex; gap:8px; margin-left:auto;}

/* small layout helper for demos */
.demo_row{display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
.demo_col{display:flex; flex-direction:column; gap:12px; min-width:240px;}

/* neutral badge (소속신청서 등) */
.badge--gray{color:#6B7280; background:#F3F4F6;}

/* ===== 폼 화면 레이아웃 (프로젝트 추가 등, 기획서 p.22) ===== */
.form_section{padding-top:20px; margin-top:20px; border-top:1px solid #F3F4F6;}
.form_section:first-child{padding-top:0; margin-top:0; border-top:none;}
.form_section_tit{margin-bottom:14px; font-size:14px; font-weight:700; color:var(--c-text);}
.form_row{display:flex; align-items:flex-end; gap:8px;}
.form_row .input{flex:1;}
.form_row .btn{flex:none;}
.form_grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form_list{display:flex; flex-direction:column; gap:8px;}
.form_section .field_list{display:flex; flex-direction:column; gap:10px;}
.form_list .f_del{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border:1px solid var(--c-field-border); border-radius:var(--radius);}
.form_list .f_del img{width:18px; height:18px; display:block;}
.form_list .f_del:hover{background:#FEF2F2; border-color:#FECACA;}
/* 신청서 단계지정: 신청서(전) → 전환상태 → 신청서(후) 3열 */
.step_cols{display:flex; align-items:flex-end; gap:18px;}
.step_col{flex:1; display:flex; flex-direction:column; gap:6px; position:relative;}
.step_col_tit{font-size:13px; font-weight:600; color:var(--c-text-2);}
.step_col + .step_col::before{content:"→"; position:absolute; left:-15px; bottom:9px; font-size:14px; color:var(--c-muted);}
.step_list{display:flex; flex-direction:column; gap:10px;}
.step_act{flex:none; display:flex; align-items:flex-end;}
.step_act .f_del{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--c-field-border); border-radius:var(--radius);}
.step_act .f_del img{width:18px; height:18px; display:block;}
.step_act .f_del:hover{background:#FEF2F2; border-color:#FECACA;}
.form_actions{display:flex; justify-content:flex-end; gap:8px; padding-top:20px; margin-top:20px; border-top:1px solid #F3F4F6;}

/* 라디오 카드 (이미지 선택형 유형 선택) */
.radio_grid{display:flex; gap:12px;}
.radio_grid .radio_card{flex:1; min-width:0;}
.radio_card{position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; cursor:pointer; background:#fff; border:1px solid var(--c-field-border); border-radius:var(--radius); transition:border-color .15s, box-shadow .15s;}
.radio_card input{position:absolute; opacity:0; width:0; height:0;}
.radio_card .rc_tit{font-size:13px; font-weight:600; color:var(--c-text);}
.radio_card .rc_desc{font-size:12px; color:var(--c-text-3); line-height:1.5;}
.radio_card input:checked ~ .rc_tit{color:var(--c-primary);}
.radio_card:has(input:checked){border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-10);}

/* ===== 목록 관리 화면 (프로젝트 등록 등, 기획서 p.21) ===== */
.page_head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
.page_head .tit{font-size:20px; font-weight:700; color:var(--c-text);}
.page_head .desc{margin-top:6px; font-size:13px; color:var(--c-text-body); line-height:1.5;}

/* 정렬 + 검색 툴바 */
.toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.toolbar .t_left, .toolbar .t_right{display:flex; align-items:center; gap:8px;}
.toolbar .input{width:auto; min-width:120px;}
.toolbar .search_field{width:240px;}

/* 프로젝트 카드 그리드 */
.proj_grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px;}
.proj_card{display:flex; flex-direction:column; gap:12px; padding:20px;}
.proj_card .p_top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.proj_card .pname{font-size:15px; font-weight:700; color:var(--c-text);}
.proj_card .pdesc{font-size:13px; color:var(--c-text-body); line-height:1.6; flex:1;}
.proj_card .pforms{padding-top:12px; border-top:1px solid #F3F4F6;}
.proj_card .pforms .plabel{display:block; margin-bottom:7px; font-size:12px; color:var(--c-muted);}
.proj_card .pforms .badges{display:flex; flex-wrap:wrap; gap:6px;}
.proj_card .btn{width:100%;}


/* ============================================================
   Dashboard content (index.html .content) — Figma #193:6526 + 기획서 p.19
   ============================================================ */
.card{background:#fff; border:1px solid var(--c-border); border-radius:16px;}
.card_pad{padding:20px;}
.card_head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px;}
.card_head h3{font-size:14px; font-weight:700; color:var(--c-text);}
.card_head .more{font-size:12px; font-weight:500; color:var(--c-primary);}

.dash{display:flex; align-items:flex-start; gap:16px;}
.dash_main{flex:1; min-width:0; display:flex; flex-direction:column; gap:16px;}
.dash_side{width:300px; flex:none; display:flex; flex-direction:column; gap:16px;}

/* stat cards */
.stat_grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
/* stat card (Figma #193:6658 — 아이콘 좌측, 자연색 이모지, 값+단위, 증감 pill) */
.stat{display:flex; flex-direction:column; gap:12px; padding:20px;}
.stat_top{display:flex; align-items:center; gap:8px;}
/* 아이콘 타일 = Figma 추출 이미지 (이모지 OS 차이 제거) */
.stat_ico{width:36px; height:36px; flex:none; border-radius:14px;}
.stat_label{font-size:13px; color:var(--c-text-body);}
.stat_val{display:flex; align-items:flex-end; gap:8px;}
.stat_value{font-size:28px; font-weight:700; line-height:1; letter-spacing:-0.03em; color:var(--c-text);}
.stat_unit{padding-bottom:3px; font-size:14px; color:var(--c-muted);}
.stat_delta{display:flex; align-items:center; gap:6px;}
.stat_badge{display:inline-flex; align-items:center; gap:2px; padding:2px 6px; font-size:12px; font-weight:600; border-radius:8px;}
.stat_badge img{width:11px; height:11px;}
.stat_badge.up{color:#059669; background:#ECFDF5;}
.stat_badge.down{color:#DC2626; background:#FEF2F2;}
.stat_period{font-size:11px; color:var(--c-muted);}

/* chart cards */
.dash_grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.dash_grid2 > *, .stat_grid > *{min-width:0;}
.chart_box{position:relative; height:230px;}
.chart_box canvas{max-width:100%;}
/* segmented control (Figma #193:7049 — border 없음, bg #F9FAFB) */
.seg{display:inline-flex; padding:4px; gap:4px; background:#F9FAFB; border-radius:10px;}
.seg button{padding:5px 12px; font-size:12px; color:var(--c-muted); border-radius:8px;}
.seg button.on{color:var(--c-text); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);}

/* donut + legend */
.donut_wrap{display:flex; align-items:center; gap:20px;}
.donut_box{position:relative; width:160px; height:160px; flex:none;}
.donut_center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.donut_center b{font-size:22px; font-weight:700; color:var(--c-text);}
.donut_center span{font-size:12px; color:var(--c-text-3);}
.legend{flex:1; display:flex; flex-direction:column; gap:8px;}
.legend li{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-text-2);}
.legend .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.legend .lbl{color:var(--c-text-3);}
.legend .num{margin-left:auto; font-weight:600; color:var(--c-text);}
.legend .pct{min-width:30px; text-align:right; font-size:11px; color:var(--c-muted);}

/* 상태별 막대그래프 (Figma #193:7005) */
.card_sub{margin:-8px 0 14px; font-size:12px; color:var(--c-muted);}
.dist_bars{display:flex; flex-direction:column; gap:11px; margin-top:14px; padding-top:14px; border-top:1px solid #F3F4F6;}
.dist_head{display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; font-size:11px; color:var(--c-text-3);}
.dist_track{height:6px; background:#F3F4F6; border-radius:999px; overflow:hidden;}
.dist_track > span{display:block; height:6px; border-radius:999px;}

/* 탭 세그먼트 (Figma #193:7049 — container r14, button r10) */
.seg--tab{border-radius:14px; margin-bottom:14px;}
.seg--tab button{padding:6px 14px; border-radius:10px;}
.seg--tab button.on{color:var(--c-primary); font-weight:600;}

/* AI report side cards */
.ai_card{display:flex; gap:12px; padding:14px; border:1px solid var(--c-border); border-radius:12px;}
.ai_card + .ai_card{margin-top:10px;}
.ai_ico{display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:10px; font-size:16px;}
.ai_ico--blue{background:#EFF6FF;}
.ai_ico--green{background:#ECFDF5;}
.ai_ico--amber{background:#FFFBEB;}
.ai_card .tit{font-size:13px; font-weight:600; color:var(--c-text);}
.ai_card .desc{margin-top:3px; font-size:12px; color:var(--c-text-3); line-height:1.5;}
.ai_card .link{display:inline-block; margin-top:6px; font-size:12px; color:var(--c-primary);}

/* activity feed */
.feed{display:flex; flex-direction:column; gap:14px;}
.feed li{display:flex; gap:10px;}
.feed .fdot{width:8px; height:8px; margin-top:5px; flex:none; border-radius:50%; background:var(--c-primary);}
.feed .ftxt{font-size:12px; color:var(--c-text-2); line-height:1.5;}
.feed .ftime{display:block; margin-top:2px; font-size:11px; color:var(--c-muted);}

/* service-start button — sidebar foot action (기획서 p.19) */
.sidebar_service{padding:12px;}
.sidebar_service .btn--service{width:100%;}
/* running state disables (기획서 p.19) */
.btn--service.is-running{background:var(--c-bg-disabled); color:var(--c-muted); cursor:default; pointer-events:none;}


/* ===== 프론트 인증 화면: 로그인 / 회원가입 (기획서 p.15~17) ===== */
.auth_body{min-height:100vh; background:var(--c-page);}
.auth_wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:40px 20px;}
.auth_box{width:100%; max-width:420px; padding:36px 32px; background:#fff; border:1px solid var(--c-border); border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.04);}
.auth_box--wide{max-width:480px;}
.auth_logo{display:flex; justify-content:center; margin-bottom:10px;}
.auth_logo img{display:block; width:180px;}
.auth_tagline{margin-bottom:24px; font-size:13px; color:var(--c-text-3); text-align:center;}
.auth_title{margin-top:6px; font-size:18px; font-weight:700; color:var(--c-text); text-align:center;}
.auth_form{display:flex; flex-direction:column; gap:10px;}
.auth_form--signup{gap:0; text-align:left;}
.agree_list{display:flex; flex-direction:column; gap:18px;}
.agree_item{display:flex; flex-direction:column; gap:8px;}
.agree_text{min-height:120px; font-size:13px; line-height:1.6;}
textarea.agree_text{resize:none;}
.agree_text[readonly]{color:var(--c-text-2); background:#fff; cursor:auto;}
.auth_submit{width:100%; margin-top:6px;}
.auth_links{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-size:13px; color:var(--c-text-3);}
.auth_links a{color:var(--c-text-2); font-weight:600;}
.auth_links a:hover{color:var(--c-primary);}
.auth_links .sep{color:var(--c-border);}
.phone_row{display:flex; gap:8px;}
.phone_row .input{flex:1; min-width:0;}
.phone_row .phone_cc{flex:none; width:88px;}
.phone_row .btn{flex:none;}
.auth_foot{margin-top:28px; padding-top:20px; border-top:1px solid #F3F4F6; text-align:center;}
.auth_foot_nav{display:flex; justify-content:center; gap:14px; margin-bottom:12px;}
.auth_foot_nav a{font-size:12px; color:var(--c-text-2);}
.auth_foot_nav a:hover{color:var(--c-primary);}
.auth_foot p{font-size:11px; color:var(--c-muted); line-height:1.6;}
.auth_foot .copy{margin-top:8px;}

/* ===== 도메인·문자요금 결제 (기획서 p.39/41) ===== */
.charge_bal{font-size:16px; font-weight:700; color:var(--c-text);}
/* SMS 기본설정 표 — 라벨 좌측 + 내용 우측 (기획서 41p) */
.cfg_table{border:1px solid var(--c-border); border-radius:12px; overflow:hidden;}
.cfg_row{display:flex; align-items:stretch; border-top:1px solid var(--c-border);}
.cfg_row:first-child{border-top:none;}
.cfg_label{flex:none; width:220px; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:16px; font-size:14px; font-weight:600; color:var(--c-text); background:var(--c-page);}
.cfg_label small{display:block; font-weight:500; color:var(--c-text-3);}
.cfg_body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding:16px;}
.cfg_desc{font-size:13px; line-height:1.6; color:var(--c-text-2);}
@media (max-width:640px){
    .cfg_row{flex-direction:column;}
    .cfg_label{width:auto;}
}

/* ===== 환경설정 약관 (기획서 p.31) ===== */
.terms_item{padding:14px; margin-bottom:12px; background:var(--c-page); border:1px solid var(--c-border); border-radius:12px;}
.terms_item .form_group:last-child{margin-bottom:0;}
/* dashed add button (global base — same look as .apply_builder .prop_add) */
.prop_add{width:100%; margin-top:12px; padding:9px; font-size:13px; font-weight:600; color:var(--c-primary); background:#fff; border:1px dashed var(--c-primary); border-radius:10px; cursor:pointer;}
.prop_add:hover{background:var(--c-primary-10);}
/* 문구 에디트 영역 (리치텍스트 에디터 — 퍼블 데모) */
.rte{background:#fff; border:1px solid var(--c-field-border); border-radius:var(--radius); overflow:hidden;}
.rte_bar{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px 8px; background:#FAFBFC; border-bottom:1px solid var(--c-border);}
.rte_sel{height:28px; padding:0 6px; font-size:12px; color:var(--c-text-2); background:#fff; border:1px solid var(--c-field-border); border-radius:6px; cursor:pointer;}
.rte_sel--sm{width:56px;}
.rte_btn{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; font-size:13px; color:var(--c-text-2); background:#fff; border:1px solid var(--c-field-border); border-radius:6px; cursor:pointer;}
.rte_btn:hover{background:var(--c-page);}
.rte_btn--grp{margin-left:7px;}
.rte_btn--color{position:relative;}
.rte_btn--color::after{content:""; position:absolute; left:6px; right:6px; bottom:4px; height:2px; background:var(--c-primary);}
.rte_btn--img{font-size:12px; color:var(--c-primary); border-color:var(--c-primary);}
.rte_btn--al{position:relative;}
.rte_btn--al::before, .rte_btn--al::after{content:""; position:absolute; left:7px; right:7px; height:1.5px; background:currentColor;}
.rte_btn--al::before{top:9px;}
.rte_btn--al::after{bottom:9px; box-shadow:0 -4px 0 currentColor;}
.rte_btn--al[data-al="c"]::before{left:10px; right:10px;}
.rte_btn--al[data-al="c"]::after{left:8px; right:8px;}
.rte_btn--al[data-al="r"]::before{left:10px;}
.rte_btn--al[data-al="r"]::after{left:9px; box-shadow:0 -4px 0 currentColor;}
.rte_body{min-height:140px; padding:12px; font-size:14px; line-height:1.6; color:var(--c-text); outline:none;}
.rte_body:empty::before{content:attr(data-ph); color:var(--c-muted);}
.rte_placeholder{display:flex; align-items:center; justify-content:center; min-height:140px; font-size:14px; color:var(--c-muted); background:#fff; border:1px dashed var(--c-field-border); border-radius:var(--radius);}

/* ===== 신청분류관리 (기획서 p.30) ===== */
.cat_layout{display:flex; align-items:flex-start; gap:16px;}
.cat_tree{width:260px; flex:none; padding:16px;}
.cat_tree_top{display:flex; gap:6px; margin-bottom:12px;}
.cat_root, .cat_root ul{list-style:none;}
.cat_root > li > a{display:block; padding:8px 10px; font-size:13px; font-weight:700; color:var(--c-text); border-radius:8px;}
.cat_root ul{margin-top:4px; padding-left:14px; display:flex; flex-direction:column; gap:2px;}
.cat_root ul a{display:block; padding:7px 10px; font-size:13px; color:var(--c-text-3); border-radius:8px;}
.cat_root ul a:hover{background:var(--c-page);}
.cat_root li.is-on > a, .cat_root ul li.is-on > a{color:var(--c-primary); background:var(--c-primary-10);}
.cat_main{flex:1; min-width:0;}

/* ===== 자주묻는질문 아코디언 (기획서 p.36) ===== */
.faq_list{display:flex; flex-direction:column; gap:8px;}
.faq_item{background:#fff; border:1px solid var(--c-border); border-radius:12px; overflow:hidden;}
.faq_item > summary{display:flex; align-items:center; gap:10px; padding:14px 16px; font-size:14px; font-weight:600; color:var(--c-text); cursor:pointer; list-style:none;}
.faq_item > summary::-webkit-details-marker{display:none;}
.faq_item > summary::before{content:"Q"; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; font-size:12px; font-weight:700; color:var(--c-primary); background:var(--c-primary-10); border-radius:6px;}
.faq_item .faq_chk{order:-1; gap:0; flex:none;}
.faq_item .faq_chk .box{width:15px; height:15px;}
.faq_item .faq_q{flex:1;}
.faq_item .faq_act{display:flex; align-items:center; gap:6px; flex:none;}
.faq_item .faq_act .f_del{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px;}
.faq_item .faq_act .f_del img{width:18px; height:18px;}
.faq_item .faq_act .f_del:hover{background:#FEF2F2;}
.faq_item .faq_a{padding:0 16px 16px 48px; font-size:13px; color:var(--c-text-2); line-height:1.7;}
.faq_item[open] > summary{border-bottom:1px solid #F3F4F6;}
.faq_item[open] > summary{background:var(--c-page);}
/* 펼친 답변 영역 내 수정/삭제 (뷰 영역으로 이동) */
.faq_item .faq_a_act{display:flex; gap:6px; margin-top:14px;}

/* ===== 게시판 리스트 (공지/업데이트) — 체크박스 / 하단 액션 / 게시물 뷰 ===== */
.table .cell_chk .checkbox{gap:0; justify-content:center;}
.table .cell_chk .box{width:15px; height:15px;}
/* 게시판 리스트 컬럼 — 제목만 가변(최대), 나머지 브라우저 기준 고정폭 */
.board_table{width:100%; min-width:820px; table-layout:fixed;}
.board_table th:nth-child(1), .board_table td:nth-child(1){width:34px; padding-left:8px; padding-right:8px; text-align:center;}
.board_table th:nth-child(2), .board_table td:nth-child(2){width:52px; text-align:center;}
.board_table th:nth-child(3), .board_table td:nth-child(3){width:88px;}
.board_table th:nth-child(4){width:auto;}
.board_table th:nth-child(5), .board_table td:nth-child(5){width:120px;}
.board_table th:nth-child(6), .board_table td:nth-child(6){width:120px;}
.board_table th:nth-child(7), .board_table td:nth-child(7){width:76px;}
.board_table .cell_name{white-space:normal;}
.list_actions{display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:8px; margin-top:16px;}
.list_actions--end{justify-content:flex-end;}
.list_actions .btn{white-space:nowrap;}
.list_actions .sel_btns{display:flex; gap:8px;}
/* 게시물 뷰(상세) */
.post_view .post_head{padding-bottom:16px; border-bottom:2px solid var(--c-text);}
.post_view .post_title{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; color:var(--c-text);}
.post_view .post_meta{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:13px; color:var(--c-text-3);}
.post_view .post_meta strong{font-weight:600; color:var(--c-text-2);}
.post_view .post_body{min-height:220px; padding:24px 4px; font-size:15px; line-height:1.7; color:var(--c-text); border-bottom:1px solid var(--c-border);}
.post_view .post_files{display:flex; flex-direction:column; gap:8px; padding:14px 4px; border-bottom:1px solid var(--c-border); font-size:14px;}
.post_view .post_files a{color:var(--c-primary);}

/* ===== 프로젝트 그룹 관리 (기획서 p.23) ===== */
.head_actions{display:flex; gap:8px; flex:none;}
.help_note{padding:16px 18px; background:#F9FAFB; border:1px solid var(--c-border); border-radius:12px;}
.help_note p{position:relative; padding-left:12px; font-size:12px; color:var(--c-text-3); line-height:1.7;}
.help_note p::before{content:"*"; position:absolute; left:0; color:var(--c-muted);}
.pg_list{display:flex; flex-direction:column; gap:12px;}
.pg_group{padding:0; overflow:hidden;}
.pg_head{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #F3F4F6;}
.pg_head .pg_no{font-size:13px; font-weight:700; color:var(--c-muted);}
.pg_head .pg_title{font-size:15px; font-weight:700; color:var(--c-text); flex:none; min-width:120px;}
.pg_meta{display:flex; flex:1; gap:24px; flex-wrap:wrap;}
.pg_meta > div{display:flex; flex-direction:column; gap:2px;}
.pg_meta .lbl{font-size:11px; color:var(--c-muted);}
.pg_meta strong{font-size:13px; font-weight:700; color:var(--c-text);}
.pg_meta em{font-size:12px; font-style:normal; color:var(--c-text-3);}
.pg_state{flex:none; margin-left:auto;}
.pg_act{display:flex; gap:6px; flex:none;}
.pg_group .table_wrap{padding:4px 6px 8px;}
/* 그룹 추가 폼 */
.amount_row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.amount_row .ar_lbl{font-size:12px; color:var(--c-text-3); flex:none;}
.amount_row .input{width:auto; flex:1; min-width:120px;}
.amount_row .ar_unit{font-size:13px; color:var(--c-text-2); flex:none;}
.amount_row .ar_sep{color:var(--c-muted); flex:none;}
.pg_link_table th, .pg_link_table td{vertical-align:middle;}
.pg_link_table .input{min-width:90px; height:34px; font-size:12px; padding:0 8px;}
.pg_link_table .dt_cell{display:flex; gap:4px;}
.pg_link_table .dt_cell .input{min-width:120px;}

/* ===== 신청화면 관리 _ 폼 빌더 (기획서 p.24) ===== */
.apply_builder{display:flex; align-items:flex-start; gap:16px;}

/* left: 단계 + 폼 구조 */
.apply_builder .col_step{position:sticky; top:calc(var(--topbar-h) + 16px); width:320px; flex:none; padding:20px; background:#fff; border:1px solid var(--c-border); border-radius:16px;}
.apply_builder .form_top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #F3F4F6;}
.apply_builder .form_top_l{display:flex; align-items:center; gap:10px;}
.apply_builder .form_top_tit{font-size:16px; font-weight:700; color:var(--c-text);}
.apply_builder .form_top_r{display:flex; gap:8px;}
.apply_builder .step_bar{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.apply_builder .step_bar .input{flex:1; min-width:0;}
.apply_builder .step_bar .btn{height:40px; flex:none;}
.apply_builder .step_bar .step_add{flex:none;}
/* 신청확인 설정 대분류 nav */
.apply_builder .confirm_nav{display:flex; flex-direction:column; gap:4px;}
.apply_builder .confirm_nav a{padding:9px 12px; font-size:13px; font-weight:600; color:var(--c-text-3); border-radius:10px;}
.apply_builder .confirm_nav a:hover{background:var(--c-page);}
.apply_builder .confirm_nav a.is-sel{color:var(--c-primary); background:var(--c-primary-10);}
.apply_builder .confirm_nav_groups{display:flex; flex-direction:column; gap:4px;}
.apply_builder .confirm_nav_group{display:flex; flex-direction:column; gap:4px;}
.apply_builder .confirm_nav_group + .confirm_nav_group{margin-top:8px; padding-top:8px; border-top:1px solid var(--c-border);}
.apply_builder .confirm_nav .confirm_nav_sub{margin-left:14px; font-weight:500; color:var(--c-text-3);}
.apply_builder .confirm_proj_add{width:100%; margin-top:12px; height:40px;}
/* 신청확인 ↔ 프로젝트 설정 화면분리는 물리적 페이지 분리로 처리 (apply-confirm.html ↔ apply-confirm-project.html) */
.is-hidden{display:none !important;}
/* selectable nodes (폼 유형 / 단계) */
.apply_builder .node{display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; text-align:left; background:#fff; border:1px solid var(--c-border); border-radius:10px; cursor:pointer;}
.apply_builder .node:hover{border-color:var(--c-primary);}
.apply_builder .node--type{flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:12px;}
.apply_builder .node--type .node_kind{font-size:11px; color:var(--c-muted);}
.apply_builder .node--type .node_name{font-size:14px; font-weight:700; color:var(--c-text);}
.apply_builder .node--step{flex:1; font-size:13px; font-weight:600; color:var(--c-text);}
.apply_builder .node.is-sel{border-color:var(--c-primary); background:var(--c-primary-10);}
.apply_builder .tree_group{padding:12px; border:1px solid var(--c-border); border-radius:12px;}
.apply_builder .tree_group + .tree_group{margin-top:10px;}
.apply_builder .tree_kids{margin-top:8px; padding-left:16px; display:flex; flex-direction:column; gap:8px;}
.apply_builder .tree_row{display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--c-page); border:1px solid var(--c-border); border-radius:10px; cursor:pointer;}
.apply_builder .tree_row:hover{border-color:var(--c-primary);}
.apply_builder .tree_row.is-sel{border-color:var(--c-primary); box-shadow:0 0 0 2px var(--c-primary-10);}
.apply_builder .tree_row--big{background:#EFF6FF; border-color:var(--c-primary-10);}
.apply_builder .tree_row .t_label{flex:1; font-size:13px; font-weight:600; color:var(--c-text);}
.apply_builder .tree_row--small .t_label{font-weight:500; color:var(--c-text-2);}
.apply_builder .tree_row--item{background:#fff; cursor:grab;}
.apply_builder .tree_row--item .t_label{font-weight:400; color:var(--c-text-3);}
.apply_builder .tree_row--item:active{cursor:grabbing;}
.apply_builder .tree_row--item.is-dragging{opacity:.5; border-style:dashed; border-color:var(--c-primary); box-shadow:none;}
.apply_builder .tree_row--item.is-drop{border-color:var(--c-primary); box-shadow:0 -2px 0 var(--c-primary) inset;}
.apply_builder .t_grip{position:relative; width:12px; height:18px; flex:none; cursor:grab; color:var(--c-muted);}
.apply_builder .t_grip::before{content:""; position:absolute; top:4px; left:3px; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:5px 0 currentColor, 0 5px currentColor, 5px 5px currentColor, 0 10px currentColor, 5px 10px currentColor;}
.apply_builder .tree_row--item .switch{flex:none;}
.apply_builder .tree_row--item .t_label{min-width:0; word-break:break-word;}
.apply_builder .tree_row--item .t_ctrl{flex:none; display:flex; align-items:center; gap:4px;}
/* 필수/선택 텍스트 토글 (apply-screen 전용 — 공통 switch 미변경) */
.apply_builder .switch--req .track{width:58px; height:22px;}
.apply_builder .switch--req .track::after{width:16px; height:16px; top:3px; left:3px;}
.apply_builder .switch--req .track::before{content:"선택"; position:absolute; top:0; right:9px; height:100%; display:flex; align-items:center; font-size:11px; font-weight:600; color:var(--c-text-3);}
.apply_builder .switch--req input:checked + .track::after{transform:translateX(36px);}
.apply_builder .switch--req input:checked + .track::before{content:"필수"; right:auto; left:9px; color:#fff;}
.apply_builder .tree_items{display:flex; flex-direction:column; gap:8px; margin-top:8px; padding-left:16px;}
.apply_builder .tree_small_wrap + .tree_small_wrap{margin-top:8px;}
.apply_builder .tree_adds{display:flex; gap:8px; margin-top:12px;}
.apply_builder .tree_adds .tree_add_big{margin-top:0;}
.apply_builder .t_add{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; font-size:16px; line-height:1; color:var(--c-primary); background:#fff; border:1px solid var(--c-primary); border-radius:8px;}
.apply_builder .t_add:hover{background:var(--c-primary-10);}
.apply_builder .t_del, .apply_builder .f_del{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border-radius:8px;}
.apply_builder .t_del img, .apply_builder .f_del img{width:20px; height:20px; display:block;}
.apply_builder .t_del:hover, .apply_builder .f_del:hover{background:#FEF2F2;}
.apply_builder .tree_add_big{width:100%; margin-top:12px; padding:11px; font-size:13px; font-weight:600; color:var(--c-primary); background:#fff; border:1px dashed var(--c-primary); border-radius:10px;}
.apply_builder .tree_add_big:hover{background:var(--c-primary-10);}
.apply_builder .form_tree_hint{margin-top:10px; font-size:12px; color:var(--c-muted);}

/* center: 속성 / 조건설정 */
.apply_builder .col_prop{flex:1; min-width:0; padding:16px; background:#fff; border:1px solid var(--c-border); border-radius:16px;}
.apply_builder .prop_tab{display:flex; width:100%; margin-bottom:16px;}
.apply_builder .prop_tab button{flex:1;}
.apply_builder .prop_tab button:disabled, .apply_builder .prop_tab button.is-disabled{color:var(--c-muted); cursor:not-allowed; opacity:.55;}
.apply_builder .prop_block{padding-top:16px; margin-top:16px; border-top:1px solid #F3F4F6; scroll-margin-top:calc(var(--topbar-h) + 16px);}
.apply_builder .block_tit{margin-bottom:10px; font-size:13px; font-weight:700; color:var(--c-text);}
.apply_builder .block_tit--section{margin-bottom:14px; font-size:17px; font-weight:800; letter-spacing:-0.01em; color:var(--c-text);}
.apply_builder .block_tit small{margin-left:6px; font-size:11px; font-weight:500; color:var(--c-muted);}
.apply_builder .block_hint{margin:8px 0 12px; font-size:13px; color:var(--c-text-3); line-height:1.5;}
.apply_builder .field_list{display:flex; flex-direction:column; gap:10px;}
.apply_builder .field_row{display:flex; align-items:center; gap:8px;}
.apply_builder .field_row .f_name{width:84px; flex:none; font-size:12px; font-weight:600; color:var(--c-text-2);}
.apply_builder .field_row .input{flex:1; min-width:0;}
.apply_builder .field_row--top{align-items:flex-start;}
.apply_builder .field_row--top .f_name{padding-top:9px;}
.apply_builder .field_row--new{display:flex; flex-direction:column; gap:8px; padding:10px; background:var(--c-page); border:1px solid var(--c-border); border-radius:10px;}
.apply_builder .field_row--new .nf_row{display:flex; align-items:center; gap:8px;}
.apply_builder .field_row--new .f_name{width:64px; font-size:12px; font-weight:600; color:var(--c-text-2);}
.apply_builder .field_row--new .input{flex:1; min-width:0;}
.apply_builder .f_range{display:flex; align-items:center; gap:6px; flex:1; min-width:0;}
.apply_builder .f_tilde{font-size:12px; color:var(--c-muted);}
.apply_builder .prop_add{width:100%; margin-top:12px; padding:9px; font-size:13px; font-weight:600; color:var(--c-primary); background:#fff; border:1px dashed var(--c-primary); border-radius:10px;}
.apply_builder .prop_add:hover{background:var(--c-primary-10);}
.apply_builder .sched_list{display:flex; flex-direction:column; gap:8px;}
.apply_builder .sched_row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px; background:var(--c-page); border:1px solid var(--c-border); border-radius:10px;}
.apply_builder .sched_row .input{flex:1; min-width:70px;}
.input--file{padding:8px 12px; line-height:1.4; cursor:pointer;}
.input--file::file-selector-button{margin-right:10px; padding:4px 10px; font-size:12px; color:var(--c-text-2); background:var(--g-100); border:1px solid var(--c-border); border-radius:6px; cursor:pointer;}
.input--file::file-selector-button:hover{background:var(--g-150);}
.apply_builder .cond_note{padding:12px; font-size:12px; color:var(--c-text-2); line-height:1.6; background:var(--c-page); border-radius:10px;}
.apply_builder .cond_note strong{display:block; margin-bottom:6px; color:var(--c-text);}
.apply_builder .cond_note p + p{margin-top:4px;}
.apply_builder .cond_empty{padding:24px 12px; font-size:13px; color:var(--c-muted); text-align:center; background:var(--c-page); border-radius:10px;}
.apply_builder .cond_list{display:flex; flex-direction:column; gap:12px;}
.apply_builder .cond_item{padding:12px; background:var(--c-page); border:1px solid var(--c-border); border-radius:10px;}
.apply_builder .cond_sub{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--c-border);}
.apply_builder .cb_target{display:none; flex-direction:column; gap:8px;}
.apply_builder .cb_target.is-open{display:flex;}
.apply_builder .cond_sub_tit{font-size:12px; font-weight:700; color:var(--c-text-2);}
.apply_builder .prop_subhead{margin-top:18px; font-size:14px; font-weight:700; color:var(--c-text-title);}
.apply_builder .prop_block--nested{margin-top:10px; padding:14px; border:1px solid var(--c-border); border-radius:10px; scroll-margin-top:0;}

/* right: 신청서 미리보기 (실제 구성) */
.apply_builder .col_preview{width:380px; flex:none; padding:16px; background:#fff; border:1px solid var(--c-border); border-radius:16px;}
.apply_builder .preview_head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #F3F4F6;}
.apply_builder .preview_tit{font-size:14px; font-weight:700; color:var(--c-text);}
.apply_builder .preview_note{font-size:11px; color:var(--c-muted);}
.apply_builder .preview_body{display:flex; flex-direction:column; gap:14px;}
.apply_builder .pv_top{display:flex; gap:12px;}
.apply_builder .pv_thumb{display:flex; align-items:center; justify-content:center; width:96px; height:96px; flex:none; font-size:12px; color:var(--c-muted); background:var(--c-page); border:1px solid var(--c-border); border-radius:12px;}
.apply_builder .pv_title{display:flex; flex-direction:column; gap:6px; min-width:0;}
.apply_builder .pv_title strong{font-size:14px; font-weight:700; color:var(--c-text); line-height:1.4;}
.apply_builder .pv_title span{font-size:12px; color:var(--c-text-3); line-height:1.5;}
.apply_builder .pv_info{display:flex; flex-direction:column; gap:8px; padding:14px; background:var(--c-page); border-radius:12px;}
.apply_builder .pv_info > div{display:flex; gap:10px; font-size:12px;}
.apply_builder .pv_info dt{width:64px; flex:none; color:var(--c-muted);}
.apply_builder .pv_info dd{color:var(--c-text-2);}
.apply_builder .pv_apply{width:100%;}
.apply_builder .pv_block{padding-top:14px; border-top:1px solid #F3F4F6;}
.apply_builder .pv_block_tit{margin-bottom:10px; font-size:13px; font-weight:700; color:var(--c-text);}
.apply_builder .pv_detail{font-size:12px; color:var(--c-text-2); line-height:1.6;}
.apply_builder .pv_back{width:100%;}


/* ===== 설정 카드 — 카드형 설정 패널 (회원가입/마이페이지 설정 등, 기획서 v2 31~32p) ===== */
.setting_card .block_tit{margin-bottom:10px; font-size:13px; font-weight:700; color:var(--c-text);}
.setting_card .block_tit--section{margin-bottom:14px; font-size:17px; font-weight:800; letter-spacing:-0.01em; color:var(--c-text);}
.setting_card .field_list{display:flex; flex-direction:column; gap:10px;}
.setting_card .field_row{display:flex; align-items:center; gap:8px;}
.setting_card .field_row .f_name{width:110px; flex:none; font-size:12px; font-weight:600; color:var(--c-text-2);}
.setting_card .field_row .input{flex:1; min-width:0;}
.setting_card .f_del{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border-radius:8px;}
.setting_card .f_del img{width:20px; height:20px; display:block;}
.setting_card .f_del:hover{background:#FEF2F2;}
.setting_card .prop_block--nested{margin-top:10px; padding:14px; border:1px solid var(--c-border); border-radius:10px;}

/* ===== 회원관리 일반회원 (기획서 v2 29p) — 사용권한 신청 대기 배너 ===== */
.member_wait{display:flex; align-items:center; gap:14px; padding:14px 18px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:12px;}
.member_wait p{font-size:14px; color:#92400E;}
.member_wait strong{font-weight:800;}
.member_wait a{font-size:13px; font-weight:700; color:#B45309; text-decoration:underline;}

/* 툴바 내 기간 구분자 */
.toolbar .f_tilde{font-size:12px; color:var(--c-muted);}


@media screen and (max-width: 1024px){
    /* sidebar becomes off-canvas */
    .sidebar{z-index:120; transform:translateX(-100%); transition:transform .3s ease;}
    .sidebar.open{transform:none; box-shadow:0 0 30px rgba(0,0,0,.15);}
    .header{left:0;}
    .container{margin-left:0;}
    .btn_menu{display:flex;}
    .dim{display:block;}

    /* dashboard: side panel drops below, charts stack */
    .dash{flex-direction:column; align-items:stretch;}
    .dash_main{width:100%;}
    .dash_side{width:100%;}
    .dash_grid2{grid-template-columns:1fr;}

    /* 폼 빌더: 3분할 → 세로 스택 */
    .apply_builder{flex-direction:column;}
    .apply_builder .col_step, .apply_builder .col_prop, .apply_builder .col_preview{width:100%;}
    .apply_builder .col_step{position:static;}
}


@media screen and (max-width: 768px){
    .header{padding:12px 16px;}
    .header .greeting{display:none;}          /* hide long greeting on small screens */
    .header .search input{width:120px;}
    .content{padding:16px; gap:12px;}
    .footer{padding:16px;}
    .ai_fab{right:16px; bottom:16px; width:46px; height:46px;}

    /* style-guide page */
    .guide{padding:24px 16px 64px;}
    .comp_demo{padding:18px 14px;}
    .filter .filter_item .input, .filter .filter_item .search_field{width:100%;}
    .filter .filter_item{flex:1 1 100%;}
    .filter .filter_actions{margin-left:0; width:100%;}

    /* dashboard: single-column stats, donut stacks */
    .stat_grid{grid-template-columns:1fr;}
    .donut_wrap{flex-direction:column; align-items:flex-start;}

    /* 폼 화면: 2열 → 1열 */
    .form_grid2{grid-template-columns:1fr;}
    .radio_grid{flex-direction:column;}
}