@charset "utf-8";

/* ===== 마이페이지 — 문의하기(1:1) — Figma 1119:8111 (teal 액센트) =====
   meet-place.css 컨벤션 준수 (720px → Figma 1.92×). prefix: miq-  */
.miq-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* ===== 공용 헤더 — Figma 1119:7556 / 7739 / 7852 / 7966 ===== */
.miq-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.miq-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px;}
.miq-back img {width:38px; height:38px;}
.miq-head h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}
.miq-head-sp {flex:0 0 auto; width:54px;}
.miq-head-add {flex:0 0 auto; padding:8px 8px; font-size:21px; font-weight:700; color:var(--teal-2);}

/* ===== 본문 컨테이너 ===== */
.miq-body {flex:1; padding-bottom:190px;}

/* ===== 1:1 문의 배너 (teal/navy gradient) — Figma 1119:7712 ===== */
.miq-hero {position:relative; overflow:hidden; display:flex; flex-direction:column; gap:23px; padding:31px 35px 38px; background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 55%, #0F766E 100%);}
.miq-hero-top {display:flex; align-items:center; gap:23px;}
.miq-hero-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:85px; height:85px; border-radius:25px; background:rgba(255,255,255,.12); border:1.92px solid rgba(255,255,255,.18);}
.miq-hero-ic img {width:46px; height:46px;}
.miq-hero-tx {display:flex; flex-direction:column; gap:6px;}
.miq-hero-tx b {font-size:33px; font-weight:800; color:#fff;}
.miq-hero-tx span {font-size:21px; color:rgba(255,255,255,.55);}
.miq-hero-note {display:flex; align-items:flex-start; gap:14px; padding:18px 25px; border-radius:19px; background:rgba(255,255,255,.1); border:1.92px solid rgba(255,255,255,.18);}
.miq-hero-note img {flex:0 0 auto; width:27px; height:27px; margin-top:4px;}
.miq-hero-note p {font-size:21px; line-height:1.6; color:rgba(255,255,255,.7);}

/* ===== 내 문의 내역 진입 — Figma 1119:7563 ===== */
.miq-entry {display:flex; align-items:center; gap:23px; margin:27px 54px 0; padding:25px 29px; background:var(--mint); border:1.92px solid #CCFBF1; border-radius:19px;}
.churchro.dark-mode .miq-entry {border-color:var(--line);}
.miq-entry-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:73px; height:73px; border-radius:19px; background:var(--teal-2);}
.miq-entry-ic img {width:35px; height:35px;}
.miq-entry-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.miq-entry-tx b {font-size:25px; font-weight:700; color:var(--teal);}
.miq-entry-tx span {font-size:21px; color:var(--teal-2);}
.miq-entry-badge {flex:0 0 auto; padding:4px 17px; border-radius:38px; background:#DC2626; color:#fff; font-size:21px; font-weight:700;}

/* ===== 카테고리 그리드 — Figma 1119:7575 / 7577 ===== */
.miq-sec-title {margin:43px 27px 0; padding:0 27px; font-size:25px; font-weight:800; color:var(--ink);}
.miq-grid {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:15px; padding:25px 27px 0;}
.miq-cat {display:flex; flex-direction:column; gap:15px; padding:29px 25px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; box-shadow:0 1.92px 5.76px rgba(15,23,42,.05);}
.miq-cat-ic {display:flex; align-items:center; justify-content:center; width:85px; height:85px; border-radius:23px;}
.miq-cat-ic img {width:42px; height:42px;}
.miq-cat b {font-size:25px; font-weight:700; color:var(--ink);}
.miq-cat small {font-size:19px; color:var(--sub);}
/* 카테고리 아이콘 배경 톤 */
.miq-cat-ic.t-teal {background:#F0FDFA;} .miq-cat-ic.t-blue {background:#EFF6FF;} .miq-cat-ic.t-amber {background:#FFFBEB;}
.miq-cat-ic.t-green {background:#F0FDF4;} .miq-cat-ic.t-violet {background:#F5F3FF;} .miq-cat-ic.t-red {background:#FEF2F2;}
.churchro.dark-mode .miq-cat-ic.t-teal {background:#16242B;} .churchro.dark-mode .miq-cat-ic.t-blue {background:#16202E;}
.churchro.dark-mode .miq-cat-ic.t-amber {background:#2A2416;} .churchro.dark-mode .miq-cat-ic.t-green {background:#16241B;}
.churchro.dark-mode .miq-cat-ic.t-violet {background:#1F1B2E;} .churchro.dark-mode .miq-cat-ic.t-red {background:#3A1D1D;}

/* ===== 자주 묻는 질문 (아코디언) — Figma 1119:7647 ===== */
.miq-faq {margin-top:43px; background:var(--card); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}
.miq-faq-title {padding:23px 35px 12px; font-size:23px; font-weight:800; color:var(--ink);}
.miq-faq-item {border-top:1.92px solid var(--line);}
.miq-faq-q {display:flex; align-items:flex-start; gap:15px; width:100%; padding:27px 35px; background:none; text-align:left;}
.miq-faq-badge {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:19px; background:var(--teal-2); color:#fff; font-size:19px; font-weight:800;}
.miq-faq-text {flex:1; min-width:0; padding-top:6px; font-size:23px; font-weight:600; color:var(--ink);}
.miq-faq-chev {flex:0 0 auto; width:28px; height:28px; margin-top:6px; transition:transform .2s ease;}
.miq-faq-item.on .miq-faq-chev {transform:rotate(180deg);}
.miq-faq-a {margin:0 35px 27px 88px; padding:18px 23px; border-left:5.76px solid var(--teal-2); border-radius:15px; background:var(--mint); font-size:23px; line-height:1.7; color:var(--teal);}

/* ===== 폼 (문의 작성) — Figma 1119:7745 ===== */
.miq-form {flex:1; display:flex; flex-direction:column; padding:0 0 200px;}
.miq-field {display:flex; flex-direction:column; gap:13px; padding:0 35px; margin-top:34px;}
.miq-field:first-child {margin-top:34px;}
.miq-label {display:flex; align-items:center; gap:8px; font-size:25px; font-weight:600; color:var(--body);}
.miq-label i {color:#DC2626; font-style:normal; font-size:23px;}
.miq-label small {font-size:21px; font-weight:400; color:var(--sub);}

/* 셀렉트 — Figma 1119:7752 */
.miq-select {position:relative;}
.miq-select select {appearance:none; -webkit-appearance:none; width:100%; padding:25px 70px 25px 29px; background:var(--snow); border:1.92px solid var(--line); border-radius:19px; font-size:25px; color:var(--ink);}
.miq-select img {position:absolute; right:24px; top:50%; transform:translateY(-50%); width:27px; height:27px; pointer-events:none;}

/* 인풋 / 텍스트에어리어 — Figma 1119:7763 / 7771 */
.miq-input {width:100%; padding:25px 29px; background:var(--card); border:1.92px solid var(--teal-2); border-radius:19px; font-size:27px; color:var(--ink);}
.miq-input::placeholder {color:var(--sub);}
.miq-textarea {width:100%; min-height:259px; padding:30px 29px; background:var(--card); border:1.92px solid var(--teal-2); border-radius:19px; font-size:25px; line-height:1.7; color:var(--ink); resize:vertical;}
.miq-textarea::placeholder {color:var(--sub);}
.miq-count {text-align:right; font-size:21px; color:var(--sub);}

/* 첨부 파일 행 — Figma 1119:7784 */
.miq-attach {display:flex; align-items:center; gap:15px; padding:19px 25px; background:var(--snow); border:1.92px solid var(--line); border-radius:15px;}
.miq-attach-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:61px; height:61px; border-radius:15px; background:#EFF6FF;}
.churchro.dark-mode .miq-attach-ic {background:#16202E;}
.miq-attach-ic.sm {width:54px; height:54px; border-radius:13px;}
.miq-attach-ic img {width:31px; height:31px;}
.miq-attach-ic.sm img {width:27px; height:27px;}
.miq-attach-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.miq-attach-tx b {font-size:23px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.miq-attach-tx span {font-size:19px; color:var(--sub);}
.miq-attach-size {flex:0 0 auto; font-size:19px; color:var(--sub);}
.miq-attach-x {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:34px; line-height:1; color:var(--sub);}

/* 드롭존 (파일 추가 버튼) — Figma 1119:7798 */
.miq-dropzone {display:flex; flex-direction:column; align-items:center; gap:11px; width:100%; padding:35px; background:none; border:3.84px dashed var(--mute); border-radius:19px;}
.miq-dropzone img {width:54px; height:54px;}
.miq-dropzone b {font-size:23px; font-weight:600; color:var(--sub);}
.miq-dropzone small {font-size:19px; color:var(--mute);}

/* 개인정보 동의 — Figma 1119:7805 */
.miq-agree {display:flex; align-items:flex-start; gap:17px; margin:34px 35px 0; padding:23px 27px; background:var(--snow); border:1.92px solid var(--line); border-radius:19px; cursor:pointer;}
.miq-agree input {position:absolute; opacity:0; width:0; height:0;}
.miq-check {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--card); border:1.92px solid var(--mute);}
.miq-check img {width:23px; height:23px; opacity:0;}
.miq-check.on {background:var(--teal-2); border-color:var(--teal-2);}
.miq-check.on img {opacity:1;}
.miq-agree-tx {flex:1; font-size:23px; line-height:1.55; color:var(--body);}
.miq-agree-tx em {font-style:normal; font-weight:700; color:var(--teal-2); text-decoration:underline;}

/* 접수 버튼 바 — Figma 1119:7812 */
.miq-submitbar {position:fixed; left:50%; bottom:123px; transform:translateX(-50%); z-index:35; width:720px; max-width:100%; padding:25px 27px; background:var(--card); border-top:1.92px solid var(--line);}
.miq-submit {display:flex; align-items:center; justify-content:center; gap:13px; width:100%; padding:27px; border-radius:19px; background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%); color:#fff; font-size:29px; font-weight:700;}
.miq-submit img {width:33px; height:33px;}
.miq-submit:disabled {opacity:.5;}

/* ===== 탭 (문의 내역) — Figma 1119:7860 ===== */
.miq-tabs {position:sticky; top:97px; z-index:15; display:flex; background:var(--card); border-bottom:3.84px solid var(--line);}
.miq-tab {flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:9px; padding:21px 8px; background:none; color:var(--sub); font-size:25px; font-weight:600;}
.miq-tab.on {color:var(--teal); font-weight:800;}
.miq-tab.on::after {content:''; position:absolute; left:0; right:0; bottom:-3.84px; height:3.84px; background:var(--teal-2);}
.miq-tab-cnt {font-size:21px; font-weight:800; color:var(--sub);}
.miq-tab.on .miq-tab-cnt {color:var(--teal);}
.miq-tab-cnt.badge {display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:2px 11px; border-radius:19px; background:#DC2626; color:#fff !important;}

/* ===== 문의 카드 목록 — Figma 1119:7873 ===== */
.miq-list {flex:1; padding-bottom:190px;}
.miq-card {display:flex; flex-direction:column; gap:8px; padding:27px 35px; background:var(--card); border-bottom:1.92px solid var(--line);}
.miq-card-top {display:flex; align-items:center; gap:12px;}
.miq-card-date {margin-left:auto; font-size:19px; color:var(--sub);}
.miq-card-title {padding-top:6px; font-size:27px; font-weight:700; color:var(--ink);}
.miq-card-excerpt {font-size:23px; line-height:1.55; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.miq-card-foot {display:flex; align-items:center; justify-content:space-between; padding-top:6px;}
.miq-card-status {display:flex; align-items:center; gap:12px;}
.miq-card-chev {width:29px; height:29px;}
.miq-new {padding:2px 13px; border-radius:38px; background:#DC2626; color:#fff; font-size:19px; font-weight:700;}

/* 카테고리 배지 — Figma 1119:7877 (톤별 색상) */
.miq-cat-badge {padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700;}
.miq-cat-badge.c-teal {background:#F0FDFA; color:var(--teal);}
.miq-cat-badge.c-violet {background:#F5F3FF; color:#7C3AED;}
.miq-cat-badge.c-green {background:#F0FDF4; color:#16A34A;}
.miq-cat-badge.c-blue {background:#EFF6FF; color:#1D4ED8;}
.miq-cat-badge.c-amber {background:#FFFBEB; color:#D97706;}
.churchro.dark-mode .miq-cat-badge.c-teal {background:#16242B;}
.churchro.dark-mode .miq-cat-badge.c-violet {background:#1F1B2E; color:#C4B5FD;}
.churchro.dark-mode .miq-cat-badge.c-green {background:#16241B; color:#86EFAC;}
.churchro.dark-mode .miq-cat-badge.c-blue {background:#16202E; color:#93C5FD;}
.churchro.dark-mode .miq-cat-badge.c-amber {background:#2A2416; color:#FCD34D;}

/* 상태 배지 — Figma 1119:7889 / 7909 / 7927 / 7983 */
.miq-status {padding:4px 15px; border-radius:38px; font-size:19px; font-weight:700;}
.miq-status.s-done {background:#F0FDFA; color:var(--teal);}
.miq-status.s-review {background:#EFF6FF; color:#1D4ED8;}
.miq-status.s-wait {background:#FFFBEB; color:#D97706;}
.churchro.dark-mode .miq-status.s-done {background:#16242B;}
.churchro.dark-mode .miq-status.s-review {background:#16202E; color:#93C5FD;}
.churchro.dark-mode .miq-status.s-wait {background:#2A2416; color:#FCD34D;}

/* ===== 문의 상세 — Figma 1119:7972 ===== */
.miq-detail {flex:1; padding-bottom:160px;}
.miq-dsec {padding:35px; background:var(--card); border-bottom:1.92px solid var(--line);}
.miq-d-top {display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.miq-d-date {font-size:21px; color:var(--sub);}
.miq-d-top .miq-status {margin-left:auto;}
.miq-d-title {padding-top:19px; font-size:31px; font-weight:800; line-height:1.4; color:var(--ink);}
.miq-d-divider {height:1.92px; margin:19px 0; background:var(--line);}
.miq-d-body {display:flex; flex-direction:column; gap:23px;}
.miq-d-body p {font-size:25px; line-height:1.8; color:var(--body);}
.miq-d-attach-label {margin-top:23px; margin-bottom:12px; font-size:21px; font-weight:700; color:var(--sub);}

/* 처리 현황 stepper — Figma 1119:8006 / 8009 */
.miq-status-sec {background:var(--snow);}
.miq-d-seclabel {margin-bottom:23px; font-size:21px; font-weight:700; color:var(--sub);}
.miq-steps {display:flex; flex-direction:column;}
.miq-step {position:relative; display:flex; gap:23px; padding-bottom:23px;}
.miq-step:last-child {padding-bottom:0;}
.miq-step:not(:last-child)::before {content:''; position:absolute; left:23px; top:46px; bottom:0; width:3.84px; background:var(--line);}
.miq-step-dot {flex:0 0 auto; z-index:1; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:23px; background:var(--teal-2);}
.miq-step-dot img {width:23px; height:23px;}
.miq-step-tx {display:flex; flex-direction:column; gap:4px; padding-top:5px;}
.miq-step-tx b {font-size:23px; font-weight:700; color:var(--teal);}
.miq-step-tx span {font-size:19px; color:var(--sub);}

/* 공식 답변 — Figma 1119:8039 */
.miq-answer {padding:40px 35px 35px; background:var(--mint); border-top:5.76px solid var(--teal-2); border-bottom:1.92px solid var(--line);}
.miq-answer-head {display:flex; align-items:center; gap:19px; margin-bottom:23px;}
.miq-answer-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; border-radius:35px; background:linear-gradient(135deg, #0F766E 0%, #0D9488 100%);}
.miq-answer-ic img {width:35px; height:35px;}
.miq-answer-who {display:flex; flex-direction:column; gap:2px;}
.miq-answer-who b {font-size:25px; font-weight:700; color:var(--teal);}
.miq-answer-who span {font-size:19px; color:var(--teal-2);}
.miq-answer-date {margin-left:auto; font-size:19px; color:var(--teal-2);}
.miq-answer-body {display:flex; flex-direction:column; gap:19px;}
.miq-answer-body p {font-size:25px; line-height:1.8; color:var(--teal);}
.miq-answer-body strong {font-weight:700;}
.miq-answer-divider {height:1.92px; margin:23px 0; background:#CCFBF1;}
.churchro.dark-mode .miq-answer-divider {background:var(--line);}
.miq-answer-acts {display:flex; gap:15px;}
.miq-act-out, .miq-act-fill {flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:21px; border-radius:19px; font-size:23px; font-weight:700;}
.miq-act-out {background:var(--mint); border:1.92px solid var(--teal-2); color:var(--teal);}
.miq-act-fill {background:var(--teal-2); color:#fff;}
.miq-act-out img, .miq-act-fill img {width:27px; height:27px;}

/* 도움 평가 — Figma 1119:8074 */
.miq-helpful {position:sticky; bottom:123px; z-index:15; display:flex; align-items:center; gap:19px; padding:25px 35px; background:var(--card); border-top:1.92px solid var(--line);}
.miq-helpful-q {flex:1; font-size:23px; font-weight:600; color:var(--body);}
.miq-vote {flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:13px 29px; border-radius:38px; border:1.92px solid var(--line); background:var(--snow); color:var(--body); font-size:23px; font-weight:700;}
.miq-vote img {width:27px; height:27px;}
.miq-vote.up.on {background:var(--mint); border-color:var(--teal-2); color:var(--teal);}
.miq-vote.down.on {background:#FEF2F2; border-color:#DC2626; color:#DC2626;}
.churchro.dark-mode .miq-vote.down.on {background:#3A1D1D; color:#FCA5A5;}

/* ===== 하단 탭바 — Figma BottomNav ===== */
.miq-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.miq-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.miq-nav .tab img {width:42px; height:42px;}
.miq-nav .tab.on {color:var(--teal);}
.miq-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.miq-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.miq-nav .tab-fab .fab img {width:48px; height:48px;}