/* =====================================================================
   약국 개국/폐업 상담코너 공통 스타일 (default.asp 디자인 토큰 기준)
   ===================================================================== */
:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#1b2333; --muted:#6b7689;
  --line:#e3e8f0; --brand:#2f6df6; --brand-2:#1a48b8; --brand-soft:#eaf1ff;
  --mint:#12b886; --mint-2:#0b8f68; --mint-soft:#e6f8f1;
  --coral:#f0645a; --coral-2:#c9433a; --coral-soft:#fff0ee;
  --amber:#f59f00; --amber-soft:#fff6e0;
  --violet:#7048e8; --violet-2:#5032c0; --violet-soft:#f1edff;
  --danger:#d9534f; --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:"Malgun Gothic","맑은 고딕",-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55; overflow-x:hidden;
}
a{color:inherit}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}
.wrap.wide{max-width:1180px}

/* 상단 타이틀 바 */
.top-header{
  height:46px; background:#18181b; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 10px 0 14px; position:sticky; top:0; z-index:50;
}
.top-header .th-title{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.th-btn{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  background:#2d2d33; color:#fff; border:0; border-radius:8px;
  padding:8px 14px; font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s;
}
.th-btn:hover{background:#3a3a42}
.th-btn svg{width:16px; height:16px; flex:none}

/* 페이지 머리 */
.phead{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff; padding:24px 0 54px; position:relative; overflow:hidden;
}
.phead::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  right:-90px; top:-120px; background:rgba(255,255,255,.09);
}
.phead.open{background:linear-gradient(135deg,var(--mint) 0%,var(--mint-2) 100%)}
.phead.close{background:linear-gradient(135deg,var(--coral) 0%,var(--coral-2) 100%)}
.phead.etc{background:linear-gradient(135deg,var(--violet) 0%,var(--violet-2) 100%)}
.phead h1{margin:0 0 4px; font-size:22px; letter-spacing:-.6px}
.phead p{margin:0; opacity:.88; font-size:13px}
.pbody{margin-top:-34px; position:relative; z-index:2; padding-bottom:30px}

/* 카드 */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 20px; margin-bottom:14px; box-shadow:0 6px 20px rgba(20,40,90,.06);
}
.card h2{
  margin:0 0 14px; font-size:16px; padding-bottom:10px;
  border-bottom:2px solid var(--brand-soft); display:flex; align-items:center; gap:8px;
}
.card h2 .badge{background:var(--brand); color:#fff; font-size:11px; padding:2px 8px; border-radius:20px; font-weight:normal}

/* 폼 */
.fld{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.fld label,.fld .lb{font-size:12px; color:var(--muted); font-weight:bold}
.fld label .req{color:var(--coral)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
input[type=text],input[type=tel],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:#fff; color:var(--ink); font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,#8a94a6 50%),linear-gradient(135deg,#8a94a6 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px; background-size:5px 5px; background-repeat:no-repeat; padding-right:30px}
textarea{height:auto; min-height:160px; padding:12px; line-height:1.65; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.hint{font-size:12px; color:var(--muted); margin-top:2px}
.cnt{font-size:12px; color:var(--muted); text-align:right}

/* 세그먼트(라디오) */
.seg{display:flex; background:#eef1f6; border-radius:12px; padding:4px; gap:4px}
.seg label{flex:1; margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{
  display:block; text-align:center; padding:10px 0; border-radius:9px; font-size:14px; font-weight:700;
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.seg input:checked + span{background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(20,40,90,.12)}
.seg.type input[value=OPEN]:checked + span{background:var(--mint); color:#fff}
.seg.type input[value=CLOSE]:checked + span{background:var(--coral); color:#fff}
.seg.type input[value=ETC]:checked + span{background:var(--violet); color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--brand)}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:48px; padding:0 20px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:15px; font-weight:700; cursor:pointer;
  font-family:inherit; text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn:hover{box-shadow:0 6px 16px rgba(20,40,90,.12)}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-2)}
.btn.mint{background:linear-gradient(135deg,var(--mint),var(--mint-2)); border:0; color:#fff}
.btn.coral{background:linear-gradient(135deg,var(--coral),var(--coral-2)); border:0; color:#fff}
.btn.violet{background:linear-gradient(135deg,var(--violet),var(--violet-2)); border:0; color:#fff}
.btn.sm{height:36px; padding:0 14px; font-size:13px; border-radius:9px}
.btn.ghost{background:#f7f9fc}
.btn.danger{color:var(--danger)}
.btn[disabled]{opacity:.6; pointer-events:none}
.btns{display:flex; gap:8px; flex-wrap:wrap}

/* 동의 */
.agree{background:#f7f9fc; border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.agree summary{cursor:pointer; font-size:12px; color:var(--brand); margin-top:6px}
.agree table{width:100%; border-collapse:collapse; font-size:12px; margin-top:8px}
.agree th,.agree td{border:1px solid var(--line); padding:6px 8px; text-align:left; background:#fff}
.agree th{background:#f0f3f8; width:30%; white-space:nowrap}
.chk{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; cursor:pointer}
.chk input{width:20px; height:20px; accent-color:var(--brand)}

/* 안내 박스 */
.note{
  padding:12px 14px; background:#fffaf0; border:1px solid #f2e2c2;
  border-radius:10px; font-size:12.5px; color:#6b5a33; line-height:1.7; margin-bottom:14px;
}
.info{
  padding:12px 14px; background:var(--brand-soft); border:1px solid #cfdcff;
  border-radius:10px; font-size:13px; color:#1d3f99; line-height:1.7; margin-bottom:14px;
}
.flash{
  padding:14px 16px; background:var(--mint-soft); border:1px solid #b7ecd8; color:#0b6b4f;
  border-radius:12px; font-size:14px; margin-bottom:14px; font-weight:600;
}

/* 첨부 선택 */
.fpick{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.fbtn{
  position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  height:38px; padding:0 14px; border-radius:10px; border:1px dashed #b9c6dd; background:#f7f9fc;
  font-size:13px; font-weight:700; color:var(--brand-2);
}
.fbtn svg{width:16px; height:16px}
.fbtn input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.fhelp{font-size:12px; color:var(--muted)}
.flist{list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:6px}
.flist li{display:flex; justify-content:space-between; gap:8px; background:#f7f9fc; border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font-size:13px}
.flist li .s{color:var(--muted); flex:none}
.flist li.bad{border-color:#f1cac8; background:#fff5f5; color:#b0352f}

/* 상태 / 유형 */
.st{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap}
.st::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.st-wait{background:var(--amber-soft); color:#b27200}
.st-done{background:var(--brand-soft); color:var(--brand-2)}
.st-end{background:#eef0f4; color:#6b7689}
.tp{display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; white-space:nowrap}
.tp-open{background:var(--mint-soft); color:var(--mint-2)}
.tp-close{background:var(--coral-soft); color:var(--coral-2)}
.tp-etc{background:var(--violet-soft); color:var(--violet-2)}
/* 주제 선택 카드 (기타상담) */
.topics{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.topics label{margin:0; cursor:pointer}
.topics input{position:absolute; opacity:0; pointer-events:none}
.topics .tc{
  display:flex; flex-direction:column; gap:2px; height:100%;
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.topics .tc b{font-size:14px}
.topics .tc small{font-size:12px; color:var(--muted); line-height:1.5}
.topics input:checked + .tc{border-color:var(--violet); background:var(--violet-soft); box-shadow:0 4px 14px rgba(112,72,232,.15)}
.topics input:checked + .tc b{color:var(--violet-2)}
.topics input:focus-visible + .tc{outline:2px solid var(--violet)}
.new{display:inline-block; font-size:10px; font-weight:800; color:#fff; background:var(--coral); padding:1px 6px; border-radius:10px; animation:pop 1.6s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* 상담 목록 */
.clist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.clist a{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.clist a:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,40,90,.10); border-color:#cdd8ea}
.clist .t{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; margin-bottom:6px}
.clist .t .tt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.clist .m{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); flex-wrap:wrap}
.empty{text-align:center; color:var(--muted); padding:36px 10px}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:6px}

/* 상담 정보 */
.meta{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; margin:0}
.meta dt{color:var(--muted)}
.meta dd{margin:0; font-weight:600}
.vhead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px}
.vhead h2{border:0; padding:0; margin:6px 0 0; font-size:18px; letter-spacing:-.4px; line-height:1.4}
details.more summary{cursor:pointer; font-size:12px; color:var(--brand); margin-top:10px}
details.more .meta{margin-top:10px}

/* 대화 */
.thread{display:flex; flex-direction:column; gap:14px; margin:4px 0 6px}
.msg{display:flex; flex-direction:column; max-width:86%}
.msg .who{font-size:12px; color:var(--muted); margin:0 4px 4px; display:flex; gap:6px; align-items:center}
.msg .who b{color:var(--ink)}
.msg .bubble{
  padding:12px 14px; border-radius:16px; font-size:14.5px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word; animation:bubble .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bubble{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.msg.me{align-self:flex-end; align-items:flex-end}
.msg.me .bubble{background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.msg.you{align-self:flex-start}
.msg.you .bubble{background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.you.staff .bubble{border-left:3px solid var(--mint)}
.msg .av{width:22px; height:22px; border-radius:50%; overflow:hidden; display:inline-block; background:#fff; border:1px solid var(--line)}
.msg .av img{width:100%; height:100%}
.msg.hidden .bubble{opacity:.45; text-decoration:line-through}
.files{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.msg.me .files{justify-content:flex-end}
.fchip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:5px 11px; font-size:12.5px;
}
.fchip svg{width:14px; height:14px; flex:none; color:var(--brand)}
.fchip .fn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px}
.fchip .fs{color:var(--muted); flex:none}
.thumb{display:block; width:100%}
.thumb img{display:block; max-width:220px; max-height:220px; border-radius:12px; border:1px solid var(--line); object-fit:cover}
.msg.me .thumb{text-align:right}
.msg.me .thumb img{margin-left:auto}
.ended{text-align:center; padding:16px; background:#f3f5f9; border-radius:12px; color:var(--muted); font-size:13px}

/* 탭/필터 (관리자) */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.tabs a{
  text-decoration:none; padding:8px 14px; border-radius:20px; background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--muted); display:inline-flex; gap:6px; align-items:center;
}
.tabs a .n{background:#eef1f6; color:var(--ink); border-radius:10px; padding:0 7px; font-size:11px}
.tabs a.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.tabs a.on .n{background:rgba(255,255,255,.2); color:#fff}
.search{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.search select{width:auto; min-width:110px}
.search input{flex:1; min-width:160px}
table.grid{width:100%; border-collapse:collapse; font-size:13px; background:#fff}
table.grid th,table.grid td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:middle}
table.grid thead th{background:#f3f6fb; color:#41506b; font-size:12px; white-space:nowrap}
table.grid tr.unread td{background:#fffdf3}
table.grid td.c{text-align:center}
table.grid a.tl{text-decoration:none; font-weight:700}
table.grid a.tl:hover{color:var(--brand)}
.gridbox{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.pager{display:flex; justify-content:center; gap:4px; margin:16px 0}
.pager a,.pager span{min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; text-decoration:none; font-size:13px; border:1px solid var(--line); background:#fff}
.pager span.on{background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700}
.side{display:grid; grid-template-columns:1fr 300px; gap:14px; align-items:start}

/* 관리자 메뉴 */
.anav{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:46px; z-index:40}
.anav .wrap{display:flex; align-items:center; gap:4px; overflow-x:auto}
.anav a{padding:12px 12px; text-decoration:none; font-size:14px; font-weight:700; color:var(--muted); border-bottom:3px solid transparent; white-space:nowrap}
.anav a.on{color:var(--brand); border-color:var(--brand)}
.anav .who{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap}
.apage{padding:18px 0 30px}
.apage h1{font-size:20px; margin:0 0 14px; letter-spacing:-.5px}
.mini-act{display:inline; margin:0}
.mini-act button{border:0; background:none; color:var(--muted); font-size:11px; cursor:pointer; text-decoration:underline; padding:0 2px; font-family:inherit}
.tmp-pw{font-size:26px; font-weight:800; letter-spacing:4px; color:var(--brand-2); font-variant-numeric:tabular-nums}

/* 접속 현황 */
.vtiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.vt{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.vt .k{font-size:12px; color:var(--muted); font-weight:700}
.vt .v{font-size:26px; font-weight:800; letter-spacing:-.6px; line-height:1.3; font-variant-numeric:tabular-nums}
.vt .v small{font-size:13px; font-weight:600; color:var(--muted); margin-left:2px}
.vt .u{font-size:12px; color:var(--muted)}
.vchart-top{font-size:11px; color:var(--muted); border-bottom:1px dashed var(--line); padding-bottom:2px}
.vchart{display:flex; align-items:flex-end; gap:2px; height:160px; border-bottom:1px solid #c9d3e4}
.vchart.dense{gap:1px}
.vb{position:relative; flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; outline:none}
.vb i{display:block; width:100%; max-width:26px; min-height:2px; background:var(--brand); border-radius:4px 4px 0 0}
.vb:hover i,.vb:focus i{background:var(--brand-2)}
.vb:hover::after,.vb:focus::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% - 26px); left:50%; transform:translateX(-50%); z-index:5;
  background:#18181b; color:#fff; font-size:12px; padding:5px 9px; border-radius:7px; white-space:nowrap; pointer-events:none;
}
.vb:nth-child(-n+4):hover::after,.vb:nth-child(-n+4):focus::after{left:0; transform:none}
.vb:nth-last-child(-n+4):hover::after,.vb:nth-last-child(-n+4):focus::after{left:auto; right:0; transform:none}
.vchart-x{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px}
.vgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.brow{margin-bottom:12px}
.brow:last-child{margin-bottom:0}
.brow .bl{display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:4px}
.brow .bl b{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.btrack{height:8px; background:#eef1f6; border-radius:4px; overflow:hidden}
.btrack i{display:block; height:100%; background:var(--brand); border-radius:4px}
@media (max-width:760px){
  .vtiles{grid-template-columns:1fr 1fr}
  .vgrid{grid-template-columns:1fr}
}

/* 문자 수신자 */
.nlist{display:flex; flex-direction:column; gap:10px}
.nrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.nrow.off{background:#f7f8fa}
.nrow.off input{color:var(--muted)}
.nedit{display:flex; flex:1 1 320px; gap:8px; align-items:center; min-width:0; margin:0}
.nedit input{height:36px; font-size:14px; min-width:0; flex:1 1 0}
.nedit .btn{flex:none}
.nacts{display:flex; align-items:center; gap:8px; margin-left:auto}
.mini-form{margin:0}
.nsw{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:18px; cursor:pointer;
  border:1px solid var(--line); background:#eef0f4; color:var(--muted); font-size:13px; font-weight:700; font-family:inherit; white-space:nowrap;
}
.nsw i{width:8px; height:8px; border-radius:50%; background:#aab2bf}
.nsw.on{background:var(--mint-soft); border-color:#b7ecd8; color:var(--mint-2)}
.nsw.on i{background:var(--mint)}

/* 로그인 */
.auth{max-width:420px; margin:0 auto}
.auth .logo{display:flex; justify-content:center; margin:6px 0 14px}
.auth .logo img{width:64px; height:64px; border-radius:16px; box-shadow:0 8px 20px rgba(20,40,90,.15)}

.cs-foot{text-align:center; color:var(--muted); font-size:12px; padding:24px 16px 40px; line-height:1.8}
.cs-foot b{color:var(--ink)}
.cs-foot a{color:var(--ink); font-weight:700; text-decoration:none}
.cs-foot .ft-tel{white-space:nowrap}

.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

@media (max-width:860px){
  .side{grid-template-columns:1fr}
}
@media (max-width:560px){
  .row2{grid-template-columns:1fr}
  .phead h1{font-size:20px}
  .card{padding:18px 16px}
  .msg{max-width:94%}
  .hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}