@charset "UTF-8";
/* =====================================================
NEW게임노트 스킨 CSS
- 색을 바꾸고 싶으면 바로 아래 :root 안의 값만 고치면 됩니다.
- 순서: 색/글꼴 → 기본 → 상단 메뉴 → 글 제목 영역 → 본문
→ 강의용 요소(목차·카드·버튼·광고) → 글 목록 → 푸터 → 모바일
===================================================== */
:root{
--violet: #5b33e6; /* 대표색 (제목 배경, 링크, 버튼) */
--violet-deep: #3a1fa6; /* 대표색 진한 버전 */
--violet-tint: #f3f0fd; /* 대표색 아주 옅은 배경 */
--yellow: #ffe14d; /* 형광펜, 카테고리 스티커 */
--yellow-tint: #fff8d1; /* 옅은 노랑 배경 */
--ink: #1c1633; /* 제목 글씨, 굵은 테두리 */
--text: #2a2640; /* 본문 글씨 */
--muted: #7b7791; /* 날짜 등 보조 글씨 */
--line: #e4e1ee; /* 얇은 구분선 */
--paper: #ffffff; /* 바탕 */
--paper-2: #f7f6fb; /* 옅은 회색 바탕 */
--font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
--font-pixel: "Galmuri11", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
--plus: polygon(33.3% 0, 66.6% 0, 66.6% 33.3%, 100% 33.3%, 100% 66.6%, 66.6% 66.6%, 66.6% 100%, 33.3% 100%, 33.3% 66.6%, 0 66.6%, 0 33.3%, 33.3% 33.3%);
/* 예전 네이비 테마 변수 (글 안에서 쓰였을 경우를 대비해 새 색으로 연결) */
--navy-700: var(--violet-deep);
--navy-600: var(--violet-deep);
--navy-500: var(--violet);
--navy-400: var(--violet);
--navy-200: var(--violet-tint);
--ink-900: var(--ink);
--ink-800: var(--ink);
--border-soft: var(--line);
}
/* =====================================================
기본 (reset)
===================================================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea,button{vertical-align:middle}
input::-ms-clear{display:none}
button{border:0 none;background-color:transparent;cursor:pointer}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper)}
body,th,td,input,select,textarea,button{font-size:16px;line-height:1.6;font-family:var(--font-body);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
::selection{background:var(--yellow);color:var(--ink)}
#tistorytoolbarid{display:none}
/* 공통 */
#dkIndex{overflow:hidden;position:absolute;left:-9999px;width:0;height:1px;margin:0;padding:0}
.ir_pm{display:block;overflow:hidden;font-size:0;line-height:0;text-indent:-9999px}
.ir_wa{display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%}
.screen_out{overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
.show{display:block}
.hide{display:none}
.emph_t{color:var(--violet)}
.txt_bar{display:inline-block;width:1px;height:10px;margin:0 8px;background-color:var(--line)}
.center{text-align:center;padding-top:50px}
.top-class{text-align:center;padding-top:0}
.wrap_skin{position:relative;overflow-x:hidden;overflow-x:clip}
.cont_skin{margin-top:0}
#cMain{min-height:50vh;padding-bottom:40px}
.article_skin{width:auto;max-width:800px;margin:0 auto;padding:0 20px;box-sizing:border-box}
@media (max-width:767px){.hidden-xs{display:none!important}}
@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}
@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}
@media (min-width:1200px){.hidden-lg{display:none!important}}
/* 상단 스크롤 진행 표시줄 */
#progress-bar{position:fixed;top:0;left:0;height:4px;width:0%;background:var(--violet);z-index:9999}
/* 아로스-로딩 */
#aros-loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;z-index:1022222;text-align:center;display:table;width:100%;height:100vh;opacity:.8}
.aros-loader{display:table-cell;vertical-align:middle}
.aros-loader img{width:150px}
/* =====================================================
상단 메뉴 (블로그 이름 · 메뉴 · 카테고리 · 검색)
===================================================== */
.gn-header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:2px solid var(--ink)}
.gn-inner{position:relative;display:flex;align-items:center;gap:24px;max-width:1080px;height:60px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.gn-logo{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--font-pixel);font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap}
.gn-logo:hover{text-decoration:none;color:var(--violet)}
.gn-logo-mark{flex:none;width:18px;height:18px;background:var(--violet);clip-path:var(--plus)}
.gn-logo-text{overflow:hidden;text-overflow:ellipsis}
.gn-nav{display:flex;align-items:center;gap:14px;margin-left:auto}
.gn-menu ul{display:flex;gap:2px}
.gn-menu a,
.gn-cate-btn{display:block;padding:8px 12px;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);white-space:nowrap}
.gn-menu a:hover,
.gn-cate-btn:hover{background:var(--violet-tint);color:var(--violet);text-decoration:none}
.gn-cate-btn i{margin-left:4px;font-size:11px}
.gn-cate{position:relative}
.gn-cate-panel{display:none;position:absolute;top:calc(100% + 13px);right:0;min-width:230px;max-height:70vh;overflow-y:auto;padding:8px;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.gn-cate.is-open .gn-cate-panel{display:block}
.gn-cate-panel a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 10px;font-size:14px;font-weight:600;color:var(--ink)}
.gn-cate-panel a:hover{background:var(--yellow);text-decoration:none}
.gn-cate-panel ul ul ul a{padding-left:24px;font-weight:500}
.gn-cate-panel .c_cnt{font-family:var(--font-pixel);font-size:12px;font-weight:400;color:var(--muted)}
.gn-cate-panel img{display:none}
.gn-search{display:flex;align-items:center;height:38px;border:2px solid var(--ink);background:var(--paper)}
.gn-search:focus-within{box-shadow:3px 3px 0 var(--violet)}
.gn-search-input{width:140px;height:100%;padding:0 10px;border:0;background:transparent;font-size:14px;color:var(--ink);outline:none}
.gn-search-input::placeholder{color:var(--muted)}
.gn-search-btn{flex:none;width:36px;height:100%;font-size:14px;color:var(--ink)}
.gn-search-btn:hover{background:var(--yellow)}
.gn-burger{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:auto}
.gn-burger-icon,
.gn-burger-icon::before,
.gn-burger-icon::after{content:"";position:absolute;left:11px;width:22px;height:2px;background:var(--ink)}
.gn-burger-icon{top:21px}
.gn-burger-icon::before{left:0;top:-7px}
.gn-burger-icon::after{left:0;top:7px}
.gn-header.is-open .gn-burger-icon{background:transparent}
.gn-header.is-open .gn-burger-icon::before{top:0;transform:rotate(45deg)}
.gn-header.is-open .gn-burger-icon::after{top:0;transform:rotate(-45deg)}
/* =====================================================
글 제목 영역 (보라색 띠)
===================================================== */
.skin_view .area_title{position:relative;z-index:0;margin:0;padding:52px 0 64px;border:0;text-align:left}
.skin_view .area_title::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
background-color:var(--violet);
background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
background-size:24px 24px}
/* 아래쪽 도트(픽셀) 가장자리 */
.skin_view .area_title::after{content:"";position:absolute;z-index:-1;bottom:0;left:50%;width:100vw;height:16px;transform:translateX(-50%);
background:repeating-conic-gradient(var(--paper) 0% 25%,transparent 0% 50%) 0 0/16px 16px}
.skin_view .area_title a{text-decoration:none}
.skin_view .tit_category{display:inline-block;font-size:13px;line-height:1.4}
.skin_view .tit_category a{display:inline-block;padding:5px 10px 4px;background:var(--yellow);color:var(--ink);font-family:var(--font-pixel);font-weight:700;transform:rotate(-2deg)}
.skin_view .tit_post{margin-top:18px;font-size:38px;line-height:1.3;font-weight:800;letter-spacing:-.025em;color:#fff;word-break:keep-all;overflow-wrap:break-word}
.skin_view .tit_category + .tit_post{margin-top:16px}
.skin_view .area_title > .tit_post:first-child{margin-top:0}
.skin_view .tit_post a{color:#fff}
.skin_view .txt_detail{display:block;margin-top:22px;font-family:var(--font-pixel);font-size:13px;color:#d6ccff}
.skin_view .txt_detail .txt_bar{margin:0 9px;background-color:rgba(255,255,255,.4)}
.skin_view .txt_detail .my_edit{display:none}
.skin_view .my_post .my_edit{display:inline-block}
.skin_view .link_detail{font-size:13px;color:#d6ccff}
.skin_view .link_detail:hover{color:#fff;text-decoration:underline}
/* =====================================================
본문
===================================================== */
.skin_view .area_view{padding:40px 0 24px;font-size:17px;line-height:1.85;color:var(--text);word-break:keep-all;overflow-wrap:break-word}
.skin_view .area_view p{font-size:17px;line-height:1.85;margin:0 0 24px;color:var(--text)}
.skin_view .area_view a{color:var(--violet)}
.skin_view .area_view p a,
.skin_view .area_view li a{text-decoration:underline;text-underline-offset:3px}
.skin_view .area_view p a:hover,
.skin_view .area_view li a:hover{color:var(--violet-deep)}
.skin_view .area_view h1{font-size:30px;line-height:1.35;color:var(--ink)}
/* 소제목 (제목1) */
.skin_view .area_view h2{position:relative;margin:64px 0 24px;padding:0 0 14px 30px;border-bottom:3px solid var(--ink);font-size:25px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:84px}
.skin_view .area_view h2::before{content:"";position:absolute;left:0;top:8px;width:18px;height:18px;background:var(--violet);clip-path:var(--plus)}
/* 제목2 */
.skin_view .area_view h3{margin:40px 0 14px;padding:2px 0 2px 14px;border-left:6px solid var(--violet);font-size:20px;font-weight:700;line-height:1.45;color:var(--ink);scroll-margin-top:84px}
/* 제목3 */
.skin_view .area_view h4{margin:30px 0 10px;padding:0;font-size:17px;font-weight:700;line-height:1.5;color:var(--violet-deep)}
.skin_view .area_view h4::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--yellow);box-shadow:0 0 0 2px var(--ink);vertical-align:.1em}
.skin_view .area_view ul,
.skin_view .area_view ol{margin:0 0 28px;padding:0 0 0 6px}
.skin_view .area_view ul li,
.skin_view .area_view ol li{margin-left:22px;margin-bottom:8px}
.skin_view .area_view ul li{list-style:disc}
.skin_view .area_view ol li{list-style:decimal}
.skin_view .area_view li::marker{color:var(--violet);font-weight:700}
.skin_view .area_view blockquote{padding:14px 20px;margin:0 0 26px;border-left:6px solid var(--ink);background:var(--paper-2)}
.skin_view .area_view blockquote,
.skin_view .area_view blockquote p{font-size:17px;line-height:1.8}
.skin_view .area_view blockquote ol:last-child,
.skin_view .area_view blockquote ul:last-child,
.skin_view .area_view blockquote p:last-child{margin-bottom:0}
.skin_view .area_view pre{background-color:var(--paper-2);margin:28px auto;word-wrap:break-word;font-family:Menlo,Consolas,Monaco,monospace;font-size:14px;line-height:20px}
.skin_view .area_view pre code.hljs{padding:16px}
.skin_view .area_view iframe{max-width:100%}
.skin_view .area_view img{max-width:100%;height:auto}
.skin_view .area_view .imageblock{width:auto!important;height:auto!important}
/* 밑줄(u) = 노란 형광펜 */
u{text-decoration:none;background:linear-gradient(transparent 55%,var(--yellow) 55%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 보호글 비밀번호 입력 */
.skin_view .area_view .protected_form{text-align:center;padding:80px 0 120px}
.skin_view .area_view .protected_form p{margin-bottom:16px}
.skin_view .area_view .protected_form input{-webkit-appearance:none;height:42px;padding:0 14px;border:2px solid var(--ink);border-radius:0;font-size:14px;line-height:38px;box-sizing:border-box}
.skin_view .area_view .protected_form button{height:42px;padding:0 18px;background-color:var(--ink);color:#fff;font-size:14px;font-weight:700}
/* 글 아래 태그 */
.skin_view .area_etc{overflow:hidden;margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.skin_view .area_etc .list_tag{display:flex;align-items:flex-start;gap:12px}
.skin_view .list_tag .tit_tag{flex:none;padding-top:5px;font-family:var(--font-pixel);font-size:13px;font-weight:700;color:var(--violet)}
.skin_view .list_tag .desc_tag{flex:1;font-size:0;line-height:0}
.skin_view .list_tag .desc_tag a{display:inline-block;margin:0 6px 6px 0;padding:5px 10px;border:1px solid var(--line);font-size:13px;font-weight:500;line-height:1.4;color:var(--text)}
.skin_view .list_tag .desc_tag a:hover{border-color:var(--ink);background:var(--yellow);color:var(--ink);text-decoration:none}
/* 카테고리의 다른 글 */
.skin_view .another_category{overflow:hidden;width:100%;margin:56px 0 0;border:0;padding:0}
.skin_view .another_category h4{float:left;width:100%;margin:0!important;padding:0 0 10px!important;border:0!important;border-bottom:3px solid var(--ink)!important;font-weight:700;font-size:16px!important;line-height:1.5;color:var(--ink)!important}
.skin_view .another_category h4::before{display:none}
.skin_view .another_category h4 a{color:var(--violet)!important;font-weight:800;text-decoration:none}
.skin_view .another_category table{float:left;width:100%;margin-top:14px!important}
.skin_view .another_category table tr{float:left;width:50%;margin-bottom:8px}
.skin_view .another_category table tr:nth-child(even) th{padding-left:10px!important}
.skin_view .another_category table th{width:100%;font-size:13px;color:var(--muted);padding:0!important}
.skin_view .another_category table th a{overflow:hidden;max-width:255px;font-size:14px;white-space:nowrap;text-overflow:ellipsis;color:var(--text)!important;border:0!important;display:inline-block;float:left;text-decoration:none}
.skin_view .another_category table th a:hover{color:var(--violet)!important;background:none}
.skin_view .another_category table th a.current{text-decoration:underline!important}
.skin_view .another_category table th span{font-size:13px}
.skin_view .another_category table td{display:none}
/* =====================================================
강의용 요소 : 목차
===================================================== */
.skin_view .area_view .aros-toc{margin:0 0 4px;padding:18px 20px 10px;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.skin_view .area_view .aros-toc .toc-center{padding:0;text-align:left}
.skin_view .area_view .aros-toc .toc-center p{margin:0 0 6px;font-family:var(--font-pixel);font-size:15px;font-weight:700;line-height:1.4;color:var(--violet)}
#toc{margin:0;padding:0;counter-reset:toc}
#toc ul{margin:0;padding:0}
#toc li{position:relative;margin:0;padding:0;list-style:none;border-top:1px dashed var(--line)}
#toc > li{counter-increment:toc}
#toc > li:first-child{border-top:0}
#toc a{display:block;padding:11px 8px 11px 40px;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink);text-decoration:none}
#toc > li > a::before{content:counter(toc);position:absolute;left:10px;top:12px;width:22px;font-family:var(--font-pixel);font-size:14px;font-weight:400;color:var(--muted)}
#toc a:hover{background:var(--yellow-tint);color:var(--ink)}
#toc > li > a:hover::before{content:"\25B6";font-size:12px;top:14px;color:var(--violet)}
#toc li li a{padding-left:56px;font-size:15px;font-weight:500}
/* =====================================================
강의용 요소 : 인트로 · 카드 · 요약 · 광고 · 버튼 · 반응형표
===================================================== */
.skin_view .area_view .lead-intro{margin:12px 0 22px;padding:16px 18px;background:var(--violet-tint);border:0;border-left:6px solid var(--violet);border-radius:0;font-size:17px;line-height:1.8;color:var(--text)}
.skin_view .area_view .post-card{margin:28px 0;overflow:hidden;background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:none}
.skin_view .area_view .post-card .card-body{padding:18px 18px 20px}
.skin_view .area_view .post-card .card-body > :last-child{margin-bottom:0}
.skin_view .area_view .post-card > h2{margin:0;padding:14px 18px 14px 46px;background:var(--violet-tint);border-bottom:2px solid var(--ink);font-size:21px}
.skin_view .area_view .post-card > h2::before{left:18px;top:21px;width:16px;height:16px}
.skin_view .area_view .summary-card{position:relative;margin:22px 0;padding:16px 18px;background:var(--yellow-tint);border:0;border-left:6px solid var(--yellow);border-radius:0;font-size:16px;line-height:1.75;color:var(--text)}
.skin_view .area_view .summary-card::before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-2px;background:var(--ink);
-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask:url('data:image/svg+xml;utf8,') no-repeat center/contain}
.skin_view .area_view .summary-card strong{color:var(--ink)}
/* 광고 카드 : 동작 관련 값은 원본 그대로, 겉모양만 정리 */
.skin_view .area_view .ad-card{margin:22px 0;padding:0;overflow:visible;text-align:center;background:var(--paper-2);border:1px solid var(--line);border-radius:0;box-shadow:none}
.skin_view .area_view .ad-card .ad-inner{padding:12px 10px;overflow:visible}
.skin_view .area_view .ad-card ins.adsbygoogle{display:block!important;width:100%!important;max-width:100%!important;min-height:0}
.skin_view .area_view .ad-card.loading ins.adsbygoogle{min-height:120px;background:#f0f0f5}
/* 버튼 */
.aros-button{display:block;width:80%;max-width:520px;margin-left:auto;margin-right:auto;padding:18px 20px;box-sizing:border-box;background-color:var(--violet);border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);color:#fff;font-family:var(--font-body);font-size:22px;font-weight:800;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:transform .08s,box-shadow .08s,background-color .15s}
.aros-button:hover{background-color:var(--violet-deep)}
.aros-button:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
/* 반응형표 */
.card-container{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:minmax(80px,auto);gap:10px;justify-content:center;width:100%;margin:22px auto;background:transparent;box-shadow:none;border-radius:0}
.card{position:relative;display:flex;justify-content:center;align-items:center;padding:24px;background-color:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:none;transform:none;cursor:pointer;transition:background-color .15s}
.card:hover{background-color:var(--yellow)}
/* =====================================================
글 목록
===================================================== */
.area_list{max-width:800px;margin:0 auto;padding:40px 20px 0;box-sizing:border-box}
.area_list .tit_category{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:3px solid var(--ink)}
.area_list .link_category{font-size:28px;font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.area_list .link_category:hover{text-decoration:none}
.area_list .gn-count{font-family:var(--font-pixel);font-size:13px;color:var(--muted)}
.list_content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta thumb" "post thumb";align-content:center;row-gap:8px;padding:28px 0;border-bottom:1px solid var(--line)}
.list_content::after{display:none}
.list_content .thumbnail_post{grid-area:thumb;align-self:center;float:none;width:132px;height:132px;margin:0 0 0 28px;overflow:hidden;border:2px solid var(--ink);box-sizing:border-box}
.list_content .thumbnail_post img{display:block;width:100%;height:100%;object-fit:cover}
.list_content .link_post{grid-area:post;display:block;overflow:hidden;text-decoration:none}
.list_content .tit_post{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:22px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.list_content .link_post:hover .tit_post{color:var(--violet)}
.list_content .txt_post{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:6px;font-size:15px;line-height:1.65;color:var(--muted)}
.list_content .detail_info{grid-area:meta;margin:0;font-family:var(--font-pixel);font-size:13px;color:var(--muted)}
.list_content .detail_info .link_cate{font-size:13px;font-weight:700;color:var(--violet);text-decoration:none}
.list_content .detail_info .txt_bar{margin:0 8px}
/* 페이지 번호 */
.area_paging{max-width:800px;margin:40px auto 60px;padding:0 20px;box-sizing:border-box}
.area_paging .inner_paging{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.area_paging a{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-pixel);font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer}
.area_paging .link_page span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;box-sizing:border-box}
.area_paging .link_page:hover span{background:var(--yellow)}
.area_paging .link_page span.selected{background:var(--ink);color:#fff;font-weight:700}
.area_paging .link_prev,
.area_paging .link_next{height:40px;padding:0 14px;border:2px solid var(--ink);box-sizing:border-box;font-weight:700}
.area_paging .link_prev{margin-right:10px}
.area_paging .link_next{margin-left:10px}
.area_paging .link_prev:hover,
.area_paging .link_next:hover{background:var(--yellow)}
.area_paging .no-more-prev,
.area_paging .no-more-next{opacity:.3;pointer-events:none}
/* 태그 모음 페이지 */
.skin_tag .list_tag{overflow:hidden;padding:26px 0 60px}
.skin_tag .list_tag li{float:left;margin:0 8px 8px 0}
.skin_tag .link_tag{display:block;padding:7px 13px;border:1px solid var(--line);background-color:var(--paper);font-size:15px;line-height:1.4;color:var(--text)}
.skin_tag .link_tag:hover{border-color:var(--ink);background-color:var(--yellow);color:var(--ink);text-decoration:none}
/* 방명록 · 댓글 */
.skin_visitor{padding-top:26px;padding-bottom:40px}
.tt-comment-cont .tt-box-total .tt_txt_g{font-size:15px}
.tt-comment-cont .tt-box-total .tt_num_g{font-size:15px;color:var(--violet)}
.tt-comment-cont .tt-wrap-cmt .tt-link-user{font-size:15px}
.tt-comment-cont .tt-wrap-cmt .tt_desc{font-size:15px;color:var(--text)}
.tt-comment-cont .tt-txt-mention{color:var(--text)}
.tt-comment-cont .tt-wrap-cmt .tt_txt_g{color:var(--violet)}
.tt-comment-cont .tt-link-comment .tt_num_g{color:var(--violet)}
.tt-comment-cont .tt-btn_register{width:77px;height:36px;background-color:var(--violet);color:#fff;border-radius:0;border-color:var(--violet)}
.tt-comment-cont .tt-btn_register:hover,
.tt-comment-cont .tt-btn_register:focus{background-color:var(--violet-deep);border-color:var(--violet-deep)}
/* =====================================================
푸터
===================================================== */
.aros-footer{position:relative;margin-top:76px;padding:52px 20px 44px;background-color:var(--ink);color:#fff}
.aros-footer::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;background:repeating-conic-gradient(var(--ink) 0% 25%,transparent 0% 50%) 0 0/16px 16px}
.aros-footer-inner{max-width:760px;margin:0 auto}
.aros-footer .gn-footer-logo{font-family:var(--font-pixel);font-size:18px;font-weight:700;color:#fff}
.aros-footer .aros-content{margin-top:8px;font-size:14px;line-height:1.7;color:#bdb7d6}
.aros-footer .gn-footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px}
.aros-footer .gn-footer-links a{font-size:14px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:4px}
.aros-footer .gn-footer-links a:hover{color:var(--yellow);text-decoration-color:var(--yellow)}
.aros-footer .aros-bar{margin:22px 0;border-top:1px solid rgba(255,255,255,.18)}
.aros-footer .aros-copyright{font-size:13px;line-height:1.8;color:#bdb7d6;word-break:keep-all}
.aros-footer .aros-footer-fixed{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:12px;color:#8f89ab}
.aros-footer .aros-footer-fixed a{color:#8f89ab}
.aros-footer a:hover{color:#fff}
/* =====================================================
모바일 (화면 너비 820px 이하)
===================================================== */
@media only screen and (max-width:820px){
.article_skin{padding:0 16px}
/* 상단 메뉴 */
.gn-inner{height:54px;padding:0 8px 0 16px;gap:8px}
.gn-logo{font-size:16px}
.gn-burger{display:block}
.gn-nav{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:14px 16px 18px;max-height:calc(100vh - 56px);overflow-y:auto;box-sizing:border-box;background:var(--paper);border-bottom:2px solid var(--ink)}
.gn-header.is-open .gn-nav{display:flex}
.gn-search{order:-1;height:44px;margin-bottom:10px}
.gn-search-input{flex:1;width:auto;font-size:16px}
.gn-search-btn{width:44px}
.gn-menu ul{flex-direction:column;gap:0}
.gn-menu a{padding:12px 6px;font-size:16px}
.gn-cate-btn{display:none}
.gn-cate-panel{display:block;position:static;min-width:0;max-height:none;margin-top:8px;padding:8px 0 0;border:0;border-top:1px solid var(--line);box-shadow:none}
.gn-cate-panel a{padding:12px 6px;font-size:16px}
.gn-cate-panel ul ul ul a{padding-left:20px}
/* 글 제목 영역 */
.skin_view .area_title{padding:34px 0 48px}
.skin_view .tit_post{font-size:27px;line-height:1.34}
.skin_view .txt_detail{margin-top:16px;word-break:break-all}
.skin_view .area_title .my_edit{display:none}
/* 본문 */
.skin_view .area_view{padding:28px 0 20px}
.skin_view .area_view h2{margin:52px 0 20px;padding-left:28px;font-size:22px}
.skin_view .area_view h2::before{top:7px;width:16px;height:16px}
.skin_view .area_view h3{font-size:19px}
.skin_view .area_view .aros-toc{padding:16px 14px 8px;box-shadow:4px 4px 0 var(--ink)}
.skin_view .area_view .post-card > h2{padding-left:42px;font-size:19px}
.skin_view .area_view .post-card > h2::before{left:16px;top:19px}
.skin_view .img_view{width:100%;height:auto;margin:11px 0 6px}
.aros-loader img{width:20%}
.aros-button{width:92%;padding:16px 14px;font-size:18px}
.aros-button.most-likely-to-click{padding:18px 14px;font-size:20px}
.skin_view .another_category{margin-top:40px}
.skin_view .another_category table tr{width:100%}
.skin_view .another_category table tr:nth-child(even) th{padding:0!important}
/* 글 목록 */
.area_list{padding:28px 16px 0}
.area_list .link_category{font-size:23px}
.list_content{padding:22px 0;row-gap:6px}
.list_content .thumbnail_post{width:88px;height:88px;margin-left:16px}
.list_content .tit_post{font-size:18px}
.list_content .txt_post{font-size:14px;line-height:1.55}
.area_paging{margin:28px auto 40px;padding:0 16px}
.skin_tag .list_tag{padding:20px 0 40px}
.tt-comment-cont{padding:0}
.aros-footer{margin-top:56px;padding:44px 16px 36px}
}
/* 움직임 줄이기 설정을 켠 방문자 */
@media (prefers-reduced-motion:reduce){
.aros-button,.card{transition:none}
}