/* 웰스타 커뮤니티 — 공통 모양 (2026-09-25, 아이보스형 포털)
 * ★아이보스를 영업 버전으로(대표님): 흰 바탕 · 가운데 글 목록 · 오른쪽 기둥(로그인·인기·칼럼·혜택).
 *   메뉴 = 커뮤니티 · 콘텐츠 · 칼럼 · 교육 | 도구.  폰에서는 한 줄로 쌓인다(오른쪽 기둥이 아래로).
 * ★색·글자 크기는 여기 한 곳에서. 페이지마다 다시 정하지 말 것. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f4f5f8; --card:#fff; --line:#e7e9ee; --line2:#f0f1f4;
  --text:#15171c; --text2:#555b66; --text3:#8a909b;
  --accent:#1f5eff; --accent-soft:#eef3ff; --accent-ink:#1848c8;
  --orange:#ff8a00; --green:#12a150; --red:#e5484d;
  --radius:14px; --maxw:1200px;
  --font:'Pretendard','Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit}

/* ── 머리 ── */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px 0;display:flex;align-items:center;gap:20px}
.logo{font-size:22px;font-weight:900;letter-spacing:-.6px;white-space:nowrap}
.logo em{font-style:normal;color:var(--accent)}
.search{flex:0 1 340px;display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff}
.search input{flex:1;border:0;outline:0;padding:10px 12px;background:transparent;color:var(--text);min-width:0}
.search button{border:0;background:none;padding:0 12px;cursor:pointer;color:var(--text2);font-size:16px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--text2);white-space:nowrap}
.hd-right a:hover{color:var(--text)}
.hd-right .me{font-weight:700;color:var(--text)}
.hd-right .sep{width:1px;height:12px;background:var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px;overflow-x:auto}
.nav a{position:relative;display:block;padding:14px 0 12px;font-weight:800;font-size:15.5px;color:#2a2e36;white-space:nowrap;
  border-bottom:3px solid transparent}
.nav a.on{border-bottom-color:var(--accent);color:var(--text)}
.nav a.tool{color:var(--accent-ink)}
.nav .sp{flex:1}
.nav .luck{color:var(--green);font-size:14px}
/* 커뮤니티 펼침 메뉴 (PC) */
.drop{position:absolute;display:none;top:100%;margin-top:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(20,30,60,.12);padding:12px 0;min-width:360px;z-index:60;
  grid-template-columns:1fr 1fr}
.drop.show{display:grid}
.drop a{padding:8px 20px;font-weight:500;font-size:14.5px;border:0;color:var(--text)}
.drop a:hover{background:var(--line2)}
.drop .col+.col{border-left:1px solid var(--line2)}

/* ── 본문 두 칸 ── */
.page{max-width:var(--maxw);margin:20px auto 60px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.card+.card{margin-top:16px}
.card h2{font-size:19px;font-weight:900;letter-spacing:-.3px;margin-bottom:14px}
.card h2 small{font-size:13px;font-weight:500;color:var(--text3);margin-left:8px}
.rail .card{padding:20px}
.rail > * + *{margin-top:14px}

/* 칩(게시판 거르기) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{padding:7px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;color:var(--text2);cursor:pointer}
.chip.on{background:#15171c;border-color:#15171c;color:#fff;font-weight:700}

/* 글 목록 줄 (아이보스식: 제목 · 댓글수 · 글쓴이 · 날짜 · 조회) */
.rows{border-top:1px solid var(--line2)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 130px 56px 48px;gap:12px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--line2);font-size:14.5px;cursor:pointer}
.row:hover .t{text-decoration:underline}
.row .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.row .t .cat{font-size:12px;font-weight:800;color:var(--accent-ink);margin-right:8px}
.row .t .cmt{color:var(--accent);font-weight:800;font-size:13px;margin-left:6px}
.row .who{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .d,.row .v{font-size:12.5px;color:var(--text3);text-align:right}
.row .d.new{color:var(--accent);font-weight:700}
.empty{text-align:center;padding:50px 16px;color:var(--text3);font-size:14px;line-height:1.9}
.more{display:block;width:100%;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--text2);cursor:pointer}

/* 오른쪽 기둥 위젯 */
.login-box p{font-size:13px;color:var(--text3);text-align:center;margin-bottom:10px}
.btn-main{display:block;width:100%;padding:13px;border:0;border-radius:10px;background:var(--accent);color:#fff;
  font-weight:800;font-size:15px;cursor:pointer;text-align:center}
