@charset "utf-8";

/*
 *
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Aside(sidebar)
 * 09. ETC
 * 10. Option(Color Type & List Type)
 * 11. Retina Display
 * 12. Media Screen
 *
 */

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');

/* ===== HeraPapa Finance Blog Custom CSS START ===== */
/* 고정 팔레트 */
:root{
  --hp-blue:#1a4e8a;   --hp-blue-bg:#f0f6fc; /* ETF·주식 */
  --hp-green:#2d8a68;  --hp-green-bg:#f0faf7; /* 금융상품 */
  --hp-orange:#c95d2e; --hp-orange-bg:#fdf7f3; /* 절세·세금 */
  --hp-purple:#7048a3; --hp-purple-bg:#f9f6fb; /* 생활 재테크 */

  --hp-text:#333;
  --hp-border:#d9d9d9;
}

/* 본문 컨테이너와 함께 사용할 때 여백 보정 */
#article-view .hp-section{ margin:36px 0; }
#article-view .hp-section--spacious{ margin:48px 0; }

/* ── 상단 카테고리 안내 박스 ───────────────────────────── */
#article-view .hp-box{
  border:1px solid var(--hp-border);
  border-radius:10px;
  padding:20px;
  margin:24px 0 40px 0; /* 썸네일 아래 간격 확보 */
  background:#f7f7f7;
}
#article-view .hp-box h3{
  margin:0 0 10px 0;
  font-size:18px;
  line-height:1.4;
}
#article-view .hp-box p{ margin:0; color:var(--hp-text); }

/* 색상 변형 */
#article-view .hp-box--etf  { border-color:var(--hp-blue);   background:var(--hp-blue-bg); }
#article-view .hp-box--fund { border-color:var(--hp-green);  background:var(--hp-green-bg); }
#article-view .hp-box--tax  { border-color:var(--hp-orange); background:var(--hp-orange-bg); }
#article-view .hp-box--life { border-color:var(--hp-purple); background:var(--hp-purple-bg); }

#article-view .hp-box--etf  h3{ color:var(--hp-blue); }
#article-view .hp-box--fund h3{ color:var(--hp-green); }
#article-view .hp-box--tax  h3{ color:var(--hp-orange); }
#article-view .hp-box--life h3{ color:var(--hp-purple); }

/* ── 광고 슬롯(서두 몰림/CLS 방지) ──────────────────────── */
#article-view .hp-ad-slot{
  border:1px dashed #e5e5e5;    /* 편집 가이드 (원하면 제거) */
  background:#fafafa;           /* 로딩 전 자리 확보 */
  padding:8px;
  margin:48px 0;                /* 연속 배치 방지용 여백 */
  min-height:320px;             /* CLS 방지: 고정 높이 */
  display:block;
}
#article-view .hp-ad-slot--wide{  min-height:360px; }
#article-view .hp-ad-slot--short{ min-height:280px; }

/* 표/리스트 주변 붙어 보이는 현상 완충 */
#article-view .hp-ad-buffer{ height:16px; }

/* ── 말미 고정 안내(투자/생활) ─────────────────────────── */
#article-view .hp-disclaimer{
  border:1px solid var(--hp-border);
  border-radius:8px;
  padding:20px;
  background:#f9f9f9;
  margin-top:40px;
}
#article-view .hp-disclaimer p{ margin:0 0 10px 0; line-height:1.7; }
#article-view .hp-disclaimer p:last-child{ margin-bottom:0; }

#article-view .hp-disclaimer--invest{ border-color:var(--hp-blue); }
#article-view .hp-disclaimer--invest strong{ color:var(--hp-blue); }

#article-view .hp-disclaimer--life{ border-color:var(--hp-purple); }
#article-view .hp-disclaimer--life strong{ color:var(--hp-purple); }

/* ── 모바일 보정 ───────────────────────────────────────── */
@media (max-width:640px){
  #article-view .hp-box{ padding:16px; }
  #article-view .hp-box h3{ font-size:17px; }
  #article-view .hp-ad-slot{ margin:40px 0; min-height:280px; }
  #article-view .hp-ad-buffer{ height:12px; }
  #article-view .hp-disclaimer{ padding:16px; }
}
/* ===== HeraPapa Finance Blog Custom CSS END ===== */
/* Type Selector Reset */
body {
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  font-family: 'AppleSDGothicNeo', Pretendard-Regular, sans-serif;
  font-size: 1em;
  line-height: 1.25;
  color: #555;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
  display: block;
}

