body.maintalk-theme-reset,
body.maintalk-theme-reset #page,
body.maintalk-theme-reset .site,
body.maintalk-theme-reset .site-content,
body.maintalk-theme-reset .site-content > .ast-container,
body.maintalk-theme-reset #content,
body.maintalk-theme-reset #content > .ast-container,
body.maintalk-theme-reset .content-area,
body.maintalk-theme-reset .site-main,
body.maintalk-theme-reset .entry-content,
body.maintalk-theme-reset .ast-article-single { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#f6f7f8!important; }
#maintalk-board-v2, #maintalk-board-v2 * { box-sizing:border-box; }
#maintalk-board-v2 {
--bg:#f6f7f8; --surface:#fff; --text:#17191c; --sub:#62676f; --muted:#979ca4;
--line:#e8eaed; --accent:#e95d38; --accent-soft:#fff0eb; --green:#168765; --green-soft:#eaf7f2;
width:100%; min-height:100vh; background:var(--bg); color:var(--text);
font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",sans-serif; letter-spacing:0;
}
#maintalk-board-v2 a { color:inherit; text-decoration:none; }
#maintalk-board-v2 button, #maintalk-board-v2 input { font:inherit; letter-spacing:0; }
#maintalk-board-v2 i[data-lucide] { width:17px; height:17px; display:inline-grid; place-items:center; flex:0 0 auto; color:inherit; font-style:normal; font-size:15px; line-height:1; }
#maintalk-board-v2 i[data-lucide].is-svg-icon:before { content:none!important; display:none!important; }
#maintalk-board-v2 i[data-lucide].is-svg-icon > svg { display:block; width:100%; height:100%; }
#maintalk-board-v2 .mtb-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
#maintalk-board-v2 .mtb-header-inner { width:min(1280px,calc(100% - 32px)); height:64px; margin:0 auto; display:grid; grid-template-columns:220px minmax(260px,520px) 1fr; align-items:center; gap:24px; }
#maintalk-board-v2 .mtb-brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; }
#maintalk-board-v2 .mtb-brand-mark { width:26px; height:26px; display:grid; place-items:center; background:var(--accent); color:#fff; }
#maintalk-board-v2 .mtb-brand-mark svg { width:16px; height:16px; }
#maintalk-board-v2 .mtb-search { position:relative; display:block!important; width:100%; min-width:0; margin:0!important; padding:0!important; border:0!important; background:transparent!important; line-height:normal!important; }
#maintalk-board-v2 .mtb-search > svg, #maintalk-board-v2 .mtb-search > i[data-lucide] { position:absolute; left:13px; top:50%; width:17px; height:17px; color:var(--muted); transform:translateY(-50%); z-index:1; }
#maintalk-board-v2 .mtb-search input { -webkit-appearance:none!important; appearance:none!important; display:block!important; width:100%!important; max-width:none!important; min-width:0!important; height:40px!important; min-height:40px!important; margin:0!important; border:1px solid var(--line)!important; border-radius:6px!important; box-shadow:none!important; background:#f7f8f9!important; color:var(--text)!important; padding:0 42px!important; outline:none!important; font-size:14px!important; line-height:38px!important; }
#maintalk-board-v2 .mtb-search input:focus { background:#fff!important; border-color:#b8bdc4!important; box-shadow:none!important; }
#maintalk-board-v2 .mtb-search-clear { position:absolute; right:7px; top:7px; width:26px; height:26px; padding:0; border:0; background:transparent; color:var(--muted); display:none; place-items:center; cursor:pointer; }
#maintalk-board-v2 .mtb-search-clear svg { width:15px; height:15px; }
#maintalk-board-v2 .mtb-header-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
#maintalk-board-v2 .mtb-icon-btn, #maintalk-board-v2 .mtb-write-btn { height:38px; border:0; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; }
#maintalk-board-v2 .mtb-icon-btn { width:38px; background:transparent; color:var(--sub); }
#maintalk-board-v2 .mtb-icon-btn:hover { background:#f1f2f3; color:var(--text); }
#maintalk-board-v2 .mtb-icon-btn svg, #maintalk-board-v2 .mtb-write-btn svg { width:17px; height:17px; }
#maintalk-board-v2 .mtb-write-btn { gap:7px; padding:0 14px; background:var(--accent); color:#fff; font-size:13px; font-weight:750; }
#maintalk-board-v2 .mtb-write-btn:hover { background:#d94f2d; }
#maintalk-board-v2 .mtb-mobile-categories { display:none; }
#maintalk-board-v2 .mtb-layout { width:min(1280px,calc(100% - 32px)); margin:0 auto; padding:28px 0 72px; display:grid; grid-template-columns:200px minmax(0,1fr) 280px; gap:30px; align-items:start; }
#maintalk-board-v2 .mtb-sidebar, #maintalk-board-v2 .mtb-rightbar { position:sticky; top:92px; }
#maintalk-board-v2 .mtb-side-title { margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; }
#maintalk-board-v2 .mtb-category-nav { display:grid; gap:2px; }
#maintalk-board-v2 .mtb-category-button { position:relative; width:100%; height:40px; padding:0 10px; border:0; border-radius:5px; background:transparent; color:var(--sub); display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; font-size:13px; font-weight:650; }
#maintalk-board-v2 .mtb-category-button svg { width:17px; height:17px; color:#7f858d; }
#maintalk-board-v2 .mtb-category-count { margin-left:auto; color:#a5a9ae; font-size:11px; font-weight:600; }
#maintalk-board-v2 .mtb-category-button:hover { background:#eceef0; color:var(--text); }
#maintalk-board-v2 .mtb-category-button.is-active { background:#fff; color:var(--text); font-weight:750; box-shadow:0 1px 3px rgba(20,24,30,.06); }
#maintalk-board-v2 .mtb-category-button.is-active:before { content:""; position:absolute; left:0; top:11px; width:2px; height:18px; background:var(--accent); }
#maintalk-board-v2 .mtb-side-divider { height:1px; margin:16px 0; background:var(--line); }
#maintalk-board-v2 .mtb-side-link { display:flex; align-items:center; gap:9px; height:36px; padding:0 10px; color:var(--sub); font-size:13px; font-weight:600; }
#maintalk-board-v2 .mtb-side-link svg { width:16px; height:16px; }
#maintalk-board-v2 .mtb-feed-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
#maintalk-board-v2 .mtb-feed-title { margin:0; font-size:25px; line-height:1.25; font-weight:820; }
#maintalk-board-v2 .mtb-feed-subtitle { margin:6px 0 0; color:var(--sub); font-size:13px; }
#maintalk-board-v2 .mtb-sort { display:flex; padding:3px; border-radius:5px; background:#e9ebed; }
#maintalk-board-v2 .mtb-sort-button { height:30px; padding:0 10px; border:0; border-radius:3px; background:transparent; color:var(--sub); cursor:pointer; font-size:12px; font-weight:650; }
#maintalk-board-v2 .mtb-sort-button.is-active { background:#fff; color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.06); }
#maintalk-board-v2 .mtb-subnav { display:none; flex-wrap:wrap; gap:6px 18px; margin:-2px 0 18px; padding:0 0 14px; border-bottom:1px solid var(--line); }
#maintalk-board-v2 .mtb-subnav.is-visible { display:flex; }
#maintalk-board-v2 .mtb-sub-button { position:relative; min-height:30px; padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:650; }
#maintalk-board-v2 a.mtb-sub-button { display:inline-flex; align-items:center; }
#maintalk-board-v2 .mtb-sub-button:hover, #maintalk-board-v2 .mtb-sub-button.is-active { color:var(--text); }
#maintalk-board-v2 .mtb-sub-button.is-active { font-weight:780; }
#maintalk-board-v2 .mtb-sub-button.is-active:after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:var(--accent); }
#maintalk-board-v2 .mtb-notice { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; margin-bottom:10px; border:1px solid #dfe8f7; background:#f5f8fd; color:#38547b; font-size:13px; }
#maintalk-board-v2 .mtb-notice svg { width:16px; height:16px; flex:0 0 auto; }
#maintalk-board-v2 .mtb-notice strong { margin-right:5px; color:#29466f; }
#maintalk-board-v2 .mtb-post-list { border-top:1px solid var(--line); background:var(--surface); }
#maintalk-board-v2 .mtb-post { display:block; width:100%; margin:0; padding:20px 22px!important; border-bottom:1px solid var(--line); transition:background .14s ease; }
#maintalk-board-v2 .mtb-post.is-filtered-out { display:none!important; }
#maintalk-board-v2 .mtb-post.is-batch-pending { display:none!important; }
#maintalk-board-v2 .mtb-post > a { display:block; width:100%; }
#maintalk-board-v2 .mtb-post:hover { background:#fafafa; }
#maintalk-board-v2 .mtb-post-top { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
#maintalk-board-v2 .mtb-topic { color:var(--accent); font-size:12px; font-weight:750; }
#maintalk-board-v2 .mtb-time { color:var(--muted); font-size:12px; }
#maintalk-board-v2 .mtb-post-title { margin:0; font-size:17px; line-height:1.48; font-weight:760; }
#maintalk-board-v2 .mtb-post-preview { margin:7px 0 0; color:var(--sub); font-size:13px; line-height:1.62; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#maintalk-board-v2 .mtb-post-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
#maintalk-board-v2 .mtb-author { display:flex; align-items:center; gap:8px; color:var(--sub); font-size:12px; font-weight:650; }
#maintalk-board-v2 .mtb-avatar { width:23px; height:23px; border-radius:50%; display:grid; place-items:center; background:#eceff2; color:#707780; font-size:10px; font-weight:800; }
#maintalk-board-v2 .mtb-metric { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
#maintalk-board-v2 .mtb-metric svg { width:14px; height:14px; }
#maintalk-board-v2 .mtb-feed-ad { min-height:150px; margin:12px 0; display:grid; place-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; overflow:hidden; }
#maintalk-board-v2 .mtb-feed-ad[hidden] { display:none!important; }
#maintalk-board-v2 .mtb-feed-ad ins { display:block!important; width:100%; height:150px!important; }
#maintalk-board-v2 .mtb-empty { display:none; padding:50px 20px; background:#fff; color:var(--sub); text-align:center; border-top:1px solid var(--line); }
#maintalk-board-v2 .mtb-load-sentinel { min-height:64px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12px; }
#maintalk-board-v2 .mtb-load-sentinel[hidden] { display:none!important; }
#maintalk-board-v2 .mtb-load-spinner { width:14px; height:14px; border:2px solid #d9dde2; border-top-color:#777e87; border-radius:50%; animation:mtb-spin .8s linear infinite; }
@keyframes mtb-spin { to { transform:rotate(360deg); } }
#maintalk-board-v2 .mtb-right-section { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
#maintalk-board-v2 .mtb-right-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
#maintalk-board-v2 .mtb-right-title { margin:0; font-size:14px; font-weight:800; }
#maintalk-board-v2 .mtb-rank-list { display:grid; gap:14px; }
#maintalk-board-v2 .mtb-rank-item { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:8px; width:100%; margin:0; padding:0; }
#maintalk-board-v2 .mtb-rank { display:flex; align-items:flex-start; justify-content:center; width:22px; margin:0; padding:1px 0 0; color:var(--accent); font-size:13px; line-height:1.45; font-weight:850; font-variant-numeric:tabular-nums; }
#maintalk-board-v2 .mtb-rank-copy { display:block; min-width:0; margin:0; padding:0; }
#maintalk-board-v2 .mtb-rank-copy strong { display:block; margin:0; padding:0; color:var(--text); font-size:13px; line-height:1.45; font-weight:700; }
#maintalk-board-v2 .mtb-rank-copy span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
#maintalk-board-v2 .mtb-tag-list { display:flex; flex-wrap:wrap; gap:7px; }
#maintalk-board-v2 .mtb-tag { padding:7px 9px; border:1px solid var(--line); background:#fff; color:var(--sub); font-size:12px; cursor:pointer; }
#maintalk-board-v2 .mtb-guide-link { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); }
#maintalk-board-v2 .mtb-guide-link:first-of-type { border-top:0; padding-top:0; }
#maintalk-board-v2 .mtb-guide-icon { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; background:var(--green-soft); color:var(--green); }
#maintalk-board-v2 .mtb-guide-icon svg { width:15px; height:15px; }
#maintalk-board-v2 .mtb-guide-copy strong { display:block; font-size:12px; line-height:1.5; }
#maintalk-board-v2 .mtb-guide-copy span { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
#maintalk-board-v2 .mtb-side-ad { min-height:250px; margin-top:22px; display:grid; place-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; overflow:hidden; }
#maintalk-board-v2 .mtb-side-ad ins { display:block!important; width:100%; height:250px; }
#maintalk-board-v2 .mtb-mobile-write { display:none; }
@media(max-width:1050px){
#maintalk-board-v2 .mtb-layout{grid-template-columns:180px minmax(0,1fr);gap:24px}
#maintalk-board-v2 .mtb-rightbar{display:none}
#maintalk-board-v2 .mtb-header-inner{grid-template-columns:190px minmax(240px,1fr) auto}
}
@media(max-width:760px){
#maintalk-board-v2 .mtb-header{position:static}
#maintalk-board-v2 .mtb-header-inner{width:100%;height:auto;padding:14px;grid-template-columns:1fr auto;gap:12px}
#maintalk-board-v2 .mtb-brand{font-size:18px}
#maintalk-board-v2 .mtb-search{grid-column:1/-1;grid-row:2}
#maintalk-board-v2 .mtb-header-actions .mtb-write-btn,#maintalk-board-v2 .mtb-header-actions .mtb-icon-btn:first-child{display:none}
#maintalk-board-v2 .mtb-mobile-categories{display:flex;gap:20px;padding:0 14px;overflow-x:auto;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scrollbar-width:none}
#maintalk-board-v2 .mtb-mobile-category{position:relative;flex:0 0 auto;height:44px;padding:0;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:650;display:inline-flex;align-items:center}
#maintalk-board-v2 .mtb-mobile-category.is-active{color:var(--text);font-weight:780}
#maintalk-board-v2 .mtb-mobile-category.is-active:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--accent)}
#maintalk-board-v2 .mtb-layout{width:100%;display:block;padding:22px 0 76px}
#maintalk-board-v2 .mtb-sidebar{display:none}
#maintalk-board-v2 .mtb-feed-head{padding:0 14px;margin-bottom:16px;align-items:center}
#maintalk-board-v2 .mtb-feed-title{font-size:21px}
#maintalk-board-v2 .mtb-feed-subtitle{display:none}
#maintalk-board-v2 .mtb-subnav{flex-wrap:nowrap;gap:18px;margin:-4px 0 14px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}
#maintalk-board-v2 .mtb-sub-button{flex:0 0 auto;min-height:34px}
#maintalk-board-v2 .mtb-notice{width:100%;margin:0 0 10px;border-right:0;border-left:0}
#maintalk-board-v2 .mtb-post{padding:18px 14px!important}
#maintalk-board-v2 .mtb-feed-ad{min-height:112px;margin:8px 0}
#maintalk-board-v2 .mtb-feed-ad ins{height:112px!important}
#maintalk-board-v2 .mtb-post-title{font-size:16px}
#maintalk-board-v2 .mtb-post-preview{-webkit-line-clamp:1}
#maintalk-board-v2 .mtb-mobile-write{position:fixed;right:16px;bottom:18px;z-index:30;width:48px;height:48px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(183,64,32,.28)}
#maintalk-board-v2 .mtb-mobile-write svg{width:20px;height:20px}
}:root{
--bg:#ffffff;
--card:#ffffff;
--text:#111827;
--muted:#6b7280;
--faint:#9ca3af;
--line:#eceef2;
--soft-line:#f1f3f5;
--subtle:#f8fafc;
--accent:#5B7BEA;
--accent-soft:rgba(91,123,234,.08);
--accent-text:#4E68CF;
}
html,
body{
margin:0 !important;
padding:0 !important;
background:var(--bg) !important;
}
body.page #content,
body.page .site-content,
body.page .site-content .ast-container,
body.page #content .ast-container,
body.page #primary,
body.page .content-area,
body.page .site-main{
max-width:100% !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
float:none !important;
}
body.page .site-content .ast-container,
body.page #content .ast-container{
display:block !important;
}
body.page .site,
body.page .site-content,
body.page #page,
body.page #primary,
body.page .content-area,
body.page .site-main{
background:var(--bg) !important;
}
#boss-guides-archive{
width:100vw;
max-width:none !important;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
padding:28px 16px 72px;
background:var(--bg);
color:var(--text);
font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
#boss-guides-archive *{
box-sizing:border-box;
}
#boss-guides-archive a{
color:inherit;
text-decoration:none;
}
#boss-guides-archive .container{
max-width:1280px;
margin:0 auto;
padding:0;
}
#boss-guides-archive .crumbs{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:14px;
color:var(--faint);
font-size:13px;
line-height:1.4;
}
#boss-guides-archive .crumbs a{
color:inherit;
}
#boss-guides-archive h1{
margin:0;
font-size:clamp(26px,3.2vw,42px);
line-height:1.18;
letter-spacing:-.055em;
font-weight:700;
}
#boss-guides-archive .hero-desc{
max-width:760px;
margin:12px 0 0;
color:var(--muted);
font-size:15px;
line-height:1.68;
word-break:keep-all;
}
#boss-guides-archive .hero-meta{
display:flex;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
padding-bottom:24px;
border-bottom:1px solid var(--line);
}
#boss-guides-archive .hero-count{
color:var(--faint);
font-size:13px;
}
#boss-guides-archive .guides-inline-ad{
width:100%;
margin:18px 0 30px;
padding:0 !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
#boss-guides-archive .guides-inline-ad .maintalk-inline-display-ad{
width:100%;
padding:0 !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
#boss-guides-archive .guides-inline-ad .maintalk-inline-display-ad__inner{
width:100%;
aspect-ratio:6 / 1;
border:0 !important;
background:none !important;
box-shadow:none !important;
overflow:hidden;
padding:0 !important;
}
#boss-guides-archive .guides-inline-ad .maintalk-inline-display-ad__ins{
display:block !important;
width:100%;
height:100%;
padding:0 !important;
border:0 !important;
background:none !important;
box-shadow:none !important;
}
#boss-guides-archive .guides-inline-ad ins.adsbygoogle{
border:0 !important;
background:none !important;
box-shadow:none !important;
}
#boss-guides-archive .archive-search{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:0 0 8px;
}
#boss-guides-archive .archive-search-wrap{
position:relative;
width:min(420px,100%);
}
#boss-guides-archive .archive-search-wrap::before{
content:"";
position:absolute;
left:15px;
top:50%;
width:13px;
height:13px;
border:2px solid #a8afbd;
border-radius:50%;
transform:translateY(-58%);
pointer-events:none;
}
#boss-guides-archive .archive-search-wrap::after{
content:"";
position:absolute;
left:27px;
top:26px;
width:7px;
height:2px;
border-radius:999px;
background:#a8afbd;
transform:rotate(45deg);
pointer-events:none;
}
#boss-guides-archive .archive-search-input{
width:100%;
height:42px;
border:0;
border-radius:999px;
background:#f6f7f9;
padding:0 16px 0 42px;
color:var(--text);
font-family:inherit;
font-size:14px;
font-weight:500;
line-height:42px;
outline:none;
}
#boss-guides-archive .archive-search-input::placeholder{
color:#9aa1ad;
font-weight:400;
}
#boss-guides-archive .archive-search-input:focus{
background:#f1f3f7;
}
#boss-guides-archive .archive-search-count{
flex:0 0 auto;
color:var(--faint);
font-size:12px;
font-weight:500;
white-space:nowrap;
}
#boss-guides-archive .guide-card[hidden],
#boss-guides-archive .archive-empty[hidden]{
display:none !important;
}
#boss-guides-archive .archive-empty{
margin-top:18px;
border:0;
border-radius:16px;
background:var(--subtle);
padding:28px 16px;
text-align:center;
color:var(--muted);
font-size:14px;
font-weight:600;
}
#boss-guides-archive .guide-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:34px;
row-gap:0;
margin-top:30px;
}
#boss-guides-archive .archive-search + .guide-grid{
margin-top:18px;
}
#boss-guides-archive .guide-card{
display:block;
min-height:0;
padding:18px 0;
border-bottom:1px solid var(--soft-line);
border-radius:0;
background:#fff;
color:inherit;
text-decoration:none;
transition:none;
}
#boss-guides-archive .guide-card:hover{
background:#fff;
}
#boss-guides-archive .guide-card:first-child{
padding-top:0;
}
#boss-guides-archive .guide-meta{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:7px;
}
#boss-guides-archive .guide-badge{
display:inline-flex;
align-items:center;
height:24px;
padding:0 10px;
border-radius:999px;
background:var(--accent-soft);
color:var(--accent-text);
font-size:11px;
font-weight:600;
}
#boss-guides-archive .guide-title{
margin:0;
font-size:16px;
line-height:1.48;
letter-spacing:-.02em;
font-weight:600;
word-break:keep-all;
}
#boss-guides-archive .guide-desc{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin-top:6px;
color:var(--muted);
font-size:13px;
line-height:1.68;
word-break:keep-all;
}
#boss-guides-archive .empty{
grid-column:1 / -1;
border:0;
border-radius:16px;
background:var(--subtle);
padding:30px 16px;
text-align:center;
color:var(--muted);
font-size:14px;
font-weight:600;
}
@media (max-width:980px){
#boss-guides-archive{
padding:0 12px 56px;
}
#boss-guides-archive h1{
font-size:clamp(24px,3vw,34px);
}
#boss-guides-archive .guide-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:24px;
}
}
@media (max-width:760px){
#boss-guides-archive{
padding:0 10px 48px;
}
#boss-guides-archive .crumbs{
margin-bottom:12px;
font-size:12px;
}
#boss-guides-archive h1{
font-size:20px;
line-height:1.32;
}
#boss-guides-archive .hero-desc{
margin-top:10px;
font-size:13px;
line-height:1.6;
}
#boss-guides-archive .hero-meta{
margin-top:16px;
padding-bottom:20px;
}
#boss-guides-archive .hero-count{
font-size:12px;
}
#boss-guides-archive .guide-grid{
grid-template-columns:1fr;
margin-top:22px;
}
#boss-guides-archive .archive-search + .guide-grid{
margin-top:16px;
}
#boss-guides-archive .archive-search{
display:block;
margin-bottom:0;
}
#boss-guides-archive .archive-search-wrap{
width:100%;
}
#boss-guides-archive .archive-search-input{
height:40px;
font-size:13px;
line-height:40px;
}
#boss-guides-archive .archive-search-count{
margin-top:8px;
font-size:12px;
}
#boss-guides-archive .guides-inline-ad{
margin:0;
padding:0 !important;
}
#boss-guides-archive .guide-card{
padding:14px 0;
}
#boss-guides-archive .guide-title{
font-size:15px;
}
#boss-guides-archive .guide-desc{
font-size:12px;
line-height:1.68;
}
}#boss-guides-canvas{
--bg:#ffffff;
--surface:#ffffff;
--line:#eceef2;
--soft-line:#f1f3f5;
--text:#111827;
--muted:#6b7280;
--faint:#9ca3af;
--subtle:#f8fafc;
--button:#F7F8FB;
--button-hover:#EEF1F6;
--point:#5B7BEA;
--point-soft:rgba(91,123,234,.08);
--point-text:#4E68CF;
--max-width:1280px;
width:100vw;
max-width:none !important;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
background:var(--bg);
color:var(--text);
font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
overflow-x:hidden;
}
#boss-guides-canvas *{ box-sizing:border-box; margin:0; padding:0; }
#boss-guides-canvas a{ color:inherit; text-decoration:none; }
#boss-guides-canvas button,
#boss-guides-canvas input,
#boss-guides-canvas select{ font:inherit; }
#boss-guides-canvas .container{
max-width:var(--max-width);
margin:0 auto;
padding:28px 16px 72px;
}
#boss-guides-canvas .hero{
padding:36px 0 30px;
border-bottom:1px solid var(--line);
text-align:center;
}
#boss-guides-canvas .hero h1{
margin:0;
font-size:clamp(26px,3.2vw,42px);
line-height:1.18;
letter-spacing:-.055em;
font-weight:700;
}
#boss-guides-canvas .hero-desc{
margin:12px 0 0;
color:var(--muted);
font-size:15px;
line-height:1.68;
word-break:keep-all;
}
#boss-guides-canvas .hero-search{
position:relative;
max-width:860px;
margin:28px auto 0;
}
#boss-guides-canvas .section{
padding:0 0 30px;
margin-bottom:34px;
border-bottom:1px solid var(--line);
}
#boss-guides-canvas .hero + .section{
padding-top:30px;
}
#boss-guides-canvas .section:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
#boss-guides-canvas .section-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
#boss-guides-canvas .section-title{
font-size:19px;
line-height:1.35;
letter-spacing:-.03em;
font-weight:700;
color:var(--text);
}
#boss-guides-canvas .section-hint{
font-size:13px;
line-height:1.5;
color:var(--faint);
font-weight:400;
}
#boss-guides-canvas .topic-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
#boss-guides-canvas .topic-collapsible{
position:relative;
--topic-collapsed-height:238px;
--topic-fade-height:86px;
}
#boss-guides-canvas .topic-toggle{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
#boss-guides-canvas .topic-collapsible.has-more{
max-height:var(--topic-collapsed-height);
overflow:hidden;
}
#boss-guides-canvas .topic-collapsible.has-more::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:var(--topic-fade-height);
background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.94) 56%, #fff);
pointer-events:none;
z-index:1;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible.has-more{
max-height:none;
overflow:visible;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible.has-more::after{
display:none;
}
#boss-guides-canvas .topic-more-panel{
position:absolute;
left:0;
right:0;
bottom:0;
z-index:2;
display:flex;
justify-content:center;
padding-top:38px;
padding-bottom:2px;
pointer-events:none;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible .topic-more-panel{
position:relative;
margin-top:12px;
padding-top:0;
}
#boss-guides-canvas .topic-more-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-width:136px;
min-height:50px;
border:1px solid rgba(15,23,42,.08) !important;
border-radius:999px;
background:rgba(255,255,255,.96);
box-shadow:0 10px 26px rgba(15,23,42,.07) !important;
color:#334155;
padding:0 24px;
font-family:inherit;
font-size:15px;
font-weight:700;
letter-spacing:-.03em;
cursor:pointer;
backdrop-filter:blur(10px);
pointer-events:auto;
transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#boss-guides-canvas .topic-more-button:hover{
background:#fff;
transform:translateY(-1px);
box-shadow:0 14px 34px rgba(17,24,39,.11), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#boss-guides-canvas .topic-more-close{
display:none;
}
#boss-guides-canvas .topic-more-button::after{
content:"";
flex:0 0 auto;
width:8px;
height:8px;
border-right:2px solid var(--point);
border-bottom:2px solid var(--point);
margin-top:-3px;
transform:rotate(45deg);
transition:transform .18s ease;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible .topic-more-open{
display:none;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible .topic-more-close{
display:inline;
}
#boss-guides-canvas .topic-toggle:checked + .topic-collapsible .topic-more-button::after{
margin-top:4px;
transform:rotate(225deg);
}
#boss-guides-canvas .topic-card{
display:flex;
min-height:64px;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:4px;
padding:12px 16px;
border:0 !important;
border-radius:18px;
background:var(--button);
box-shadow:none !important;
transition:background .16s ease, color .16s ease;
}
#boss-guides-canvas .topic-card:hover{
background:var(--button-hover);
}
#boss-guides-canvas .topic-card:nth-child(-n+8){
background:var(--point-soft);
}
#boss-guides-canvas .topic-title{
min-width:0;
font-size:14px;
line-height:1.3;
letter-spacing:-.028em;
font-weight:600;
word-break:keep-all;
overflow-wrap:anywhere;
}
#boss-guides-canvas .topic-card:nth-child(-n+8) .topic-title{
color:var(--point-text);
}
#boss-guides-canvas .topic-meta{
font-size:12px;
line-height:1.2;
color:var(--faint);
font-weight:400;
}
#boss-guides-canvas .topic-empty,
#boss-guides-canvas .guide-empty{
border-radius:16px;
background:var(--subtle);
padding:24px;
text-align:center;
color:var(--muted);
font-size:14px;
line-height:1.7;
}
#boss-guides-canvas .controls{
display:flex;
justify-content:flex-end;
margin-bottom:12px;
}
#boss-guides-canvas .search-wrap{
position:relative;
}
#boss-guides-canvas .search-wrap::before{
content:"";
position:absolute;
left:18px;
top:50%;
width:15px;
height:15px;
transform:translateY(-50%);
border:2px solid var(--point);
border-radius:999px;
pointer-events:none;
}
#boss-guides-canvas .search-wrap::after{
content:"";
position:absolute;
left:31px;
top:calc(50% + 5px);
width:8px;
height:2px;
background:var(--point);
transform:rotate(45deg);
border-radius:999px;
pointer-events:none;
}
#boss-guides-canvas .input{
width:100%;
height:74px;
padding:0 92px 0 52px;
border:2px solid rgba(91,123,234,.82) !important;
border-radius:999px;
background:#fff;
box-shadow:none !important;
color:var(--text);
font-size:18px;
font-weight:500;
letter-spacing:-.03em;
outline:none;
caret-color:var(--point);
}
#boss-guides-canvas .hero-search-button{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
border:0;
border-radius:50%;
background:transparent;
color:var(--point);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
}
#boss-guides-canvas .hero-search-button svg{
width:34px;
height:34px;
}
#boss-guides-canvas .input::placeholder{
color:rgba(17,17,17,.42);
}
#boss-guides-canvas .select{
width:180px;
height:38px;
padding:0 16px;
border:0 !important;
border-radius:999px;
background:var(--button);
box-shadow:none !important;
color:#5B6472;
font-size:14px;
font-weight:600;
outline:none;
}
#boss-guides-canvas .input:focus{
border-color:var(--point) !important;
}
#boss-guides-canvas .live-search-results{
max-width:860px;
margin:12px auto 0;
padding:16px;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
text-align:left;
}
#boss-guides-canvas .live-search-results[hidden]{
display:none;
}
#boss-guides-canvas .live-search-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
#boss-guides-canvas .live-search-head strong{
font-size:15px;
line-height:1.35;
letter-spacing:-.03em;
font-weight:700;
color:var(--text);
}
#boss-guides-canvas .live-search-head span{
color:var(--faint);
font-size:12px;
white-space:nowrap;
}
#boss-guides-canvas .live-search-group{
display:grid;
gap:8px;
}
#boss-guides-canvas .live-search-label{
margin:12px 0 2px;
color:#4b5563;
font-size:12px;
font-weight:700;
}
#boss-guides-canvas .live-search-label:first-child{
margin-top:0;
}
#boss-guides-canvas .live-result-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:42px;
padding:10px 12px;
border-radius:12px;
background:var(--subtle);
transition:background .16s ease;
}
#boss-guides-canvas .live-result-item:hover{
background:var(--button-hover);
}
#boss-guides-canvas .live-result-item strong{
min-width:0;
font-size:14px;
line-height:1.35;
letter-spacing:-.03em;
font-weight:600;
word-break:keep-all;
}
#boss-guides-canvas .live-result-item span{
flex:0 0 auto;
color:var(--faint);
font-size:12px;
white-space:nowrap;
}
#boss-guides-canvas .live-search-empty{
padding:18px 12px;
border-radius:12px;
background:var(--subtle);
color:var(--muted);
font-size:13px;
text-align:center;
}
#boss-guides-canvas .guides-inline-ad{
width:100%;
margin:18px 0 0;
padding:0 !important;
}
#boss-guides-canvas .guides-inline-ad .maintalk-inline-display-ad{
width:100%;
padding:0 !important;
}
#boss-guides-canvas .guides-inline-ad .maintalk-inline-display-ad__inner{
width:100%;
aspect-ratio:6 / 1;
background:transparent;
overflow:hidden;
padding:0 !important;
}
#boss-guides-canvas .guides-inline-ad .maintalk-inline-display-ad__ins{
display:block !important;
width:100%;
height:100%;
padding:0 !important;
}
#boss-guides-canvas .active-filters{
display:flex;
gap:8px;
flex-wrap:wrap;
}
#boss-guides-canvas .active-filter{
border:0 !important;
box-shadow:none !important;
background:transparent;
color:rgba(17,17,17,.64);
font-size:13px;
font-weight:600;
letter-spacing:-.03em;
cursor:pointer;
}
#boss-guides-canvas .active-filter::before{
content:"#";
margin-right:2px;
color:var(--point);
font-weight:700;
}
#boss-guides-canvas .active-filter{
color:var(--text);
}
#boss-guides-canvas .guide-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:34px;
row-gap:0;
}
#boss-guides-canvas .guide-grid.is-loading{
opacity:.5;
}
#boss-guides-canvas .guide-card{
display:block;
min-height:0;
padding:18px 0;
border:0 !important;
border-bottom:1px solid var(--soft-line) !important;
border-radius:0;
background:#fff;
box-shadow:none !important;
color:inherit;
cursor:pointer;
}
#boss-guides-canvas .guide-card:hover{
background:#fff;
}
#boss-guides-canvas .guide-card:first-child{
padding-top:0;
}
#boss-guides-canvas .guide-content{
min-width:0;
}
#boss-guides-canvas .guide-meta{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:7px;
}
#boss-guides-canvas .guide-badge{
display:inline-flex;
align-items:center;
height:24px;
padding:0 10px;
border-radius:999px;
background:var(--point-soft);
color:var(--point-text);
font-size:11px;
font-weight:600;
}
#boss-guides-canvas .guide-updated{
font-size:12px;
color:var(--faint);
}
#boss-guides-canvas .guide-title{
margin:0;
font-size:16px;
line-height:1.48;
letter-spacing:-.02em;
font-weight:600;
word-break:keep-all;
display:block;
overflow:visible;
}
#boss-guides-canvas .guide-desc{
margin-top:6px;
color:var(--muted);
font-size:13px;
line-height:1.68;
word-break:keep-all;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
#boss-guides-canvas .pager{
margin-top:18px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
#boss-guides-canvas .pager-info{
font-size:12px;
color:var(--muted);
font-weight:400;
min-width:72px;
text-align:center;
}
#boss-guides-canvas .btn{
height:38px;
padding:0 14px;
border:0 !important;
border-radius:999px;
background:var(--button);
box-shadow:none !important;
color:#5B6472;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background .16s ease;
white-space:nowrap;
}
#boss-guides-canvas .btn:hover{
background:var(--button-hover);
}
#boss-guides-canvas .pager-btn[disabled],
#boss-guides-canvas .pager-btn.is-disabled{
opacity:.45;
cursor:not-allowed;
pointer-events:none;
}
@media (max-width:980px){
#boss-guides-canvas .container{
padding:0 12px 56px;
}
#boss-guides-canvas .hero{
padding:46px 0 36px;
}
#boss-guides-canvas .hero h1{
font-size:clamp(24px,3vw,34px);
}
#boss-guides-canvas .hero-search{
max-width:760px;
margin-top:24px;
}
#boss-guides-canvas .input{
height:64px;
padding:0 76px 0 50px;
font-size:16px;
}
#boss-guides-canvas .hero-search-button{
right:10px;
width:44px;
height:44px;
}
#boss-guides-canvas .hero-search-button svg{
width:24px;
height:24px;
}
#boss-guides-canvas .controls{
justify-content:stretch;
}
#boss-guides-canvas .select{
height:38px;
width:100%;
}
#boss-guides-canvas .topic-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
#boss-guides-canvas .topic-collapsible{
--topic-collapsed-height:274px;
--topic-fade-height:86px;
}
#boss-guides-canvas .guide-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:24px;
}
}
@media (max-width:760px){
#boss-guides-canvas .container{
padding:0 10px 48px;
}
#boss-guides-canvas .hero{
padding:34px 0 28px;
}
#boss-guides-canvas .hero h1{
font-size:20px;
line-height:1.32;
}
#boss-guides-canvas .hero-desc{
margin-top:10px;
font-size:13px;
line-height:1.6;
}
#boss-guides-canvas .hero-search{
margin-top:24px;
}
#boss-guides-canvas .section{
margin-bottom:24px;
padding-bottom:24px;
}
#boss-guides-canvas .section-header{
display:block;
margin-bottom:12px;
}
#boss-guides-canvas .section-title{
font-size:16px;
}
#boss-guides-canvas .section-hint{
margin-top:6px;
font-size:12px;
}
#boss-guides-canvas .input{
height:56px;
padding:0 64px 0 44px;
border-width:1px !important;
font-size:15px;
}
#boss-guides-canvas .hero-search-button{
right:8px;
width:38px;
height:38px;
}
#boss-guides-canvas .hero-search-button svg{
width:28px;
height:28px;
}
#boss-guides-canvas .search-wrap::before{
left:16px;
width:14px;
height:14px;
border-width:1.8px;
}
#boss-guides-canvas .search-wrap::after{
left:28px;
width:7px;
}
#boss-guides-canvas .live-search-results{
padding:14px;
}
#boss-guides-canvas .guides-inline-ad{
margin:0;
padding:0 !important;
}
#boss-guides-canvas .live-search-head{
display:block;
margin-bottom:10px;
}
#boss-guides-canvas .live-search-head span{
display:block;
margin-top:5px;
white-space:normal;
}
#boss-guides-canvas .live-result-item{
align-items:flex-start;
}
#boss-guides-canvas .live-result-item span{
white-space:normal;
text-align:right;
}
#boss-guides-canvas .active-filter{
font-size:12px;
}
#boss-guides-canvas .topic-card{
min-height:56px;
padding:10px 12px;
border-radius:16px;
}
#boss-guides-canvas .topic-collapsible{
--topic-collapsed-height:264px;
}
#boss-guides-canvas .topic-more-button{
min-width:126px;
min-height:46px;
padding:0 22px;
font-size:14px;
}
#boss-guides-canvas .topic-title{
font-size:12px;
}
#boss-guides-canvas .topic-meta{
font-size:11px;
}
#boss-guides-canvas .guide-grid{
grid-template-columns:1fr;
}
#boss-guides-canvas .guide-card{
padding:14px 6px;
}
#boss-guides-canvas .guide-title{
font-size:15px;
}
#boss-guides-canvas .guide-desc{
font-size:12px;
line-height:1.68;
}
}html,
body.maintalk-theme-reset,
body.maintalk-theme-reset #page,
body.maintalk-theme-reset .site,
body.maintalk-theme-reset .site-content,
body.maintalk-theme-reset .site-content .ast-container,
body.maintalk-theme-reset #content,
body.maintalk-theme-reset #content .ast-container,
body.maintalk-theme-reset .content-area,
body.maintalk-theme-reset .site-main,
body.maintalk-theme-reset article,
body.maintalk-theme-reset .entry-content,
body.maintalk-theme-reset .ast-article-single {
background: #ffffff !important;
}
body.maintalk-theme-reset {
overflow-x: hidden;
}
#maintalk-app * {
box-sizing: border-box;
}
html,
body.single,
body.single #page,
body.single .site,
body.single .site-content,
body.single .site-content .ast-container,
body.single #content .ast-container,
body.single .content-area,
body.single .site-main {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
background: #ffffff !important;
overflow-x: clip !important;
}
body.single .site-content .ast-container,
body.single #content .ast-container {
display: block !important;
}
body.single .site .site-content #primary .ast-article-single {
padding-top: 0 !important;
}
#maintalk-app {
margin: 0;
width: 100%;
max-width: 100% !important;
position: relative;
min-height: 100vh;
font-family: "Pretendard", "Noto Sans KR", sans-serif;
background: #f6f7f9;
color: #1f1f1f;
overflow-x: clip;
}
#maintalk-app a {
text-decoration: none;
color: inherit;
}
#maintalk-app button,
#maintalk-app input,
#maintalk-app textarea,
#maintalk-app select {
font: inherit;
}
body.modal-open {
overflow: hidden;
}
#maintalk-app .maintalk-badge-viewer[hidden] {
display: none !important;
}
#maintalk-app .maintalk-badge-viewer {
position: fixed;
inset: 0;
z-index: 9999;
}
#maintalk-app .maintalk-badge-viewer-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
}
#maintalk-app .maintalk-badge-viewer-dialog {
position: relative;
z-index: 1;
width: min(92vw, 920px);
margin: 4vh auto 0;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
}
#maintalk-app .maintalk-badge-viewer-image {
display: block;
width: 100%;
height: auto;
}
#maintalk-app .maintalk-badge-viewer-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
width: 38px;
height: 38px;
border-radius: 8px;
background: rgba(31, 31, 31, 0.8);
color: #ffffff;
font-size: 22px;
cursor: pointer;
}
#maintalk-app .post-manage-box {
margin-top: 18px;
padding: 10px 0 0;
border: none;
border-top: 1px solid #ececec;
border-radius: 0;
background: transparent;
}
#maintalk-app .post-manage-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
#maintalk-app .post-manage-password {
flex: 1 1 240px;
}
#maintalk-app .post-manage-password-box {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
#maintalk-app .post-manage-password-box[hidden] {
display: none;
}
#maintalk-app .post-manage-password .entry-box {
min-height: auto;
padding: 10px 12px;
font-size: 13px;
}
#maintalk-app .post-manage-form {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e9e9e9;
}
#maintalk-app .post-manage-form[hidden] {
display: none;
}
#maintalk-app .post-manage-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 160px;
gap: 10px;
margin-bottom: 10px;
}
#maintalk-app .post-manage-input,
#maintalk-app .post-manage-select,
#maintalk-app .post-manage-textarea {
background: #fff;
}
#maintalk-app .post-manage-input,
#maintalk-app .post-manage-select {
min-height: auto;
padding: 10px 12px;
font-size: 13px;
}
#maintalk-app .post-manage-textarea {
min-height: 120px;
padding: 12px;
font-size: 13px;
}
#maintalk-app .post-manage-actions-form {
justify-content: flex-end;
margin-top: 10px;
}
#maintalk-app .post-manage-actions-inline {
gap: 8px;
}
#maintalk-app .post-manage-link {
border: none;
background: transparent;
padding: 0;
font-size: 12px;
line-height: 1.4;
color: #666;
cursor: pointer;
text-decoration: none;
}
#maintalk-app .post-manage-link.strong {
color: #222;
font-weight: 700;
}
#maintalk-app .maintalk-confirm-modal[hidden] {
display: none !important;
}
#maintalk-app .maintalk-confirm-modal {
position: fixed;
inset: 0;
z-index: 10020;
}
#maintalk-app .maintalk-confirm-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(3px);
}
#maintalk-app .maintalk-confirm-modal__dialog {
position: relative;
z-index: 1;
width: min(92vw, 380px);
margin: min(18vh, 140px) auto 0;
padding: 22px 22px 14px;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
#maintalk-app .maintalk-confirm-modal__eyebrow {
margin: 0 0 8px;
color: #9a9a9a;
font-size: 11px;
font-weight: 700;
letter-spacing: -0.01em;
}
#maintalk-app .maintalk-confirm-modal__title {
margin: 0 0 8px;
color: #161616;
font-size: 22px;
line-height: 1.2;
font-weight: 760;
letter-spacing: -0.04em;
}
#maintalk-app .maintalk-confirm-modal__text {
margin: 0;
color: #666666;
font-size: 14px;
line-height: 1.6;
letter-spacing: -0.02em;
}
#maintalk-app .maintalk-confirm-modal__actions {
display: flex;
justify-content: stretch;
gap: 10px;
margin-top: 14px;
}
#maintalk-app .maintalk-confirm-modal__btn {
flex: 1 1 0;
height: 40px;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.02em;
cursor: pointer;
text-align: center;
}
#maintalk-app .maintalk-confirm-modal__btn.is-ghost {
background: #f3f4f6;
color: #444444;
}
#maintalk-app .maintalk-confirm-modal__btn.is-danger {
background: #161616;
color: #ffffff;
}
#maintalk-app[data-view="single"] {
min-height: 100vh;
background: #f8f7f3;
color: #1d211f;
font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
#maintalk-app[data-view="single"] .page {
width: min(1280px, 100%) !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 34px 18px 80px;
}
#maintalk-app[data-view="single"] .post-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 28px;
align-items: start;
}
#maintalk-app[data-view="single"] .post-main,
#maintalk-app[data-view="single"] .post-side {
min-width: 0;
}
#maintalk-app[data-view="single"] .post-side {
padding-left: 0;
border-left: 0;
}
#maintalk-app[data-view="single"] .post-main {
padding: 28px 28px 36px;
border: 1px solid #e7e4dd;
border-radius: 12px;
background: #fffefb;
box-shadow: 0 12px 32px rgba(39, 92, 73, 0.04);
}
#maintalk-app[data-view="single"] .post-back {
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 14px;
color: #6f746f;
font-size: 11px;
line-height: 1;
font-weight: 400;
letter-spacing: -0.02em;
}
#maintalk-app[data-view="single"] .post-back::before {
content: "‹";
color: #b8b8b8;
font-size: 16px;
transform: translateY(-1px);
}
#maintalk-app[data-view="single"] .post-back:hover {
color: #e9572d;
}
#maintalk-app[data-view="single"] .post-head {
padding-bottom: 20px;
}
#maintalk-app[data-view="single"] .post-kicker-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
#maintalk-app[data-view="single"] .post-kicker-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
#maintalk-app[data-view="single"] .post-category {
display: inline-flex;
align-items: center;
height: auto;
padding: 0;
border-radius: 0;
background: transparent;
color: #275c49;
font-size: 10px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -0.02em;
}
#maintalk-app[data-view="single"] .post-category.is-business {
color: #c9421c;
}
#maintalk-app[data-view="single"] .post-category-detail {
display: inline-flex;
align-items: center;
padding: 4px 7px;
border-radius: 4px;
background: #f0eee8;
color: #6d706c;
font-size: 10px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -0.02em;
}
#maintalk-app[data-view="single"] .post-category-detail[hidden] {
display: none;
}
#maintalk-app[data-view="single"] .post-state {
display: inline-flex;
align-items: center;
gap: 5px;
color: #999994;
font-size: 10px;
font-weight: 400;
letter-spacing: -0.015em;
white-space: nowrap;
}
#maintalk-app[data-view="single"] .post-state::before {
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
background: #e9572d;
}
#maintalk-app[data-view="single"] .post-title {
margin: 0;
color: #1d211f;
font-size: 30px;
line-height: 1.4;
font-weight: 780;
letter-spacing: -0.06em;
word-break: keep-all;
}
#maintalk-app[data-view="single"] .post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
color: #a09f9a;
font-size: 10px;
letter-spacing: -0.02em;
}
#maintalk-app[data-view="single"] .post-author {
display: inline-flex;
align-items: center;
gap: 6px;
color: #666a65;
font-size: 11px;
font-weight: 700;
}
#maintalk-app[data-view="single"] .post-author-avatar {
width: 23px;
height: 23px;
border-radius: 999px;
background: #eee8df;
color: #795d46;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
letter-spacing: -0.04em;
flex: 0 0 auto;
}
#maintalk-app[data-view="single"] .post-dot {
color: #d0d0d0;
}
#maintalk-app[data-view="single"] .maintalk-name-badge {
width: 42px !important;
height: 20px;
min-width: 42px;
max-width: 42px !important;
border-radius: 999px;
object-fit: cover;
background: #f1f1f1;
}
#maintalk-app[data-view="single"] .post-gallery {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 20px;
}
#maintalk-app[data-view="single"] .post-gallery img {
width: 100%;
display: block;
height: auto;
max-height: 760px;
border: 1px solid #e7e4dd;
border-radius: 10px;
object-fit: contain;
background: #f4f1e9;
aspect-ratio: auto;
}
#maintalk-app[data-view="single"] .post-body {
padding: 24px 0 0;
color: #3f4540;
font-size: 16px;
line-height: 1.92;
font-weight: 400;
letter-spacing: -0.026em;
word-break: keep-all;
border-top: none;
margin-top: 0;
}
#maintalk-app[data-view="single"] .post-body p {
margin: 0 0 20px;
}
#maintalk-app[data-view="single"] .post-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e7e4dd;
}
#maintalk-app[data-view="single"] .post-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 999px;
background: #f4f1e9;
color: #666a65;
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.018em;
cursor: pointer;
}
#maintalk-app[data-view="single"] .post-action-btn:hover {
background: #fff1ea;
color: #c9421c;
}
#maintalk-app[data-view="single"] .ad-box {
margin: 24px 0;
display: flex;
justify-content: center;
width: 100%;
}
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad {
margin: 0;
width: 100%;
}
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__inner {
width: 100%;
aspect-ratio: 4 / 1;
height: auto;
border-radius: 8px;
background: #f4f1e9;
color: #999994;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
letter-spacing: -0.015em;
overflow: hidden;
}
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__ins {
display: block !important;
width: 100%;
height: 100%;
}
#maintalk-app[data-view="single"] .comment-section {
padding-top: 2px;
}
#maintalk-app[data-view="single"] .section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
#maintalk-app[data-view="single"] .section-title {
margin: 0;
color: #1d211f;
font-size: 17px;
line-height: 1.35;
font-weight: 640;
letter-spacing: -0.04em;
}
#maintalk-app[data-view="single"] .section-hint {
color: #a0a0a0;
font-size: 12px;
letter-spacing: -0.015em;
}
#maintalk-app[data-view="single"] .comment-list,
#maintalk-app[data-view="single"] .related-list {
display: flex;
flex-direction: column;
gap: 8px;
}
#maintalk-app[data-view="single"] .comment-card {
padding: 12px 0;
border-top: none;
}
#maintalk-app[data-view="single"] .comment-card + .comment-card,
#maintalk-app[data-view="single"] .related-card + .related-card {
border-top: 1px solid #efede7;
}
#maintalk-app[data-view="single"] .comment-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 9px;
flex-wrap: nowrap;
}
#maintalk-app[data-view="single"] .comment-author,
#maintalk-app[data-view="single"] .comment-profile {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
#maintalk-app[data-view="single"] .comment-avatar {
width: 28px;
height: 28px;
border-radius: 999px;
background: #eee8df;
color: #795d46;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.03em;
}
#maintalk-app[data-view="single"] .comment-name {
display: block;
color: #252525;
font-size: 13px;
font-weight: 620;
letter-spacing: -0.025em;
}
#maintalk-app[data-view="single"] .comment-sub,
#maintalk-app[data-view="single"] .comment-time {
display: block;
margin-top: 2px;
color: #a0a0a0;
font-size: 12px;
line-height: 1.3;
}
#maintalk-app[data-view="single"] .comment-body {
padding-left: 37px;
color: #444444;
font-size: 14px;
line-height: 1.78;
font-weight: 400;
letter-spacing: -0.02em;
word-break: keep-all;
margin-top: 0;
}
#maintalk-app[data-view="single"] .comment-body p {
margin: 0;
}
#maintalk-app[data-view="single"] .comment-actions {
display: flex;
gap: 12px;
padding-left: 37px;
margin-top: 6px;
}
#maintalk-app[data-view="single"] .maintalk-comment-link,
#maintalk-app[data-view="single"] .comment-link {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: #8a8a8a;
cursor: pointer;
display: inline-flex;
align-items: center;
font-size: 12px;
line-height: 1.4;
font-weight: 500;
letter-spacing: -0.015em;
margin: 0;
min-height: 0;
padding: 0;
text-decoration: none;
text-shadow: none;
}
#maintalk-app[data-view="single"] .maintalk-comment-link:hover,
#maintalk-app[data-view="single"] .comment-link:hover {
color: #e9572d;
background: transparent;
border: 0;
box-shadow: none;
}
#maintalk-app[data-view="single"] .maintalk-comment-link:active,
#maintalk-app[data-view="single"] .maintalk-comment-link:focus,
#maintalk-app[data-view="single"] .comment-link:active,
#maintalk-app[data-view="single"] .comment-link:focus {
background: transparent;
border: 0;
box-shadow: none;
}
#maintalk-app[data-view="single"] .reply-thread {
position: relative;
margin: 10px 0 0 37px;
padding: 10px 0 0 18px;
border-left: 2px solid #f1f1f1;
}
#maintalk-app[data-view="single"] .reply-thread::before {
content: "";
position: absolute;
left: -2px;
top: 20px;
width: 2px;
height: 24px;
border-radius: 999px;
background: #e9572d;
}
#maintalk-app[data-view="single"] .reply-thread:not(.has-replies) {
margin: 0;
padding: 0;
border-left: none;
}
#maintalk-app[data-view="single"] .reply-thread:not(.has-replies)::before {
display: none;
}
#maintalk-app[data-view="single"] .reply-card {
padding: 0;
background: transparent;
}
#maintalk-app[data-view="single"] .reply-card + .reply-card {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #efede7;
}
#maintalk-app[data-view="single"] .reply-badge {
display: inline-flex;
margin-bottom: 8px;
color: #8a8a8a;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.015em;
}
#maintalk-app[data-view="single"] .reply-input-box {
margin-top: 26px;
padding: 18px;
border-radius: 12px;
background: #f4f1e9;
border: 1px solid #e7e4dd;
}
#maintalk-app[data-view="single"] .guest-row,
#maintalk-app[data-view="single"] .maintalk-comment-guest-row {
display: grid;
grid-template-columns: minmax(0, 220px);
gap: 10px;
margin-bottom: 10px;
}
#maintalk-app[data-view="single"] .guest-input,
#maintalk-app[data-view="single"] .entry-box,
#maintalk-app[data-view="single"] .reply-box {
width: 100%;
border: 0;
outline: none;
background: #ffffff;
color: #2a2a2a;
box-shadow: inset 0 0 0 1px #e7e4dd;
}
#maintalk-app[data-view="single"] .maintalk-comment-guest-input {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #e4e4e4;
border-radius: 0;
background: #fff;
font-size: 13px;
color: #2d2a24;
}
#maintalk-app[data-view="single"] .guest-input {
height: 40px;
padding: 0 13px;
border-radius: 13px;
font-size: 13px;
min-height: 0;
}
#maintalk-app[data-view="single"] .entry-box {
min-height: 118px;
padding: 15px;
border-radius: 16px;
resize: vertical;
font-size: 14px;
line-height: 1.7;
}
#maintalk-app[data-view="single"] .reply-box {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
min-height: 72px;
padding: 12px 13px;
border: 1px solid #ebe8f1;
border-radius: 12px;
resize: vertical;
font-size: 14px;
color: #2d2a24;
line-height: 1.65;
}
#maintalk-app[data-view="single"] .guest-input:focus,
#maintalk-app[data-view="single"] .entry-box:focus,
#maintalk-app[data-view="single"] .reply-box:focus,
#maintalk-app[data-view="single"] .reply-input-box textarea:focus,
#maintalk-app[data-view="single"] .maintalk-comment-guest-input:focus {
outline: none;
box-shadow: inset 0 0 0 1px #d6d6d6;
}
#maintalk-app[data-view="single"] .entry-actions,
#maintalk-app[data-view="single"] .button-row,
#maintalk-app[data-view="single"] .top-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
#maintalk-app[data-view="single"] .entry-actions {
margin-top: 12px;
}
#maintalk-app[data-view="single"] .modal-note {
color: #9a9a9a;
font-size: 12px;
line-height: 1.4;
letter-spacing: -0.015em;
}
#maintalk-app[data-view="single"] .comment-btn,
#maintalk-app[data-view="single"] .maintalk-comment-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 56px;
height: 32px;
padding: 0 11px;
border: 0;
border-radius: 999px;
background: #275c49;
color: #ffffff;
font-size: 12px;
font-weight: 620;
line-height: 1;
cursor: pointer;
}
#maintalk-app[data-view="single"] .comment-btn.secondary,
#maintalk-app[data-view="single"] .maintalk-comment-btn.secondary {
background: transparent;
color: #777777;
}
#maintalk-app[data-view="single"] .comment-btn:hover,
#maintalk-app[data-view="single"] .maintalk-comment-btn:hover {
background: #1d493a;
}
#maintalk-app[data-view="single"] .comment-btn.secondary:hover,
#maintalk-app[data-view="single"] .maintalk-comment-btn.secondary:hover {
background: #f0f0f0;
color: #333333;
}
#maintalk-app[data-view="single"] .maintalk-comment-btn:focus-visible,
#maintalk-app[data-view="single"] .maintalk-comment-link:focus-visible {
outline: 2px solid #1f1f1f;
outline-offset: 2px;
}
#maintalk-app[data-view="single"] .side-card {
position: sticky;
top: 88px;
padding: 22px;
border: 1px solid #e7e4dd;
border-radius: 12px;
background: #fffefb;
box-shadow: 0 12px 32px rgba(39, 92, 73, 0.04);
}
#maintalk-app[data-view="single"] .side-title {
margin: 0 0 8px;
color: #1d211f;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
letter-spacing: -0.035em;
}
#maintalk-app[data-view="single"] .side-title + .related-list {
margin-bottom: 24px;
}
#maintalk-app[data-view="single"] .related-card {
padding: 8px 0;
}
#maintalk-app[data-view="single"] .connection-title,
#maintalk-app[data-view="single"] .related-title {
display: block;
color: #222222;
font-size: 13px;
line-height: 1.5;
font-weight: 500;
letter-spacing: -0.025em;
word-break: keep-all;
}
#maintalk-app[data-view="single"] .related-card-meta {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
color: #275c49;
font-size: 10px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -0.015em;
}
#maintalk-app[data-view="single"] .related-card-dot {
color: #c7c7c7;
}
#maintalk-app[data-view="single"] .related-card-title {
display: block;
color: inherit;
font-size: 13.5px;
line-height: 1.5;
font-weight: 650;
letter-spacing: -0.025em;
}
#maintalk-app[data-view="single"] .connection-title:hover,
#maintalk-app[data-view="single"] .related-title:hover {
color: #181818;
transform: translateY(-1px);
}
#maintalk-app[data-view="single"] .side-mini {
margin-top: 28px;
padding: 18px;
border-radius: 10px;
background: #fff8ef;
border: 1px solid #eadcca;
}
#maintalk-app[data-view="single"] .side-mini-title {
margin: 0 0 8px;
color: #303030;
font-size: 13px;
font-weight: 620;
letter-spacing: -0.025em;
}
#maintalk-app[data-view="single"] .side-mini-text {
margin: 0;
color: #8a8a8a;
font-size: 12.5px;
line-height: 1.55;
letter-spacing: -0.018em;
word-break: keep-all;
}
@media (max-width: 980px) {
#maintalk-app[data-view="single"] .page {
padding: 24px 14px 72px;
}
#maintalk-app[data-view="single"] .post-layout {
grid-template-columns: 1fr;
gap: 20px;
}
#maintalk-app[data-view="single"] .post-main {
padding: 24px 20px 30px;
}
#maintalk-app[data-view="single"] .post-side {
padding-left: 0;
border-left: 0;
}
#maintalk-app[data-view="single"] .side-card {
position: static;
}
}
@media screen and (max-width: 640px) {
#maintalk-app .post-manage-box {
padding: 10px 0 0;
}
#maintalk-app .post-manage-grid {
grid-template-columns: 1fr;
}
#maintalk-app .post-manage-password-box {
align-items: flex-start;
}
#maintalk-app[data-view="single"] {
background: #ffffff;
}
#maintalk-app[data-view="single"] .page {
width: 100% !important;
padding: 4px 0 36px;
}
#maintalk-app[data-view="single"] .post-main {
padding: 12px 12px 18px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#maintalk-app[data-view="single"] .post-back {
margin-bottom: 8px;
font-size: 10px;
}
#maintalk-app[data-view="single"] .post-kicker-row {
gap: 8px;
margin-bottom: 6px;
}
#maintalk-app[data-view="single"] .post-kicker-meta {
gap: 5px;
}
#maintalk-app[data-view="single"] .post-category-detail {
padding: 3px 6px;
}
#maintalk-app[data-view="single"] .post-title {
font-size: 20px;
line-height: 1.4;
}
#maintalk-app[data-view="single"] .post-meta {
gap: 5px;
margin-top: 10px;
font-size: 10px;
}
#maintalk-app[data-view="single"] .post-gallery {
grid-template-columns: 1fr;
gap: 8px;
margin-top: 16px;
}
#maintalk-app[data-view="single"] .post-gallery img {
border-radius: 16px;
}
#maintalk-app[data-view="single"] .post-body {
padding-top: 20px;
font-size: 14.5px;
line-height: 1.8;
overflow-wrap: anywhere;
}
#maintalk-app[data-view="single"] .post-body img,
#maintalk-app[data-view="single"] .post-body video,
#maintalk-app[data-view="single"] .post-body iframe,
#maintalk-app[data-view="single"] .post-body table {
max-width: 100%;
height: auto;
}
#maintalk-app[data-view="single"] .post-actions {
gap: 8px;
margin-top: 20px;
padding-bottom: 20px;
}
#maintalk-app[data-view="single"] .post-action-btn {
height: 28px;
padding: 0 9px;
font-size: 11px;
}
#maintalk-app[data-view="single"] .comment-body,
#maintalk-app[data-view="single"] .comment-actions {
padding-left: 0;
}
#maintalk-app[data-view="single"] .reply-thread {
margin-left: 0;
padding-left: 15px;
}
#maintalk-app[data-view="single"] .reply-input-box {
padding: 14px;
border-radius: 10px;
}
#maintalk-app[data-view="single"] .post-side {
padding: 0 6px;
}
#maintalk-app[data-view="single"] .side-card {
padding: 8px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
#maintalk-app[data-view="single"] .comment-btn,
#maintalk-app[data-view="single"] .maintalk-comment-btn {
min-width: 52px;
height: 30px;
padding: 0 10px;
font-size: 11.5px;
}
#maintalk-app[data-view="single"] .guest-row,
#maintalk-app[data-view="single"] .maintalk-comment-guest-row {
grid-template-columns: 1fr;
}
} #maintalk-app[data-view="single"] {
--single-bg: #f7f8f9;
--single-surface: #ffffff;
--single-soft: #f1f3f2;
--single-warm: #fff4ed;
--single-text: #17191c;
--single-text-2: #62686d;
--single-text-3: #969da2;
--single-line: rgba(23, 25, 28, .07);
--single-brand: #e95d38;
--single-brand-soft: rgba(233, 93, 56, .11);
--single-green: #277565;
--single-green-soft: #eaf6f2;
min-height: 100vh;
background: var(--single-bg);
color: var(--single-text);
font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
letter-spacing: -.025em;
}
#maintalk-app[data-view="single"] .page {
width: min(1280px, 100%) !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 28px 0 76px;
}
#maintalk-app[data-view="single"] .post-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 326px;
gap: 28px;
align-items: start;
}
#maintalk-app[data-view="single"] .post-main,
#maintalk-app[data-view="single"] .post-side {
min-width: 0;
}
#maintalk-app[data-view="single"] .post-main {
overflow: visible;
padding: 0;
border: 0;
border-radius: 24px;
background: var(--single-surface);
box-shadow: 0 14px 36px rgba(33, 41, 47, .05);
}
#maintalk-app[data-view="single"] .post-back {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 34px 38px 27px;
color: var(--single-text-3);
font-size: 12px;
line-height: 1;
font-weight: 580;
}
#maintalk-app[data-view="single"] .post-back::before {
content: "‹";
color: currentColor;
font-size: 18px;
line-height: 1;
transform: translateY(-1px);
}
#maintalk-app[data-view="single"] .post-back:hover { color: var(--single-brand); }
#maintalk-app[data-view="single"] .post-head {
padding: 0 38px 28px;
}
#maintalk-app[data-view="single"] .post-kicker-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 13px;
}
#maintalk-app[data-view="single"] .post-kicker-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
#maintalk-app[data-view="single"] .post-category {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 7px;
background: var(--single-green-soft);
color: var(--single-green);
font-size: 11px;
line-height: 1;
font-weight: 720;
letter-spacing: -.02em;
}
#maintalk-app[data-view="single"] .post-category.is-business {
background: var(--single-brand-soft);
color: #d14f2d;
}
#maintalk-app[data-view="single"] .post-category-detail {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 7px;
background: var(--single-soft);
color: var(--single-text-2);
font-size: 11px;
line-height: 1;
font-weight: 680;
}
#maintalk-app[data-view="single"] .post-category-detail[hidden] { display: none; }
#maintalk-app[data-view="single"] .post-state {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--single-text-3);
font-size: 10px;
font-weight: 560;
white-space: nowrap;
}
#maintalk-app[data-view="single"] .post-state::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--single-brand);
}
#maintalk-app[data-view="single"] .post-title {
max-width: 790px;
margin: 0;
color: var(--single-text);
font-size: clamp(25px, 3vw, 35px);
line-height: 1.3;
font-weight: 760;
letter-spacing: -.065em;
word-break: keep-all;
}
#maintalk-app[data-view="single"] .post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 23px;
color: var(--single-text-3);
font-size: 11px;
}
#maintalk-app[data-view="single"] .post-author {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--single-text);
font-size: 12px;
font-weight: 700;
}
#maintalk-app[data-view="single"] .post-author-avatar {
display: inline-grid;
place-items: center;
width: 31px;
height: 31px;
flex: 0 0 auto;
border-radius: 50%;
background: #f5e6db;
color: #925e42;
font-size: 12px;
font-weight: 750;
}
#maintalk-app[data-view="single"] .post-author-name { color: var(--single-text); }
#maintalk-app[data-view="single"] .post-dot { color: #c5c9cb; }
#maintalk-app[data-view="single"] .maintalk-name-badge {
width: 42px !important;
height: 20px;
min-width: 42px;
max-width: 42px !important;
border-radius: 999px;
object-fit: cover;
background: var(--single-soft);
}
#maintalk-app[data-view="single"] .post-gallery {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 38px 25px !important;
}
#maintalk-app[data-view="single"] .post-gallery img {
display: block;
width: 100%;
height: auto;
max-height: 760px;
border: 0 !important;
border-radius: 16px !important;
background: transparent;
object-fit: contain;
}
#maintalk-app[data-view="single"] .post-body {
padding: 0 38px 30px;
color: #3e4549;
font-size: 16px;
line-height: 1.9;
font-weight: 400;
letter-spacing: -.026em;
word-break: keep-all;
border: 0;
margin: 0;
}
#maintalk-app[data-view="single"] .post-body p { margin: 0 0 20px; }
#maintalk-app[data-view="single"] .post-body h2,
#maintalk-app[data-view="single"] .post-body h3 {
margin: 28px 0 12px;
color: var(--single-text);
line-height: 1.45;
letter-spacing: -.045em;
}
#maintalk-app[data-view="single"] .post-body h2 { font-size: 22px; font-weight: 750; }
#maintalk-app[data-view="single"] .post-body h3 { font-size: 18px; font-weight: 720; }
#maintalk-app[data-view="single"] .post-body ul,
#maintalk-app[data-view="single"] .post-body ol {
margin: 0 0 21px;
padding-left: 22px;
}
#maintalk-app[data-view="single"] .post-body li { margin: 4px 0; }
#maintalk-app[data-view="single"] .post-body blockquote {
margin: 27px 0;
padding: 20px 22px;
border: 0;
border-radius: 16px;
background: var(--single-warm);
color: #7a4a38;
font-size: 15px;
line-height: 1.7;
font-weight: 650;
}
#maintalk-app[data-view="single"] .post-body img,
#maintalk-app[data-view="single"] .post-body video,
#maintalk-app[data-view="single"] .post-body iframe,
#maintalk-app[data-view="single"] .post-body table {
max-width: 100%;
height: auto;
}
#maintalk-app[data-view="single"] .post-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 38px;
padding: 22px 0;
border: 0;
box-shadow: inset 0 1px 0 var(--single-line);
}
#maintalk-app[data-view="single"] .post-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: var(--single-soft);
color: var(--single-text-2);
font-size: 12px;
font-weight: 620;
cursor: pointer;
}
#maintalk-app[data-view="single"] .post-action-btn:hover {
background: var(--single-brand-soft);
color: var(--single-brand);
}
#maintalk-app[data-view="single"] .post-manage-box {
margin: 0 38px 22px;
padding: 14px 0 0;
border-top: 1px solid var(--single-line);
}
#maintalk-app[data-view="single"] .ad-box,
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad,
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__inner {
overflow: visible !important;
background: transparent !important;
border-radius: 0 !important;
}
#maintalk-app[data-view="single"] .ad-box {
display: block;
width: auto;
min-height: 112px;
margin: 0 38px 30px;
padding: 0;
}
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad,
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__inner {
width: 100%;
height: auto !important;
min-height: 112px;
aspect-ratio: auto !important;
display: block;
}
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__ins {
display: block !important;
width: 100%;
}
#maintalk-app[data-view="single"] .comment-section {
padding: 28px 38px 34px;
border-radius: 0 0 24px 24px;
background: #fcfcfb;
}
#maintalk-app[data-view="single"] .section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 13px;
}
#maintalk-app[data-view="single"] .section-title {
margin: 0;
color: var(--single-text);
font-size: 17px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -.045em;
}
#maintalk-app[data-view="single"] .section-hint,
#maintalk-app[data-view="single"] .comment-sort {
color: var(--single-text-3);
font-size: 11px;
font-weight: 560;
}
#maintalk-app[data-view="single"] .comment-sort {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
#maintalk-app[data-view="single"] .comment-list,
#maintalk-app[data-view="single"] .related-list {
display: flex;
flex-direction: column;
gap: 0;
}
#maintalk-app[data-view="single"] .comment-card {
padding: 20px 0;
border: 0 !important;
border-top: 0 !important;
box-shadow: inset 0 -1px 0 var(--single-line);
}
#maintalk-app[data-view="single"] .comment-card:last-child { box-shadow: none; }
#maintalk-app[data-view="single"] .comment-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
}
#maintalk-app[data-view="single"] .comment-author,
#maintalk-app[data-view="single"] .comment-profile {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
#maintalk-app[data-view="single"] .comment-author::before {
content: "사";
display: inline-grid;
place-items: center;
width: 29px;
height: 29px;
flex: 0 0 auto;
border-radius: 50%;
background: #f5e6db;
color: #925e42;
font-size: 11px;
font-weight: 750;
}
#maintalk-app[data-view="single"] .comment-name {
display: block;
color: var(--single-text);
font-size: 12px;
font-weight: 700;
}
#maintalk-app[data-view="single"] .comment-sub,
#maintalk-app[data-view="single"] .comment-time {
display: block;
margin-top: 3px;
color: var(--single-text-3);
font-size: 10px;
line-height: 1.3;
}
#maintalk-app[data-view="single"] .comment-body {
padding-left: 38px;
color: #454c50;
font-size: 13px;
line-height: 1.75;
font-weight: 400;
letter-spacing: -.02em;
word-break: keep-all;
}
#maintalk-app[data-view="single"] .comment-body p { margin: 0; }
#maintalk-app[data-view="single"] .comment-actions {
display: flex;
gap: 13px;
padding-left: 38px;
margin-top: 8px;
}
#maintalk-app[data-view="single"] .maintalk-comment-link,
#maintalk-app[data-view="single"] .comment-link {
color: var(--single-text-3);
font-size: 11px;
font-weight: 560;
}
#maintalk-app[data-view="single"] .maintalk-comment-link:hover,
#maintalk-app[data-view="single"] .comment-link:hover { color: var(--single-brand); }
#maintalk-app[data-view="single"] .reply-thread {
position: relative;
margin: 14px 0 0 38px;
padding: 10px 0 0 17px;
border-left: 2px solid #e9eeec;
}
#maintalk-app[data-view="single"] .reply-thread::before {
top: 19px;
height: 24px;
background: var(--single-brand);
}
#maintalk-app[data-view="single"] .reply-card {
padding: 0;
background: transparent;
}
#maintalk-app[data-view="single"] .reply-badge {
display: inline-flex;
margin-bottom: 8px;
color: var(--single-text-3);
font-size: 11px;
font-weight: 560;
}
#maintalk-app[data-view="single"] .reply-input-box {
margin-top: 19px;
padding: 17px;
border: 0 !important;
border-radius: 17px;
background: var(--single-soft);
}
#maintalk-app[data-view="single"] .guest-input,
#maintalk-app[data-view="single"] .entry-box,
#maintalk-app[data-view="single"] .reply-box {
border: 0;
border-radius: 12px;
background: var(--single-surface);
box-shadow: none;
}
#maintalk-app[data-view="single"] .entry-box {
min-height: 92px;
padding: 13px;
font-size: 13px;
line-height: 1.65;
}
#maintalk-app[data-view="single"] .reply-box {
min-height: 72px;
padding: 12px 13px;
}
#maintalk-app[data-view="single"] .guest-input:focus,
#maintalk-app[data-view="single"] .entry-box:focus,
#maintalk-app[data-view="single"] .reply-box:focus,
#maintalk-app[data-view="single"] .reply-input-box textarea:focus,
#maintalk-app[data-view="single"] .maintalk-comment-guest-input:focus {
box-shadow: inset 0 0 0 2px rgba(233, 93, 56, .2);
}
#maintalk-app[data-view="single"] .comment-btn,
#maintalk-app[data-view="single"] .maintalk-comment-btn {
min-width: 56px;
height: 32px;
border: 0;
border-radius: 999px;
background: #202427;
color: #ffffff;
font-size: 11px;
font-weight: 680;
}
#maintalk-app[data-view="single"] .comment-btn.secondary,
#maintalk-app[data-view="single"] .maintalk-comment-btn.secondary {
background: transparent;
color: var(--single-text-2);
}
#maintalk-app[data-view="single"] .comment-btn:hover,
#maintalk-app[data-view="single"] .maintalk-comment-btn:hover { background: #111416; }
#maintalk-app[data-view="single"] .comment-btn.secondary:hover,
#maintalk-app[data-view="single"] .maintalk-comment-btn.secondary:hover {
background: rgba(23, 25, 28, .06);
color: var(--single-text);
}
#maintalk-app[data-view="single"] .post-side {
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 94px;
padding: 0;
}
#maintalk-app[data-view="single"] .single-side-block {
padding: 22px;
border: 0;
border-radius: 20px;
background: var(--single-surface);
box-shadow: 0 14px 36px rgba(33, 41, 47, .05);
}
#maintalk-app[data-view="single"] .single-side-block .side-title {
margin: 0 0 15px;
color: var(--single-text);
font-size: 14px;
line-height: 1.35;
font-weight: 750;
letter-spacing: -.04em;
}
#maintalk-app[data-view="single"] .single-summary-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
#maintalk-app[data-view="single"] .single-summary-chip {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0 9px;
border-radius: 8px;
background: var(--single-soft);
color: var(--single-text-2);
font-size: 11px;
font-weight: 650;
}
#maintalk-app[data-view="single"] .single-summary-chip.is-main {
background: var(--single-brand-soft);
color: var(--single-brand);
}
#maintalk-app[data-view="single"] .single-side-description {
margin: 13px 0 0;
color: var(--single-text-3);
font-size: 11px;
line-height: 1.6;
}
#maintalk-app[data-view="single"] .single-side-block .related-card {
padding: 13px 0;
border: 0 !important;
border-top: 0 !important;
box-shadow: inset 0 -1px 0 var(--single-line);
}
#maintalk-app[data-view="single"] .single-side-block .related-card:first-child { padding-top: 0; }
#maintalk-app[data-view="single"] .single-side-block .related-card:last-child { padding-bottom: 0; box-shadow: none; }
#maintalk-app[data-view="single"] .single-side-block .related-card-meta {
display: inline-flex;
align-items: center;
margin-bottom: 6px;
color: var(--single-green);
font-size: 10px;
line-height: 1.35;
font-weight: 720;
}
#maintalk-app[data-view="single"] .single-side-block .related-card-title {
display: block;
color: var(--single-text);
font-size: 13px;
line-height: 1.48;
font-weight: 690;
letter-spacing: -.025em;
}
#maintalk-app[data-view="single"] .single-side-block .connection-title:hover .related-card-title { color: var(--single-brand); }
#maintalk-app[data-view="single"] .single-rank-list {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
#maintalk-app[data-view="single"] .single-rank-item {
display: grid;
grid-template-columns: 25px minmax(0, 1fr);
gap: 8px;
align-items: start;
padding: 11px 0;
box-shadow: inset 0 -1px 0 var(--single-line);
}
#maintalk-app[data-view="single"] .single-rank-item:first-child { padding-top: 0; }
#maintalk-app[data-view="single"] .single-rank-item:last-child { padding-bottom: 0; box-shadow: none; }
#maintalk-app[data-view="single"] .single-rank-number { color: var(--single-brand); font-size: 11px; font-weight: 760; }
#maintalk-app[data-view="single"] .single-rank-item a { display: block; min-width: 0; }
#maintalk-app[data-view="single"] .single-rank-item strong {
display: block;
color: var(--single-text);
font-size: 12px;
line-height: 1.45;
font-weight: 650;
}
#maintalk-app[data-view="single"] .single-rank-item a:hover strong { color: var(--single-brand); }
#maintalk-app[data-view="single"] .single-rank-item a span { display: block; margin-top: 4px; color: var(--single-text-3); font-size: 10px; }
#maintalk-app[data-view="single"] .single-rank-empty { color: var(--single-text-3); font-size: 11px; }
#maintalk-app[data-view="single"] .single-guide-link {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
box-shadow: inset 0 -1px 0 var(--single-line);
}
#maintalk-app[data-view="single"] .single-guide-link:first-of-type { padding-top: 0; }
#maintalk-app[data-view="single"] .single-guide-link:last-of-type { padding-bottom: 0; box-shadow: none; }
#maintalk-app[data-view="single"] .single-guide-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; background: var(--single-warm); color: var(--single-brand); font-size: 14px; font-weight: 750; }
#maintalk-app[data-view="single"] .single-guide-link strong,
#maintalk-app[data-view="single"] .single-guide-link small { display: block; }
#maintalk-app[data-view="single"] .single-guide-link strong { color: var(--single-text); font-size: 12px; line-height: 1.45; font-weight: 680; }
#maintalk-app[data-view="single"] .single-guide-link small { margin-top: 3px; color: var(--single-text-3); font-size: 10px; }
#maintalk-app[data-view="single"] .single-guide-link:hover strong { color: var(--single-brand); }
#maintalk-app[data-view="single"] .single-write-block { background: #202427; color: #ffffff; }
#maintalk-app[data-view="single"] .single-write-block .side-title { color: #ffffff; font-size: 17px; letter-spacing: -.055em; }
#maintalk-app[data-view="single"] .single-write-block > p { margin: 0; color: rgba(255,255,255,.66); font-size: 11px; line-height: 1.6; }
#maintalk-app[data-view="single"] .single-write-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-top: 17px;
}
#maintalk-app[data-view="single"] .single-write-links a {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 0 10px;
border-radius: 8px;
background: rgba(255,255,255,.09);
color: rgba(255,255,255,.84);
font-size: 10px;
font-weight: 620;
}
#maintalk-app[data-view="single"] .single-write-links a:hover { background: rgba(255,255,255,.16); }
@media (max-width: 980px) {
#maintalk-app[data-view="single"] .page { padding: 24px 14px 72px; }
#maintalk-app[data-view="single"] .post-layout { grid-template-columns: 1fr; gap: 20px; }
#maintalk-app[data-view="single"] .post-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#maintalk-app[data-view="single"] .single-write-block { grid-column: 1 / -1; }
}
@media screen and (max-width: 640px) {
#maintalk-app[data-view="single"] { background: #ffffff; }
#maintalk-app[data-view="single"] .page { width: 100% !important; padding: 17px 14px 46px; }
#maintalk-app[data-view="single"] .post-main { margin: 0 -14px; border-radius: 0; box-shadow: none; }
#maintalk-app[data-view="single"] .post-back { margin: 21px 14px 22px; font-size: 11px; }
#maintalk-app[data-view="single"] .post-head { padding: 0 14px 22px; }
#maintalk-app[data-view="single"] .post-kicker-row { margin-bottom: 10px; }
#maintalk-app[data-view="single"] .post-title { font-size: 24px; line-height: 1.38; }
#maintalk-app[data-view="single"] .post-meta { gap: 6px; margin-top: 18px; font-size: 10px; }
#maintalk-app[data-view="single"] .post-author { font-size: 11px; }
#maintalk-app[data-view="single"] .post-author-avatar { width: 28px; height: 28px; }
#maintalk-app[data-view="single"] .post-gallery { margin: 0 14px 22px !important; gap: 8px; }
#maintalk-app[data-view="single"] .post-body { padding: 0 14px 23px; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
#maintalk-app[data-view="single"] .post-body h2 { font-size: 19px; }
#maintalk-app[data-view="single"] .post-body h3 { font-size: 16px; }
#maintalk-app[data-view="single"] .post-body blockquote { margin: 22px 0; padding: 16px; font-size: 13px; }
#maintalk-app[data-view="single"] .post-actions { margin: 0 14px; padding: 18px 0; }
#maintalk-app[data-view="single"] .post-action-btn { min-height: 32px; padding: 0 10px; font-size: 11px; }
#maintalk-app[data-view="single"] .post-manage-box { margin: 0 14px 20px; }
#maintalk-app[data-view="single"] .ad-box { min-height: 82px; margin: 0 14px 23px; }
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad,
#maintalk-app[data-view="single"] .ad-box .maintalk-inline-display-ad__inner { min-height: 82px; }
#maintalk-app[data-view="single"] .comment-section { padding: 23px 14px 25px; border-radius: 0; }
#maintalk-app[data-view="single"] .section-title { font-size: 16px; }
#maintalk-app[data-view="single"] .comment-card { padding: 17px 0; }
#maintalk-app[data-view="single"] .comment-body,
#maintalk-app[data-view="single"] .comment-actions { padding-left: 0; }
#maintalk-app[data-view="single"] .reply-thread { margin-left: 0; padding-left: 14px; }
#maintalk-app[data-view="single"] .reply-input-box { padding: 14px; border-radius: 14px; }
#maintalk-app[data-view="single"] .post-side { display: flex; gap: 11px; }
#maintalk-app[data-view="single"] .single-side-block { padding: 18px; border-radius: 17px; box-shadow: none; }
#maintalk-app[data-view="single"] .single-write-block { grid-column: auto; }
}