.btn-main:hover{filter:brightness(.96)}
.btn-line{display:block;width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);
  font-weight:700;cursor:pointer;text-align:center}
.login-box .subs{display:flex;justify-content:center;gap:14px;margin-top:10px;font-size:13px;color:var(--text2)}
.me-box .nm{font-weight:900;font-size:17px}
.me-box .sub{font-size:13px;color:var(--text3);margin:4px 0 12px}
.tabs3{display:grid;grid-template-columns:repeat(3,1fr);background:var(--line2);border-radius:10px;padding:4px;margin-bottom:10px}
.tabs3 button{border:0;background:none;padding:8px;border-radius:8px;font-weight:700;color:var(--text3);cursor:pointer}
.tabs3 button.on{background:#15171c;color:#fff}
.rank{list-style:none}
.rank li{display:flex;gap:10px;padding:7px 2px;font-size:14px;cursor:pointer}
.rank li .n{width:16px;color:var(--red);font-weight:800;text-align:center;flex-shrink:0}
.rank li .x{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank li:hover .x{text-decoration:underline}
.perk a{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line2)}
.perk a:first-of-type{border-top:0}
.perk .ic{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:17px;flex-shrink:0}
.perk .tt{font-weight:800;font-size:14.5px}
.perk .dd{font-size:12.5px;color:var(--text3)}

/* 배너 자리 — strip(본문 맨 위 한 줄) · rail(오른쪽 기둥). 값은 DB(community_banners) */
.strip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 18px;margin-bottom:16px;font-size:14.5px}
.strip .ic{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:13px;flex-shrink:0}
.strip .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.strip .sub{font-size:13px;color:var(--text3);white-space:nowrap}
.strip .lb,.ban .lb{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--line2);color:var(--text3);white-space:nowrap}
#rBan{display:flex;flex-direction:column;gap:14px}
#rBan:empty{display:none}
.ban{position:relative;display:flex;flex-direction:column;gap:3px;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;padding:16px 18px 16px 20px;overflow:hidden}
.ban::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--bar,var(--accent))}
.ban b{font-size:15px;font-weight:800;line-height:1.4;color:var(--text)}
.ban span{font-size:12.5px;color:var(--text3)}
.ban .lb{position:absolute;top:12px;right:12px}
.ban:hover{border-color:var(--accent)}
.ban.img{padding:0;border:0;background:none}
.ban.img::before{display:none}
.ban.img img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.ban.wide{margin-bottom:14px}
#bMid .ban.wide{margin:14px 0 0}
.row.pin{background:#fffbea}

/* 첫 화면 띠 — 이런 고객 찾습니다 */
.hero-band{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,#1f5eff,#5a3cff);color:#fff;
  border-radius:var(--radius);padding:22px 26px;margin-bottom:16px}
.hero-band .tx{flex:1;min-width:0}
.hero-band .tag{display:inline-block;font-size:12px;font-weight:800;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:999px;margin-bottom:8px}
.hero-band h3{font-size:21px;font-weight:900;line-height:1.4;letter-spacing:-.4px}
.hero-band p{font-size:14px;opacity:.88;margin-top:4px}
.hero-band a.go{flex-shrink:0;background:#fff;color:var(--accent-ink);font-weight:900;padding:12px 18px;border-radius:10px;white-space:nowrap}

.foot{max-width:var(--maxw);margin:0 auto;padding:30px 24px 60px;color:var(--text3);font-size:12.5px;text-align:center;line-height:1.8}
.foot a{text-decoration:underline}

/* ── 폰 ── */
@media (max-width:900px){
  .hd-in{padding:12px 16px 0;gap:12px;flex-wrap:wrap}
  .search{order:3;flex:1 1 100%;margin-bottom:4px}
  .hd-right{gap:12px;font-size:13px}
  .hd-right .opt{display:none}
  .nav{padding:0 16px;gap:20px}
  .nav .sp,.nav .luck{display:none}
  .drop{display:none!important}
  .page{grid-template-columns:1fr;padding:0 12px;margin-top:12px;gap:12px}
  .card{padding:18px 16px}
  .row{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto auto;row-gap:2px}
  .row .t{grid-column:1 / -1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .row .who{grid-column:1}
  .row .d{grid-column:2;grid-row:2}
  .row .v{display:none}
  .hero-band{flex-direction:column;align-items:flex-start;padding:18px}
  .hero-band h3{font-size:18px}
}