button, input[type=submit], input[type=reset], input[type=button] {
  overflow: visible;
  cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
  -webkit-appearance: none;
}

input, select, textarea, button {
  font-family: Pretendard-Regular, sans-serif;
  font-size: 100%;
  border-radius: 0;
}

button {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

ul li {
  list-style: none;
}

img, fieldset {
  border: none;
}

hr {
  display: none;
}

a, a:link {
  text-decoration: none;
  color: #555;
}

a:visited {
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
  color: #222;
}

a:active {
  text-decoration: none;
}

/* Accessibility Navigation */
#acc-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 0;
}

#acc-nav a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  margin-bottom: -1px;
  text-align: center;
  font-weight: bold;
  font-size: 0.875em;
  color: #000;
  white-space: nowrap;
}

#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
  width: 100%;
  height: auto;
  padding: 10px 0;
  background: #000;
  color: #fff;
  z-index: 1000;
}

/* Layout Selector */
#header {
  border-bottom: 1px solid #eee;
}

#header .inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

#header h1 {
  padding: 23px 0;
  font-family: 'Nanum Myeongjo';
  font-weight: 800;
  font-size: 1.75em;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: #333;
}

#header h1 a {
  display: inline-block;
  height: 32px;
  text-decoration: none;
  color: #333;
  vertical-align: top;
}

#header h1 img {
  width: auto;
  height: 32px;
}
#header .util {
  position: absolute;
  top: 24px;
  right: 0;
}

#header .util .search {
  position: relative;
  float: left;
  overflow: hidden;
  width: 32px;
  background-color: #fff;
  box-sizing: border-box;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

#header .util .search:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
  text-indent: -999em;
  background: #fff url(./images/ico_package.png) no-repeat 0 0;
  vertical-align: top;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
}

#header .util .search input {
  width: 32px;
  height: 32px;
  padding: 5px 15px;
  border: 0;
  background-color: transparent;
  font-size: 0.875em;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
}

#header .util .search input:focus {
  border-color: #484848;
}

#header .util .search input::placeholder {
  color: #969696;
}

#header .util .search button {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 10;
  width: 30px;
  height: 30px;
  text-indent: -999em;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
  vertical-align: top;
  outline: none;
}

#header .util .search.on {
  width: 200px;
}

#header .util .search.on:before {
  content: none;
}

#header .util .search.on input {
  display: block;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 32px;
}

#header .util .search.on button {
  border-color: transparent;
}

#header .util .profile {
  position: relative;
  float: left;
  margin-left: 14px;
}

#header .util .profile button {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
}

#header .util .profile img {
  width: 100%;
  height: 100%;
}

#header .util .profile nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  width: 96px;
  margin: 0 0 0 -48px;
  padding-top: 12px;
}

#header .util .profile ul {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#header .util .profile ul li a {
  display: block;
  margin-top: -1px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 2.3125rem;
  color: #777;
}

#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
  background-color: #fafafa;
  color: #333;
}

#header .util .menu {
  display: none;
}

#gnb {
  height: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
}

#gnb::-webkit-scrollbar {
  display: none;
}

#gnb ul {
  display: inline-block;
  margin-left: -30px;
  vertical-align: top;
}

#gnb ul li {
  float: left;
  padding: 0 26px;
}

#gnb ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 22px 4px 24px;
  color: #777;
}

#gnb ul li a:hover,
#gnb ul li.current a {
  color: #333;
}

#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
}

#container {
  position: relative;
}

#container .content-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

#container .content-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 1px;
  height: 100%;
  margin-left: 255px;
  background-color: #eee;
}

#container .content-wrap:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#content {
  float: left;
  width: 68.5185185185%;
  padding: 72px 0 60px;
  box-sizing: border-box;
}

#content>.inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#aside {
  float: right;
  width: 21.2962962963%;
  padding: 75px 0 32px;
  box-sizing: border-box;
}

#aside .close,
#aside .profile {
  display: none;
}

#footer {
  padding: 38px 0 28px;
  border-top: 1px solid #eee;
}

#footer .inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

#footer p {
  margin-bottom: 10px;
  font-size: 0.875em;
  color: #777;
}

#footer .order-menu a {
  display: inline-block;
  margin-bottom: 23px;
  font-size: 0.8125em;
  vertical-align: middle;
  color: #555;
}

#footer .order-menu a:hover,
#footer .order-menu a:focus {
  color: #333;
}

#footer .order-menu a:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 20px 2px 15px;
  background-color: #d2d2d2;
  vertical-align: middle;
}

