/* ===== 모두의 토론회 독립 퍼블리싱 시안 (ipmarket 톤) =====
   prefix: mt-  (통폐합 공통 CSS와 충돌 방지)
   color : 보라 #6B4FBB → 빨강 #E63946 그라데이션
*/
:root{
  --mt-purple:#6B4FBB;
  --mt-purple-d:#3a1c74;
  --mt-magenta:#8b3a9f;
  --mt-red:#E63946;
  --mt-blue:#2958ff;
  --mt-green:#47a44b;
  --mt-ink:#212529;
  --mt-gray:#6b7280;
  --mt-line:#e5e7eb;
  --mt-bg:#f7f7fb;
  --mt-grad:linear-gradient(135deg,#6B4FBB 0%,#E63946 100%);
  --mt-grad-d:linear-gradient(135deg,#3a1c74 0%,#8b3a9f 100%);
  --mt-radius:14px;
  --mt-max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
body.mt{font-family:"Noto Sans KR","Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--mt-ink);background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}

/* ===== GNB ===== */
.mt-gnb{position:sticky;top:0;z-index:9999;background:#fff;width:100%} /* 2026-06-02 */
.nav-wid{position:absolute; left: 50% !important;transform: translateX(-50%) !important;top:0; background-color:#fff; width:100%;max-width:var(--mt-max);margin:0 auto;display:flex;align-items:center;gap:2rem;height:74px;padding:0 2rem;border-bottom:1px solid var(--mt-line);/* padding-top: 15px; */} /* 2026-06-02 */
.mt-gnb-open h1 {padding-top:17px;}
.more-open{display:none;border:0;background:transparent;padding:0;cursor:pointer} /* 2026-06-02 */
.mt-gnb h1.mt-brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.mt-gnb h1 .mt-brand-logo{display:inline-block;line-height:0}
.mt-gnb h1 .mt-site-logo{display:block;height:40px;width:40px;max-width:40px}
.mt-gnb h1 .mt-brand-tit{font-size:1.35rem;font-weight:800;line-height:1.2;white-space:nowrap}
.mt-gnb h1 .mt-brand-tit b{font-family: 대한민국정부상징체, GovernmentKR, sans-serif;background:var(--mt-grad);-webkit-background-clip:text;background-clip:text;color:rgb(89,86,86);font-weight: normal;}
.mt-nav{margin-left:auto;display:flex;align-items:center;gap:2.4rem}
.mt-menu{display:flex;gap:2.4rem;list-style:none}
.mt-menu>li{position:relative;padding:26px 0}
.mt-menu>li>span{font-weight:700;font-size:1.02rem;cursor:default}
.mt-menu>li:hover>span{color:var(--mt-purple)}
.mt-depth2{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:170px;
  background:#fff;border:1px solid var(--mt-line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.1);
  display:none;overflow:hidden}
.mt-menu>li:hover .mt-depth2{display:block}
.mt-depth2 li a{display:block;padding:.8rem 1rem;color:var(--mt-gray);font-size:.95rem;text-align:center}
.mt-depth2 li a:hover{background:#f3f0fb;color:var(--mt-purple);font-weight:600}
.mt-login{display:flex;gap:.6rem}
.mt-btn-login,.mt-btn-join{padding:.5rem 1.1rem;border-radius:9px;font-weight:700;font-size:.92rem}
.mt-btn-login{border:1.5px solid var(--mt-purple);color:var(--mt-purple)}
.mt-btn-join{border:1.5px solid var(--mt-purple);color:var(--mt-purple)}

/* ===== HERO ===== */
.mt-hero{position:relative;background-image: url('../images/mt-hero-inner_img_v1.png');background-size: cover;background-position: center top !important;background-repeat: no-repeat;color: #212529 !important;overflow:hidden;width: 100%;min-width: 400px;min-height: 215px;height: 580px;padding-top: 40px !important;}
.mt-hero::before {display: none;}
.mt-hero-inner {position: relative;z-index: 2; /* 텍스트와 이미지 컨텐츠가 오버레이 위로 올라오도록 설정 */max-width: var(--mt-max);margin: 0 auto;padding: 64px 2rem 110px;display: flex;align-items: center;gap: 2rem;
}
.mt-hero-txt{flex:1}
.mt-hero-txt .mt-tag{display:inline-block;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;font-size:.85rem;margin-bottom:1.2rem}
.mt-hero-txt h2{font-size:2.5rem;font-weight:800;line-height:1.3;margin-bottom:1rem}
.mt-hero-txt p{font-size:1.1rem;opacity:.92;line-height:1.7}
.mt-hero-period{margin-top:1.6rem;display:inline-flex;gap:.6rem;align-items:center;
  background:rgba(255,255,255,.14);padding:.7rem 1.2rem;border-radius:10px;font-weight:600}
.mt-hero-img{flex:0 0 380px;height:300px;border-radius:18px;
  background:linear-gradient(160deg,#ffd86b,#ff7a7a);display:flex;align-items:center;justify-content:center;
  background-image: url('../images/mt_hero_img_v1.png');
  color:#fff;font-size:1rem;opacity:.92}

/* ===== 카드 (히어로 하단 겹침) ===== */
.mt-cards{max-width:var(--mt-max);margin:-20px auto 0;padding:0 2rem;position:relative;z-index:5;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
.mt-card{background:#fff;border-radius:var(--mt-radius);box-shadow:0 14px 40px rgba(40,30,90,.13);
  padding:1.6rem;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s,box-shadow .2s;border-top:4px solid transparent}
.mt-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(40,30,90,.2)}
.mt-card > div {display: grid;grid-template-columns: auto 1fr;align-items: start;column-gap: 15px;row-gap: 2px;}
.mt-card.c1{border-top-color:var(--mt-purple)}
.mt-card.c2{border-top-color:var(--mt-magenta)}
.mt-card.c3{border-top-color:var(--mt-red)}
.mt-card .mt-card-ic{grid-row: 1 / 3 !important;width:46px;height:46px;margin: 0 !important;border-radius:12px;background:#f3f0fb;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;padding:6px;overflow:hidden}
.mt-card .mt-card-ic img{width:100%;height:100%;object-fit:contain;display:block}
.mt-card h3{margin: 0 !important;grid-column: 2 !important;font-size: 1.5rem !important;white-space: nowrap !important;}
.mt-card p{color:var(--mt-gray);font-size:1.2rem}
.mt-card .mt-more{margin-top:1rem;color:var(--mt-purple);font-weight:700;font-size:.9rem}

/* ===== 섹션 공통 ===== */
.mt-sec{max-width:var(--mt-max);margin:0 auto;padding:70px 2rem}
.mt-sec-h{text-align:center;margin-bottom:2.4rem}
.mt-sec-h h2{font-size:1.9rem;font-weight:800}
.mt-sec-h h2 em{font-style:normal;color:var(--mt-purple)}
.mt-sec-h p{color:var(--mt-gray);margin-top:.6rem}

/* ===== 온라인 토론 ===== */
.mt-topic-banner{background-image: url('../images/mt_topic_banner.png');background-size: cover;background-position: center center;background-repeat: no-repeat;color:#fff;border-radius:18px;padding:48px;text-align:center;margin-bottom:2rem;margin-top: 40px;}
.mt-topic-banner h2{font-size:2rem;font-weight:800;margin-bottom:.8rem;color: rgb(0, 0, 0);}
.mt-topic-banner .mt-line{width:60px;height:3px;background:rgba(255,255,255,.7);margin:1rem auto}
.mt-topic-banner p{opacity:.9}
.mt-topic-title{background:#fff;border:1px solid var(--mt-line);border-radius:14px;padding:2rem}
.mt-topic-title h3{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:1.6rem;
  display:inline-block;background:#eef0ff;color:var(--mt-purple);padding:.6rem 1.4rem;border-radius:10px}
.mt-prog-row{display:flex;gap:2rem;margin:1rem 0 1.6rem}
.mt-prog{flex:1}
.mt-prog .mt-prog-lbl{font-size:.9rem;color:var(--mt-gray);margin-bottom:.4rem;display:flex;justify-content:space-between}
.mt-prog .mt-prog-lbl b{color:var(--mt-purple)}
.mt-prog .mt-bar{height:12px;background:#eee;border-radius:999px;overflow:hidden}
.mt-prog .mt-bar i{display:block;height:100%;background:var(--mt-grad)}
.mt-prog.green .mt-bar i{background:linear-gradient(135deg,#2e8540,#47a44b)}
.mt-topic-body{border:1px solid var(--mt-line);border-radius:10px;padding:1.6rem;color:#444;line-height:1.9;margin:1.4rem 0}
.mt-kw{margin-top:1rem;color:var(--mt-gray);font-size:.9rem}
.mt-kw b{color:var(--mt-purple)}
.mt-vote{display:flex;gap:1rem;justify-content:center;margin:1.8rem 0}
.mt-vote button{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:1rem 2rem;border:1.5px solid var(--mt-line);background:#fff;border-radius:12px;cursor:pointer;font-weight:700}
.mt-vote button .ic{font-size:1.4rem}
.mt-vote .up:hover{border-color:var(--mt-purple);color:var(--mt-purple)}
.mt-vote .down:hover{border-color:var(--mt-red);color:var(--mt-red)}


.mt-plan-poster{width: 100%;aspect-ratio: 1263 / 1786;height: auto;margin: 0 auto;min-width: 400px;min-height: 685px;background-image: url('../images/mt_plan_poster.jpg');background-size: contain;background-position: center;background-repeat: no-repeat;position: relative;top: 0;}
.mt-plan-poster a {position: absolute;display: block;left: 50%;top: 82.8%;width: 28%;height: 6%;transform: translateX(-50%);z-index: 10;border: none !important;outline: none !important;}
/* intro.jsp */
.mt-intro-img-area{width: 100%;aspect-ratio: 1667 / 2854;height: auto;margin: 0 auto;min-width: 400px;min-height: 685px;background-image: url('../images/intro_img_v1.jpg');background-size: contain;background-position: center;background-repeat: no-repeat;position: relative;top: 0;}

/* 의견 */
.mt-opinion-write{display:flex;gap:1rem;align-items:flex-start;margin:2rem 0 1rem}
.mt-opinion-write .lbl{flex:0 0 70px;font-weight:800;text-align:center;padding-top:.6rem}
.mt-opinion-write textarea{flex:1;min-height:80px;border:1px solid var(--mt-line);border-radius:10px;padding:.9rem;resize:vertical;font-family:inherit}
.mt-opinion-write .save{flex:0 0 110px;background:var(--mt-grad);color:#fff;border:none;border-radius:10px;font-weight:800;cursor:pointer}
.mt-opinion-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--mt-ink);padding-bottom:.7rem;margin-top:1.6rem}
.mt-opinion-head .cnt b{color:var(--mt-purple)}
.mt-opinion-head .sort a{color:var(--mt-gray);font-size:.9rem;margin-left:.8rem}
.mt-opinion-head .sort a.on{color:var(--mt-purple);font-weight:700}
.mt-opinion-list{list-style:none}
.mt-opinion-list li{padding:1.1rem 0;border-bottom:1px solid var(--mt-line);display:flex;justify-content:space-between;gap:1rem}
.mt-opinion-list .who{font-weight:700;font-size:.92rem;margin-bottom:.3rem}
.mt-opinion-list .who span{color:var(--mt-gray);font-weight:400;margin-left:.5rem;font-size:.85rem}
.mt-opinion-list .txt{color:#444}
.mt-opinion-list .react{flex:0 0 120px;text-align:right;color:var(--mt-gray);font-size:.9rem}
.mt-opinion-list .react b{color:var(--mt-purple)}

/* ===== 푸터 ===== */
.mt-footer{background:#2a2230;color:#cfc8d6;margin-top:60px;padding:40px 2rem;text-align:center;font-size:.88rem}
.mt-footer .mt-flinks{display:flex;gap:1.4rem;justify-content:center;margin-bottom:1rem}
.mt-footer .mt-flinks a:first-child{color:#fff;font-weight:700}

/* ===== 모달(참가신청) ===== */
.mt-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:10000}
.mt-modal{background:#fff;border-radius:16px;width:640px;max-width:94vw;max-height:90vh;overflow:auto;padding:1.8rem 2rem 1.6rem}
.mt-modal h3{font-size:1.3rem;font-weight:800;margin:0 0 .2rem;padding-bottom:.8rem;border-bottom:2px solid #097c7c}
.mt-modal .desc{color:var(--mt-gray);font-size:.88rem;background:#f6f6fb;padding:.9rem 1rem;border-radius:8px;margin:1rem 0 1.4rem;line-height:1.6}

/* 폼 행 — label(좌, 고정폭) / field(우, flex) */
.mt-form-row{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid #f1f1f1;min-height:48px}
.mt-form-row > label{flex:0 0 130px;font-weight:700;font-size:.92rem;line-height:1.35}
.mt-form-row > label .req{color:var(--mt-red);margin-left:.15rem}
.mt-form-row > input,
.mt-form-row > select,
.mt-form-row > .mt-field{flex:1;min-width:0}
.mt-form-row input,
.mt-form-row select,
.mt-form-row textarea{border:1px solid var(--mt-line);border-radius:8px;padding:.55rem .7rem;font-family:inherit;font-size:.93rem}
.mt-form-row textarea{width:100%;resize:vertical;line-height:1.6}

/* 폼 마지막 행은 하단 구분선 제거 (모달 푸터 border-top과 중복되어 줄 2개로 보이는 것 방지) */
.mt-form-row:last-of-type{border-bottom:none}

/* 라벨이 위·필드가 아래(전폭) 배치 — textarea 등에서 사용 */
.mt-form-row--vstack{flex-direction:column;align-items:stretch;gap:.4rem;padding:.7rem 0}
.mt-form-row--vstack > label{flex:0 0 auto}
.mt-form-row--vstack > .mt-field,
.mt-form-row--vstack > textarea{flex:1 1 auto;width:100%}

/* 이메일 행 전용 — ID/도메인 input 균등하고 폭 충분히 */
.mt-field--email > input{flex:1 1 0;min-width:0}
.mt-field--email > select{flex:0 0 120px;max-width:120px}

/* 우측 컴포지트 셀 — 인증/이메일/라디오 등 복합 필드 */
.mt-field{display:flex;align-items:center;gap:.45rem;flex:1;min-width:0}
.mt-field--col{flex-direction:column;align-items:stretch;gap:.4rem}
.mt-field input,.mt-field select{flex:1;min-width:0}
.mt-field .mt-fixed{flex:0 0 auto}
.mt-field .at{color:#777;flex:0 0 auto;font-weight:600}

/* 인증하기 버튼 */
.mt-btn-auth{flex:0 0 auto;padding:.6rem 1.2rem;min-height:40px;background:#097c7c;color:#fff;border:1px solid #097c7c;border-radius:8px;font-weight:700;cursor:pointer;white-space:nowrap;font-size:.9rem;line-height:1.2;box-sizing:border-box}
.mt-btn-auth:hover{background:#076666;border-color:#076666}

/* 라디오 — inline 그룹 (성별/찬반) */
.mt-radio-group{display:flex;flex-wrap:wrap;gap:.2rem .9rem;flex:1;align-items:center}
.mt-radio-group--col{flex-direction:column;align-items:flex-start;gap:.7rem}
.mt-radio-group label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.93rem;font-weight:500;margin:0;line-height:1.4}
.mt-radio-group label input[type=radio]{margin:0;flex:0 0 auto;width:auto;border:none;padding:0}
.mt-radio-group .mt-note{color:#777;font-size:.82rem;width:100%;margin-top:.3rem}

/* 비필수 라벨 (선택 표기) */
.mt-form-row .mt-opt{font-weight:400;color:#999;font-size:.82rem;display:block;margin-top:.1rem}

/* 모달 푸터 버튼 */
.mt-modal-btns{display:flex;gap:.6rem;justify-content:center;margin-top:1.6rem;padding-top:1.2rem;}
.mt-modal-btns .ok{background:#097c7c;color:#fff;border:none;padding:.75rem 2.2rem;border-radius:9px;font-weight:800;cursor:pointer;font-size:.98rem}
.mt-modal-btns .ok:hover{background:#076666}
.mt-modal-btns .cancel{border:1px solid var(--mt-line);background:#fff;padding:.75rem 1.8rem;border-radius:9px;cursor:pointer;font-size:.95rem;color:#444}

/* readonly 필드 */
.mt-modal input[readonly]{background:#f4f6fa;color:#666;cursor:not-allowed}

@media(max-width:900px){
  .mt-cards{grid-template-columns:1fr;margin-top:-40px}
  .mt-hero-inner{flex-direction:column;padding-bottom:80px}
  .mt-hero-img{flex:0 0 auto;width:100%}
  .mt-nav{display:none}
  .mt-prog-row{flex-direction:column;gap:1rem}

  .more-open{display:inline-block;width:30px;position:absolute;right:2rem;top:20px;z-index:2} /* 2026-06-02 */
  .more-open>span{display:block;margin:5px 0;width:30px;height:4px;background:#000;transition:transform .2s,opacity .2s} /* 2026-06-02 */

  .mt-gnb.mt-gnb-open .nav-wid{flex-wrap:wrap;height:auto;align-items:center}
  .mt-gnb.mt-gnb-open .mt-brand{flex:1;min-width:0}
  .mt-gnb.mt-gnb-open .mt-nav{
    display:flex;flex-direction:column;align-items:stretch;
    flex-basis:100%;width:100%;order:3;
    margin:0;padding:0 0 1.2rem;gap:0;
    border-top:1px solid var(--mt-line)
  }
  .mt-gnb.mt-gnb-open .mt-menu{flex-direction:column;gap:0;width:100%}
  .mt-gnb.mt-gnb-open .mt-menu>li{padding:0;border-bottom:1px solid #f1f1f1}
  .mt-gnb.mt-gnb-open .mt-menu>li>span{
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 0;cursor:pointer
  }
  .mt-gnb.mt-gnb-open .mt-menu>li>span::after{
    content:'';width:8px;height:8px;border-right:2px solid var(--mt-gray);
    border-bottom:2px solid var(--mt-gray);transform:rotate(45deg);transition:transform .2s
  }
  .mt-gnb.mt-gnb-open .mt-menu>li.mt-cat-open>span::after{transform:rotate(-135deg);margin-top:4px}
  .mt-gnb.mt-gnb-open .mt-menu>li:hover .mt-depth2{display:none}
  .mt-gnb.mt-gnb-open .mt-menu>li.mt-cat-open .mt-depth2{display:block}
  .mt-gnb.mt-gnb-open .mt-depth2{
    position:static;transform:none;min-width:0;
    border:none;border-radius:0;box-shadow:none;
    padding:0 0 .6rem;background:#faf9fc
  }
  .mt-gnb.mt-gnb-open .mt-depth2 li a{text-align:left;padding:.65rem 1rem .65rem 1.25rem}
  .mt-gnb.mt-gnb-open .mt-login{
    justify-content:center;padding-top:1rem;margin-top:.25rem;
    border-top:1px solid var(--mt-line)
  }

  .mt-gnb.mt-gnb-open .more-open>span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .mt-gnb.mt-gnb-open .more-open>span:nth-child(2){opacity:0}
  .mt-gnb.mt-gnb-open .more-open>span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}