/* ===== Dr.Song4u shared UI for sub-pages (mobile-first, reuses about-base tokens) ===== */

/* sub-page header (no big hero image) */
.ptop{padding:calc(40px + 96px + 48px) var(--page-pad) clamp(28px,4vw,52px);background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.ptop .glow{position:absolute;width:50vw;height:50vw;right:-12%;top:-30%;background:radial-gradient(circle,rgba(0,175,239,.12),transparent 62%);pointer-events:none;}
.ptop .crumb{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.ptop .crumb a{color:rgba(255,255,255,.5);}
.ptop .crumb a:hover{color:#fff;}
.ptop .crumb .sep{opacity:.4;}
.ptop .crumb .cur{color:var(--point);}
.ptop h1{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.08;}
.ptop h1 .en{display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:.32em;letter-spacing:.04em;color:rgba(255,255,255,.5);margin-top:12px;text-transform:uppercase;}
.ptop p.lead{font-size:clamp(14px,1.3vw,17px);color:rgba(255,255,255,.7);margin-top:18px;line-height:1.7;max-width:680px;font-weight:300;}

/* container */
.wrap-pad{padding:clamp(40px,5vw,76px) var(--page-pad) clamp(64px,8vw,110px);}
.maxw{max-width:1180px;margin-left:auto;margin-right:auto;}
.maxw-sm{max-width:560px;margin:0 auto;}

/* ===== 게시판(공지·이벤트·후기) 고정폭: max 1080 / 보이는 콘텐츠 1050 (좌우 15px) ===== */
.board-wrap{max-width:1080px;margin-left:auto;margin-right:auto;padding:clamp(40px,5vw,72px) 15px clamp(64px,8vw,100px);}
/* 목록(공지·이벤트·후기)은 FAQ 와 동일한 풀폭(--pad) 정렬 */
.board-wrap.board-full{max-width:none;margin:0;padding:clamp(40px,5vw,72px) var(--pad) clamp(64px,8vw,100px);}
/* 서브탭바·상세 헤더 텍스트를 1080 콘텐츠에 맞춰 정렬 (배경은 풀블리드 유지) */
.subtabs.board-tabs,.ptop.board-hero{padding-left:max(15px,calc((100% - 1080px)/2 + 15px));padding-right:max(15px,calc((100% - 1080px)/2 + 15px));}

/* sub tabs (sticky) */
.subtabs{position:sticky;top:110px;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;gap:4px;padding:0 var(--page-pad);overflow-x:auto;scrollbar-width:none;}
.subtabs::-webkit-scrollbar{display:none;}
.subtabs a,.subtabs button{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;padding:18px 20px 16px;cursor:pointer;white-space:nowrap;transition:.2s;text-decoration:none;}
.subtabs a:hover,.subtabs button:hover{color:var(--ink);}
.subtabs a.on,.subtabs button.on{color:var(--point);border-bottom-color:var(--point);}

/* board list */
.board{border-top:1.5px solid var(--ink);}
/* desktop column header — aligns to .brow grid */
.bhead{display:grid;grid-template-columns:84px 1fr auto;gap:20px;align-items:center;padding:15px 8px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);background:var(--soft);font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.bhead span:last-child{text-align:right;}
.bhead + .board{border-top:none;}
@media(max-width:768px){.bhead{display:none;}}

/* board toolbar: count + search */
.board-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px;flex-wrap:wrap;}
.board-top .bcount{font-size:14px;color:var(--muted);}
.board-top .bcount b{color:var(--ink);font-weight:700;}
.search-bar{display:flex;gap:0;border:1px solid var(--line);max-width:340px;width:100%;border-radius:0 10px 0 10px;overflow:hidden;}
.search-bar input{flex:1;border:none;padding:11px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);min-height:44px;background:#fff;}
.search-bar input:focus{outline:none;}
.search-bar button{flex:0 0 auto;border:none;background:var(--ink);color:#fff;padding:0 16px;cursor:pointer;display:flex;align-items:center;}
.search-bar button:hover{background:var(--point);}

/* empty state (no posts / no search results) */
.empty-state{text-align:center;padding:clamp(56px,8vw,96px) 20px;border-bottom:1px solid var(--line);}
.empty-state .ei{width:60px;height:60px;border-radius:50%;background:var(--soft);color:var(--muted);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.empty-state h3{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em;}
.empty-state p{font-size:14px;color:var(--muted);line-height:1.6;}
.brow{display:grid;grid-template-columns:84px 1fr auto;gap:20px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .3s ease;}
.brow:hover{background:rgba(0,175,239,.06);}
.brow .btag{font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--point);}
.brow .btag.notice{color:#fff;background:var(--ink);padding:5px 10px;justify-self:start;}
.brow .btit{font-size:clamp(15px,1.3vw,17px);font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.4;display:flex;align-items:center;gap:8px;}
.brow .btit .lock{color:var(--muted);}
.brow .btit .new{font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:700;color:#fff;background:var(--point);border-radius:2px;padding:1px 5px;letter-spacing:.04em;}
.brow .bmeta{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--muted);white-space:nowrap;text-align:right;line-height:1.5;}
.brow .bmeta .answered{color:#1f8a5b;font-weight:700;}
.brow .bmeta .waiting{color:var(--point);font-weight:700;}

/* pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:clamp(36px,4vw,56px);}
.pager a,.pager span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;color:var(--body);border:1px solid var(--line);text-decoration:none;transition:.2s;padding:0 6px;border-radius:0 8px 0 8px;}
.pager a:hover{border-color:var(--ink);color:var(--ink);}
.pager .on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* detail view */
.dview .dhead{border-bottom:1.5px solid var(--ink);padding-bottom:26px;margin-bottom:32px;}
.dview .dtag{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--point);margin-bottom:14px;}
.dview h2{font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.25;color:var(--ink);}
.dview .dmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-family:"Space Grotesk",sans-serif;font-size:13px;color:var(--muted);}
.dview .dbody{font-size:clamp(15px,1.2vw,16.5px);line-height:1.95;color:var(--body);font-weight:300;max-width:840px;}
.dview .dbody p{margin-bottom:18px;}
.dview .dbody img{max-width:100%;height:auto;margin:20px 0;}
/* 첨부파일 목록 (www 전용) */
.dview .dfiles{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;max-width:840px;}
.dview .dfiles .dfile{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--soft);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;transition:.2s;}
.dview .dfiles .dfile:hover{border-color:var(--point);}
.dview .dfiles .dfile .fn{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dview .dfiles .dfile .fs{font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--muted);}
.dview .dnav{display:flex;justify-content:space-between;gap:12px;margin-top:48px;flex-wrap:wrap;}

/* ===== MODAL (shared — centered, scroll-lock, ESC/outside-close via DSModal) ===== */
.modal-back{position:fixed;inset:0;z-index:3000;background:rgba(14,17,22,.62);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s;}
.modal-back.open{opacity:1;pointer-events:auto;}
.modal{background:#fff;width:100%;max-width:460px;max-height:90vh;overflow:auto;transform:translateY(14px) scale(.99);transition:transform .22s;box-shadow:0 30px 80px -24px rgba(0,0,0,.5);}
.modal-back.open .modal{transform:none;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line);}
.modal-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.modal-close{width:38px;height:38px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;flex:0 0 auto;transition:.2s;}
.modal-close:hover{color:var(--ink);}
.modal-body{padding:24px;}
.modal-body .done-ic{width:64px;height:64px;border-radius:50%;background:rgba(0,175,239,.12);color:var(--point);display:flex;align-items:center;justify-content:center;margin:4px auto 18px;}
.modal-body h4{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-align:center;margin-bottom:10px;}
.modal-body .m-sub{text-align:center;font-size:14.5px;color:var(--body);line-height:1.7;margin-bottom:22px;}
body.modal-open{overflow:hidden;}
@media(max-width:520px){.modal{max-width:none;}}

/* prev / next post navigation */
.postnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px;}
.postnav .pn-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:18px 8px;text-decoration:none;border-bottom:1px solid var(--line);transition:.2s;}
.postnav .pn-row:last-child{border-bottom:none;}
.postnav .pn-row:hover{background:var(--soft);padding-left:16px;}
.postnav .pn-row.disabled{pointer-events:none;opacity:.45;}
.postnav .pn-dir{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.postnav .pn-t{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.postnav .pn-ar{color:var(--muted);font-family:"Space Grotesk",sans-serif;}
@media(max-width:560px){.postnav .pn-row{grid-template-columns:72px 1fr;}.postnav .pn-ar{display:none;}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;padding:15px 30px;cursor:pointer;transition:.25s;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;min-height:48px;letter-spacing:-.01em;border-radius:0 12px 0 12px;}
.btn:hover{border-color:var(--ink);}
.btn.primary{background:var(--point);border-color:var(--point);color:#fff;}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn.dark:hover{background:var(--point);border-color:var(--point);}
.btn.full{width:100%;}
.btn.lg{padding:18px 34px;font-size:16px;min-height:56px;}

/* forms */
.form .fld{display:flex;flex-direction:column;margin-bottom:20px;}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form label{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;letter-spacing:-.01em;}
.form label .req{color:var(--point);margin-left:3px;}
.form input,.form select,.form textarea{font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:14px 16px;transition:.2s;width:100%;min-height:50px;border-radius:0 8px 0 8px;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--point);box-shadow:0 0 0 3px rgba(0,175,239,.12);}
.form textarea{resize:vertical;min-height:140px;line-height:1.7;}
.form .hint{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5;}
.form .with-btn{display:flex;gap:10px;}
.form .with-btn input{flex:1;}
.form .with-btn .btn{flex:0 0 auto;padding:0 20px;white-space:nowrap;}
.form fieldset{border:none;}
/* checkbox/radio */
.chk{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--body);line-height:1.6;cursor:pointer;flex-wrap:wrap;}
.chk.has-err .field-err{flex-basis:100%;margin-left:28px;}
.chk input{width:auto;min-height:0;margin-top:2px;flex:0 0 auto;accent-color:var(--point);width:18px;height:18px;}
.chk a{color:var(--point);text-decoration:underline;}

/* agreement steps */
.agree-box{border:1px solid var(--line);}
.agree-all{display:flex;align-items:center;gap:10px;padding:18px 20px;background:var(--soft);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);}
.agree-all input{width:20px;height:20px;accent-color:var(--point);}
.agree-item{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--body);}
.agree-item:last-child{border-bottom:none;}
.agree-item input{width:18px;height:18px;accent-color:var(--point);flex:0 0 auto;}
.agree-item .view{margin-left:auto;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer;}
.agree-item .opt{color:var(--muted);font-weight:400;}