#footer .order-menu a:first-child::before {
  content: none;
}

#footer .page-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
  text-indent: -999em;
}

#footer .page-top:focus,
#footer .page-top:hover {
  background-color: #757575;
  background-position-x: -150px;
}
#header .util {
  position: absolute;
  top: 24px;
  right: 0;
}

#header .util .search {
  position: relative;
  float: left;
  overflow: hidden;
  width: 32px;
  background-color: #fff;
  box-sizing: border-box;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

#header .util .search:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
  text-indent: -999em;
  background: #fff url(./images/ico_package.png) no-repeat 0 0;
  vertical-align: top;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
}

#header .util .search input {
  width: 32px;
  height: 32px;
  padding: 5px 15px;
  border: 0;
  background-color: transparent;
  font-size: 0.875em;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
}

#header .util .search input:focus {
  border-color: #484848;
}

#header .util .search input::placeholder {
  color: #969696;
}

#header .util .search button {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 10;
  width: 30px;
  height: 30px;
  text-indent: -999em;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
  vertical-align: top;
  outline: none;
}

#header .util .search.on {
  width: 200px;
}

#header .util .search.on:before {
  content: none;
}

#header .util .search.on input {
  display: block;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 32px;
}

#header .util .search.on button {
  border-color: transparent;
}

#header .util .profile {
  position: relative;
  float: left;
  margin-left: 14px;
}

#header .util .profile button {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
}

#header .util .profile img {
  width: 100%;
  height: 100%;
}

#header .util .profile nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  width: 96px;
  margin: 0 0 0 -48px;
  padding-top: 12px;
}

#header .util .profile ul {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#header .util .profile ul li a {
  display: block;
  margin-top: -1px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 2.3125rem;
  color: #777;
}

#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
  background-color: #fafafa;
  color: #333;
}

#header .util .menu {
  display: none;
}

#gnb {
  height: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
}

#gnb::-webkit-scrollbar {
  display: none;
}

#gnb ul {
  display: inline-block;
  margin-left: -30px;
  vertical-align: top;
}

#gnb ul li {
  float: left;
  padding: 0 26px;
}

#gnb ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 22px 4px 24px;
  color: #777;
}

#gnb ul li a:hover,
#gnb ul li.current a {
  color: #333;
}

#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
}

#container {
  position: relative;
}

#container .content-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

#container .content-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 1px;
  height: 100%;
  margin-left: 255px;
  background-color: #eee;
}

#container .content-wrap:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#content {
  float: left;
  width: 68.5185185185%;
  padding: 72px 0 60px;
  box-sizing: border-box;
}

#content>.inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#aside {
  float: right;
  width: 21.2962962963%;
  padding: 75px 0 32px;
  box-sizing: border-box;
}

#aside .close,
#aside .profile {
  display: none;
}

#footer {
  padding: 38px 0 28px;
  border-top: 1px solid #eee;
}

#footer .inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

#footer p {
  margin-bottom: 10px;
  font-size: 0.875em;
  color: #777;
}

#footer .order-menu a {
  display: inline-block;
  margin-bottom: 23px;
  font-size: 0.8125em;
  vertical-align: middle;
  color: #555;
}

#footer .order-menu a:hover,
#footer .order-menu a:focus {
  color: #333;
}

#footer .order-menu a:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 20px 2px 15px;
  background-color: #d2d2d2;
  vertical-align: middle;
}

#footer .order-menu a:first-child::before {
  content: none;
}

#footer .page-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
  text-indent: -999em;
}

#footer .page-top:focus,
#footer .page-top:hover {
  background-color: #757575;
  background-position-x: -150px;
}
#header .util {
  position: absolute;
  top: 24px;
  right: 0;
}

#header .util .search {
  position: relative;
  float: left;
  overflow: hidden;
  width: 32px;
  background-color: #fff;
  box-sizing: border-box;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

#header .util .search:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
  text-indent: -999em;
  background: #fff url(./images/ico_package.png) no-repeat 0 0;
  vertical-align: top;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
}

#header .util .search input {
  width: 32px;
  height: 32px;
  padding: 5px 15px;
  border: 0;
  background-color: transparent;
  font-size: 0.875em;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
}

#header .util .search input:focus {
  border-color: #484848;
}

#header .util .search input::placeholder {
  color: #969696;
}

#header .util .search button {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 10;
  width: 30px;
  height: 30px;
  text-indent: -999em;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
  vertical-align: top;
  outline: none;
}

#header .util .search.on {
  width: 200px;
}

#header .util .search.on:before {
  content: none;
}

#header .util .search.on input {
  display: block;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 32px;
}

#header .util .search.on button {
  border-color: transparent;
}

#header .util .profile {
  position: relative;
  float: left;
  margin-left: 14px;
}

#header .util .profile button {
  display: block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 50%;
}

#header .util .profile img {
  width: 100%;
  height: 100%;
}

#header .util .profile nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  width: 96px;
  margin: 0 0 0 -48px;
  padding-top: 12px;
}

#header .util .profile ul {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#header .util .profile ul li a {
  display: block;
  margin-top: -1px;
  border: 1px solid #eee;
  background-color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 0.875em;
  line-height: 2.3125rem;
  color: #777;
}

#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
  background-color: #fafafa;
  color: #333;
}

#header .util .menu {
  display: none;
}

#gnb {
  height: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
}

#gnb::-webkit-scrollbar {
  display: none;
}

#gnb ul {
  display: inline-block;
  margin-left: -30px;
  vertical-align: top;
}

#gnb ul li {
  float: left;
  padding: 0 26px;
}

#gnb ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 22px 4px 24px;
  color: #777;
}

#gnb ul li a:hover,
#gnb ul li.current a {
  color: #333;
}

#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
}

#container {
  position: relative;
}

#container .content-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

#container .content-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 1px;
  height: 100%;
  margin-left: 255px;
  background-color: #eee;
}

#container .content-wrap:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#content {
  float: left;
  width: 68.5185185185%;
  padding: 72px 0 60px;
  box-sizing: border-box;
}

#content>.inner:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#aside {
  float: right;
  width: 21.2962962963%;
  padding: 75px 0 32px;
  box-sizing: border-box;
}

#aside .close,
#aside .profile {
  display: none;
}

#footer {
  padding: 38px 0 28px;
  border-top: 1px solid #eee;
}

#footer .inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

#footer p {
  margin-bottom: 10px;
  font-size: 0.875em;
  color: #777;
}

#footer .order-menu a {
  display: inline-block;
  margin-bottom: 23px;
  font-size: 0.8125em;
  vertical-align: middle;
  color: #555;
}

#footer .order-menu a:hover,
#footer .order-menu a:focus {
  color: #333;
}

#footer .order-menu a:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  margin: 0 20px 2px 15px;
  background-color: #d2d2d2;
  vertical-align: middle;
}

#footer .order-menu a:first-child::before {
  content: none;
}

#footer .page-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
  text-indent: -999em;
}