/* auth card */
.auth{min-height:60vh;display:flex;align-items:flex-start;justify-content:center;}
.wrap-pad.auth{padding-top:calc(40px + 96px + 48px);}
@media(max-width:768px){.wrap-pad.auth{padding-top:calc(40px + 84px + 30px);}}
.auth-card{width:100%;max-width:460px;}
.auth-card .a-logo{display:flex;justify-content:center;margin-bottom:26px;}
.auth-card .a-logo img{height:34px;}
.auth-card h1{font-size:clamp(24px,3vw,32px);font-weight:300;letter-spacing:-.03em;text-align:center;color:var(--ink);margin-bottom:10px;}
.auth-card .a-sub{text-align:center;font-size:14.5px;color:var(--muted);margin-bottom:34px;line-height:1.6;}
.auth-links{display:flex;justify-content:center;gap:16px;margin-top:22px;font-size:13.5px;color:var(--muted);}
.auth-links a{color:var(--body);}
.auth-links a:hover{color:var(--point);}
.auth-links .sep{opacity:.4;}
.sns-login{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.sns-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;font-size:15px;font-weight:700;border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:0 10px 0 10px;text-decoration:none;}
.sns-btn.kakao{background:#FAE100;border-color:#FAE100;color:#3c1e1e;}
.sns-btn.naver{background:#03C75A;border-color:#03C75A;color:#fff;}
.divider{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--muted);font-size:12.5px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* info cards / status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:2px;}
.chip.wait{background:rgba(0,175,239,.12);color:var(--point);}
.chip.done{background:rgba(31,138,91,.12);color:#1f8a5b;}
.chip.secret{background:var(--soft);color:var(--muted);}

/* accordion (FAQ) */
.acc{border-top:1.5px solid var(--ink);max-width:1000px;}
.acc-item{border-bottom:1px solid var(--line);}
.acc-q{display:flex;align-items:center;gap:16px;padding:24px 8px;cursor:pointer;list-style:none;min-height:48px;}
.acc-q::-webkit-details-marker{display:none;}
.acc-q .qm{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;color:var(--point);flex:0 0 auto;}
.acc-q h3{font-size:clamp(15px,1.3vw,18px);font-weight:600;color:var(--ink);flex:1;letter-spacing:-.01em;}
.acc-q .chev{flex:0 0 auto;color:var(--muted);transition:transform .3s;}
.acc-item[open] .acc-q .chev{transform:rotate(180deg);}
.acc-a{padding:0 8px 26px 50px;font-size:clamp(14px,1.15vw,15.5px);color:var(--body);line-height:1.85;font-weight:300;}

/* simple key-value table → mobile stacked */
.kv{width:100%;border-collapse:collapse;border-top:1.5px solid var(--ink);}
.kv th,.kv td{text-align:left;padding:16px 18px;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top;}
.kv th{background:var(--soft);color:var(--ink);font-weight:700;width:28%;}
.kv td{color:var(--body);font-weight:300;}

/* responsive */
@media(max-width:1024px){
  .subtabs{top:110px;}
}
@media(max-width:768px){
  .ptop{padding:calc(40px + 84px + 32px) var(--pad) 30px;}
  .subtabs{top:110px;}
  .brow{grid-template-columns:1fr auto;gap:8px 14px;padding:18px 6px;}
  .brow .btag{grid-row:1;}
  .brow .btit{grid-column:1/-1;grid-row:2;}
  .brow .bmeta{grid-row:1;}
  .form .row2{grid-template-columns:1fr;gap:0;}
  .kv th{width:36%;}
  .dview .dnav .btn{flex:1;}
}
@media(max-width:480px){
  .kv,.kv tbody,.kv tr,.kv th,.kv td{display:block;width:100%;}
  .kv th{border-bottom:none;padding-bottom:6px;}
  .kv td{padding-top:6px;}
}