#footer .page-top:focus,
#footer .page-top:hover {
  background-color: #757575;
  background-position-x: -150px;
}
/* Post Cover */
.post-cover {
  position: relative;
  height: 250px;
  margin-bottom: 38px;
  background-color: #f8f8f8;
  background-position: 50% 50%;
  background-size: cover;
}
.post-cover .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px 24px 24px;
  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
  box-sizing: border-box;
}
.post-cover h1 {
  margin-bottom: 10px;
  font-size: 1.875em;
  line-height: 1.3;
  color: #fff;
}
.post-cover h1 a { color: #fff; }
.post-cover .meta { font-size: 0.875em; color: rgba(255,255,255,0.7); }
.post-cover.notice { background: none; }

/* Post Item List */
.post-item { overflow: hidden; margin-bottom: 38px; }
.post-item a { display: block; text-decoration: none; }
.post-item .thum {
  float: left;
  width: 230px;
  margin-right: 28px;
  background-color: #f8f8f8;
}
.post-item .thum img { width: 100%; height: auto; }
.post-item .title {
  display: block;
  overflow: hidden;
  max-width: 95%;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25em;
  line-height: 1.4;
  color: #333;
}
.post-item .excerpt {
  display: block;
  margin-bottom: 20px;
  font-size: 0.875em;
  line-height: 1.5rem;
  color: #999;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.post-item .meta { font-size: 0.75em; color: #999; }

/* Not Found */
.not-found { margin: 48px 0; }
.not-found ul { margin-bottom: 24px; }
.not-found li { font-size: 0.875em; line-height: 1.6; color: #999; }

/* Pagination */
.pagination {
  clear: both;
  margin: 40px 0;
  text-align: center;
}
.pagination a {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  margin: 0 2px;
  padding: 0 8px;
  border: 1px solid #eee;
  font-size: 0.875em;
  line-height: 28px;
  color: #777;
  text-decoration: none;
  vertical-align: middle;
}
.pagination a:hover,
.pagination a:focus,
.pagination a.current {
  border-color: #333;
  color: #333;
}
.pagination .prev,
.pagination .next {
  font-size: 0.75em;
  line-height: 28px;
}
.pagination .prev[disabled],
.pagination .next[disabled],
.pagination .prev.no-more-prev,
.pagination .next.no-more-next {
  border-color: #eee;
  color: #ccc;
  cursor: default;
}

/* Tags */
.tags {
  margin: 40px 0;
}
.tags h2 { margin-bottom: 10px; font-size: 1em; color: #555; }
.tags a {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 6px 12px;
  border: 1px solid #eee;
  border-radius: 16px;
  font-size: 0.8125em;
  color: #777;
  text-decoration: none;
}
.tags a:hover,
.tags a:focus {
  background-color: #fafafa;
  color: #333;
}

/* Related Articles */
.related-articles {
  margin: 60px 0 20px;
}
.related-articles h2 {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 1em;
  color: #555;
}
.related-articles ul {
  display: inline-block;
  width: 103.3783783784%;
  margin-left: -3.3783783784%;
  vertical-align: top;
}
.related-articles ul li {
  float: left;
  width: 25%;
  padding-left: 3.2679738562%;
  margin: 0 0 20px;
  box-sizing: border-box;
}
.related-articles ul li a {
  display: block;
  text-decoration: none;
}
.related-articles ul li figure {
  display: block;
  margin-bottom: 8px;
  background-color: #f8f8f8;
}
.related-articles ul li figure img {
  width: 100%;
  height: auto;
}
.related-articles ul li .title {
  display: block;
  overflow: hidden;
  max-width: 95%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 1.4;
}
/* Comments */
.comments {
  margin: 60px 0;
}
.tt-comments-wrap {
  border-top: 1px solid #eee;
  padding-top: 30px;
}
.tt-comments-wrap .tt-comments-title {
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 20px;
}
.tt-comments-wrap .tt-comments-title .count {
  margin-left: 6px;
  color: #777;
}
.tt-comments-wrap .tt-comments-list { margin: 0; padding: 0; }
.tt-comments-wrap .tt-comments-list li {
  border-bottom: 1px solid #f1f1f1;
  padding: 18px 0;
}
.tt-comments-wrap .tt-comments-list .tt-comment-meta {
  font-size: 0.8125em;
  color: #999;
  margin-bottom: 6px;
}
.tt-comments-wrap .tt-comments-list .tt-comment-content {
  font-size: 0.9375em;
  line-height: 1.5;
  color: #555;
}
.tt-comments-wrap .tt-comments-form {
  margin-top: 30px;
}
.tt-comments-wrap .tt-comments-form textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #eee;
  padding: 10px;
  font-size: 0.875em;
  box-sizing: border-box;
}
.tt-comments-wrap .tt-comments-form .submit {
  margin-top: 10px;
}
.tt-comments-wrap .tt-comments-form .submit button {
  display: inline-block;
  padding: 6px 14px;
  background-color: #555;
  color: #fff;
  border: none;
  font-size: 0.8125em;
  border-radius: 4px;
}
.tt-comments-wrap .tt-comments-form .submit button:hover {
  background-color: #333;
}

/* Sidebar */
.sidebar-1, .sidebar-2 {
  margin-bottom: 40px;
}
.sidebar-1 nav.category {
  margin-bottom: 20px;
}
.sidebar-1 nav.category ul { padding-left: 0; }
.sidebar-1 nav.category li { margin-bottom: 8px; }
.sidebar-1 nav.category a {
  color: #555;
  text-decoration: none;
  font-size: 0.9375em;
}
.sidebar-1 nav.category a:hover { color: #333; }

/* Notice */
.notice { margin-bottom: 30px; }
.notice h2 { margin-bottom: 10px; font-size: 1em; color: #555; }
.notice ul li { margin-bottom: 6px; }
.notice ul li a { font-size: 0.875em; color: #777; }
.notice ul li a:hover { color: #333; }

/* Recent/Popular Post */
.post-list { margin-bottom: 30px; }
.post-list h2 { font-size: 1em; color: #555; margin-bottom: 10px; }
.post-list ul li { margin-bottom: 8px; }
.post-list ul li a {
  display: flex; align-items: center; text-decoration: none; color: #555;
}
.post-list ul li img { margin-right: 8px; border: 1px solid #f1f1f1; }
.post-list ul li .title {
  font-size: 0.875em; line-height: 1.3; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-list ul li .date { font-size: 0.75em; color: #999; }

/* Recent Comment */
.recent-comment { margin-bottom: 30px; }
.recent-comment h2 { font-size: 1em; color: #555; margin-bottom: 10px; }
.recent-comment ul li { font-size: 0.8125em; color: #777; margin-bottom: 6px; }
.recent-comment ul li a { color: #777; }
.recent-comment ul li a:hover { color: #333; }

/* Tag Cloud */
.tags h2 { font-size: 1em; color: #555; margin-bottom: 10px; }
.tags a {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 6px 10px;
  border: 1px solid #eee;
  border-radius: 14px;
  font-size: 0.8125em;
  color: #777;
}
.tags a:hover { background: #fafafa; color: #333; }

/* Visitor Counter */
.count { margin-bottom: 30px; }
.count h2 { font-size: 1em; color: #555; margin-bottom: 10px; }
.count p { font-size: 0.8125em; color: #777; line-height: 1.6; }
.count .total { font-weight: bold; font-size: 0.875em; }

/* Social Channel */
.social-channel { margin-top: 20px; }
.social-channel ul { display: flex; flex-wrap: wrap; gap: 10px; }
.social-channel li { font-size: 0.8125em; }
.social-channel li a { color: #777; text-decoration: none; }
.social-channel li a:hover { color: #333; }
/* ===========================
   7-1. Retina Assets (2x)
   =========================== */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), 
       only screen and (min--moz-device-pixel-ratio:1.5), 
       only screen and (-o-min-device-pixel-ratio:3/2), 
       only screen and (min-device-pixel-ratio:1.5) {

  /* 스프라이트 교체 */
  #header .util .search:before,
  #header .util .search button,
  #footer .page-top,
  .cover-thumbnail-3 button,
  .cover-thumbnail-4 button,
  .page-nav a strong:after,
  .comment-list ul li .author-meta .control button,
  .comment-form .secret input[type=checkbox]:checked+label:before,
  .sidebar .social-channel ul li a,
  .sidebar .tab-ui h2 a:before {
    background-image: url(./images/ico_package_2x.png);
    background-size: 200px auto;
  }

  .post-item.protected .thum:before {
    background-image: url(./images/ico_package_2x.png);
    background-size: 120px auto;
  }
}

/* ===========================
   7-2. 공통 유틸리티
   =========================== */
.u-hide { display: none !important; }
.u-sr-only { 
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.u-clear::after { content:""; display:block; clear:both; }
.u-text-center { text-align:center !important; }
.u-text-right { text-align:right !important; }
.u-mt-0 { margin-top:0 !important; }
.u-mb-0 { margin-bottom:0 !important; }
.u-mb-16 { margin-bottom:16px !important; }
.u-mb-24 { margin-bottom:24px !important; }
.u-p-0 { padding:0 !important; }

/* ===========================
   7-3. 페이지 상단 이동 버튼
   =========================== */
#footer .page-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px; height: 30px;
  border: 1px solid #eee; border-radius: 50%;
  background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
  text-indent: -999em;
  transition: background-color .2s ease;
}
#footer .page-top:hover,
#footer .page-top:focus {
  background-color: #757575;
  background-position-x: -150px;
}

/* ===========================
   7-4. 반응형 — 데스크톱 ~ 1080px
   =========================== */
@media screen and (max-width:1080px) {
  #header h1, #footer { padding: 0 24px; }
  #header .util { right: 24px; }
  #header .util .profile nav { left: auto; right: 0; margin: 0; }

  #gnb ul { margin-left: -6px; }
  #container .content-wrap:before { left: 72.7%; margin-left: 0; }
  .layout-aside-left #container .content-wrap:before { left: 27.3%; margin-left: 0; }

  .main-slider .paging { left: auto; right: 20px; margin-left: 0; }
  .cover-event ul li .title { -webkit-line-clamp: 1; }

  .post-cover { padding: 0 24px; }
}

/* ===========================
   7-5. 반응형 — 태블릿/모바일 (≤767px)
   =========================== */
@media screen and (max-width:767px) {

  /* 헤더 & 유틸 */
  #header h1 {
    position: relative; z-index: 10;
    padding: 24px; background-color:#fff;
  }
  #header .util {
    top:0; right:0; width:100%;
    padding:24px 68px 24px 24px; box-sizing:border-box;
  }
  #header .util .search { float:right; }
  #header .util .search.on { z-index:20; width:100%; }
  #header .util .search.on input { float:right; width:100%; }
  #header .util .profile { display:none; }
  #header .util .menu {
    position:absolute; top:24px; right:24px; z-index:300;
    display:inline-block; width:30px; height:30px;
    border:1px solid #eee; border-radius:50%;
    text-indent:-999em; outline:none;
  }
  #header .util .menu span,
  #header .util .menu:before,
  #header .util .menu:after {
    content:""; position:absolute; top:50%; left:50%;
    width:16px; height:1px; margin-left:-8px; background:#7f7f7f;
    transition: transform .5s;
  }
  #header .util .menu:before { margin-top:-6px; }
  #header .util .menu:after { margin-top: 6px; }

  /* GNB */
  #gnb { height:69px; }
  #gnb ul { margin-left:0; }
  #gnb ul li { padding:0 24px; }
  #gnb ul li a { padding:25px 0 24px; }

  /* 레이아웃 */
  #container .content-wrap { padding:0; }
  #container .content-wrap:before { content:none; }
  #content { float:none; width:auto; padding:34px 24px 40px; }
  #aside {
    position:fixed; top:0; right:-278px; z-index:400;
    width:278px; height:100%; overflow:auto;
    padding:94px 24px 40px; background:#fff; box-sizing:border-box;
    transition:right .5s;
  }
  .mobile-menu #aside { right:0; }
  #aside .close {
    position:absolute; top:24px; right:24px; z-index:300;
    display:inline-block; width:30px; height:30px;
    border:1px solid #eee; border-radius:50%; text-indent:-999em;
  }
  #aside .close:before,
  #aside .close:after {
    content:""; position:absolute; top:50%; left:50%;
    width:16px; height:1px; margin-left:-8px; background:#7f7f7f;
  }
  #aside .close:before { transform:rotate(-45deg); }
  #aside .close:after  { transform:rotate(45deg); }

  /* 푸터 */
  #footer { padding:32px 24px 26px; }
  #footer p { margin-bottom:11px; font-size:0.8125em; }
  #footer .order-menu { margin-bottom:29px; }
  #footer .order-menu a { display:block; margin:0; line-height:1.75rem; }
  #footer .order-menu a:before { content:none; }

  /* 인덱스 섹션 여백 */
  #tt-body-index #content { padding:0; }
  #tt-body-index #content>.inner { padding:0 24px; }
  #tt-body-index #content>.inner:first-child { padding-top:40px; }
  #tt-body-index .pagination { margin:0 20px 40px; }

  /* 본문 커버 */
  .post-cover { padding:0 24px; }
  .post-cover .inner { padding-bottom:38px; vertical-align:bottom; }
  .post-cover .inner>h1 {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .post-cover .meta { margin-top:33px; font-size:0.8125em; }

  /* 본문 콘텐츠 */
  .entry-content { padding:0 24px; }
  .entry-content p { margin-bottom:22px; line-height:1.625rem; }

  /* 목록 카드 */
  .post-item { float:none; width:auto; margin:0 0 30px; }
  .post-item .thum { margin-bottom:7px; }
  .post-item .title { margin-bottom:12px; }
  .post-item .excerpt { margin-bottom:12px; }

  /* 커버 블럭들 여백/그리드 */
  .cover-thumbnail-1 { margin-bottom:40px; padding:36px 24px 7px; border-top:8px solid #f5f5f5; }
  .cover-thumbnail-1 ul { width:100%; margin:0 0 -39px 0; }
  .cover-thumbnail-1 ul li { width:100%; padding-left:0; margin-bottom:30px; }

  .cover-thumbnail-2 { margin:0; padding:37px 24px 38px; border-top:8px solid #f5f5f5; }
  .cover-thumbnail-2 ul li figure { width:98px; margin-left:24px; }

  .cover-thumbnail-3 { margin:0; padding:37px 24px 15px; border-top:8px solid #f5f5f5; }
  .cover-thumbnail-3 ul { margin-left:-16px; }
  .cover-thumbnail-3 ul li { width:50%; padding-left:16px; }

  .cover-thumbnail-4 { margin:0; padding:37px 24px 9px; border-top:8px solid #f5f5f5; }
  .cover-thumbnail-4 ul { width:100%; margin-left:0; }
  .cover-thumbnail-4 ul li { width:100%; padding-left:0; margin-bottom:27px; }

  .cover-list { margin:0; padding:37px 24px 12px; border-top:8px solid #f5f5f5; }
  .cover-event { margin:0; padding:37px 24px 24px; border-top:8px solid #f5f5f5; }
  .cover-event ul { margin-left:0; }
  .cover-event ul li { width:auto; padding-left:0; margin-bottom:16px; }
  .cover-event ul li a { padding-bottom:43.3823529412%; }

  /* 태그/관련글/페이지네비 */
  .tags { margin-bottom:25px; padding:0 24px; }
  .related-articles { margin-bottom:21px; padding:0 24px; }
  .related-articles ul { width:103.5714285714%; margin-left:-3.5714285714%; }
  .related-articles ul li { width:50%; margin-bottom:15px; padding-left:3.4482758621%; }

  .page-nav { margin:32px 24px; padding:25px 0; }

  /* 댓글 */
  .tt-comments-wrap { padding:0 24px; }
  .comments { margin: 0; }
}

/* ===========================
   7-6. 매우 작은 화면(보조)
   =========================== */
@media screen and (max-width:480px) {
  #header h1 { font-size: 1.5em; }
  .post-cover h1 { font-size: 1.5em; }
  .main-slider ul li .text { font-size: 1.5em; }
  .post-list ul li .title { max-width: 140px; }
}

/* ===========================
   7-7. HeraPapa 커스텀 보강
   =========================== */
/* 본문 카테고리 안내/광고/디스클레이머 — 이미 블록1에 정의됨
   여기서는 작은 디테일만 덮어쓰기 */
#article-view .hp-ad-slot { border-radius:8px; }
#article-view .hp-box h3 { letter-spacing:-0.2px; }
#article-view .hp-disclaimer { line-height:1.6; }

/* ===========================
   7-8. 마무리
   =========================== */
/* 마지막 요소 여백 보정 */
#content > .inner:last-child,
.entry-content #h2:last-child,
.entry-content p:last-child { margin-bottom: 0 !important; }

/* 해라파파: 본문 안내 박스 최소화 */
#article-view .hp-box {
  background: #f1f7ff !important;   /* 연한 파랑 배경 */
  border: 1px solid #b9d3f5 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin: 16px 0 !important;
  font-size: 0.95em !important;
  color: #333 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

#article-view .hp-box h3 {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  color: #004a91 !important; /* 진한 파랑 글씨 */
}
/* 해라파파: 본문 상단 안내 박스 최소화 */
#article-view .hp-box {
  background: #f5f9ff !important;   /* 연한 블루 */
  border: 1px solid #c8daee !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 16px 0 !important;
  font-size: 0.95em !important;
  color: #333 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* 안내 박스 제목 스타일 */
#article-view .hp-box h3 {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  color: #004a91 !important;
}

/* 광고 슬롯(상단 안내 박스 안 비어있는 공간) 최소화 */
#article-view .hp-box .hp-ad-slot {
  display: none !important;   /* 광고 박스 자체를 없애기 */
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 본문 가독성 보정 세트 */
.entry-content {
  line-height: 1.78;
  font-size: 1.02rem;
  word-break: keep-all;
}
.entry-content p { margin: 0 0 1.1em; }
.entry-content h2 { margin: 2.2em 0 0.9em; font-size: 1.45rem; }
.entry-content h3 { margin: 1.8em 0 0.8em; font-size: 1.18rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em 1.2em; }
.entry-content li { margin: 0.35em 0; }
.entry-content img, .entry-content figure { 
  max-width: 100%; height: auto; display: block; margin: 1.2em auto; 
}
.entry-content blockquote {
  margin: 1.4em 0; padding: .9em 1.1em;
  background:#f8f9fb; border-left:4px solid #cfe0ff; border-radius:6px;
}
/* === 모바일에서 상단/하단 안내 박스 강제 표시 오버라이드 === */
@media (max-width: 768px) {
  #article-view .hp-box,
  #article-view .hp-disclaimer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 혹시 부모가 overflow로 잘라내는 경우 대비 */
  #content,
  #article-view,
  .entry-content {
    overflow: visible !important;
  }
}
/* === 모바일에서 카테고리/유의사항 박스 강제 노출 & 여백 최적화 === */
@media (max-width: 768px) {
  #article-view .category-box,
  #article-view .hp-disclaimer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 14px 0 18px !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
  }

  /* 텍스트 크기/줄간 간격 약간 축소해 가독성 ↑ */
  #article-view .category-box { font-size: 0.95rem !important; line-height: 1.55 !important; }
  #article-view .hp-disclaimer { font-size: 0.92rem !important; line-height: 1.55 !important; }

  /* 첫 큰 이미지가 박스와 너무 붙지 않도록 */
  #article-view img:first-of-type { margin-top: 12px !important; }
}