/* ===== Fibbersday: trimmed base ===== */

:root{
  --brand: linear-gradient(135deg, #4B0082 0%, #800080 40%, #FFD700 100%);    /* header bg */
  --ink:#222;
  --ink-dim:#666;
  --bg:#f6f6f7;
  --card:#fff;
  --accent:#333;      /* footer bg */
  --nav-h:56px;
  --radius:12px;
  --card-bg1: #549FF4; /* very light apricot */
  --card-bg2: #549FF4; /* very light blue */
  --card-bg3: #549FF4; /* very light green */
  --card-bg4: #549FF4; /* very light pink */
}

.card.bg1 { background: var(--card-bg1); }
.card.bg2 { background: var(--card-bg2); }
.card.bg3 { background: var(--card-bg3); }
.card.bg4 { background: var(--card-bg4); }

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
}

/* layout */
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.main{padding:28px 0}
/* HTML에 container-main을 쓰는 경우를 대비한 alias */
.container-main{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

/* header */
.site-header{
  position:relative; z-index:2;
  height:var(--nav-h);
  background:var(--brand);
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav-inner{
  max-width:1200px; height:100%;
  margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

h2.section-title {
  background: linear-gradient(135deg, #D99058 0%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

/* logo */
.logo {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  text-decoration:none;
  flex-shrink:0;
}

/* 로고 이미지 크기 고정 */
.site-header .logo img {
  display:block;
  height:calc(var(--nav-h) - 24px);
  width:auto;
  max-height:50%;
}

/* nav */
.nav-links{
  display:flex; gap:20px; justify-content:center;
  flex:1; min-width:0;
}
.nav-links a{
  display:inline-flex; align-items:center;
  height:var(--nav-h); padding:0 6px;
  color:#fff; text-decoration:none; font-weight:600;
  transition:opacity .15s;
  letter-spacing: 0.1px;
  text-shadow: 0 0 1px rgba(0,0,0,0.25);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

}
.nav-links a:hover{opacity:.85}
.nav-links a[aria-current="page"]{text-decoration:underline}

/* google translate chip */
.gt-chip{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; background:#fff; border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  line-height:1; user-select:none; color:var(--ink-dim);
  flex-shrink:0;
}
.gt-chip .gt-label{font-size:13px}
.gt-chip .gt-g{
  width:18px; height:18px; display:inline-block;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%234285F4" d="M24 9.5c3.54 0 6.7 1.22 9.2 3.6l6.85-6.85C36.15 2.55 30.5 0 24 0 14.88 0 7.15 5.26 3.33 12.9l7.98 6.2C13.07 13.35 18.12 9.5 24 9.5z"/><path fill="%2334A853" d="M46.5 24.5c0-1.56-.15-3.06-.43-4.5H24v9h12.7c-.55 2.96-2.2 5.46-4.7 7.15l7.27 5.63C43.43 38.42 46.5 31.95 46.5 24.5z"/><path fill="%23FBBC05" d="M10.3 28.5c-1-2.96-1-6.04 0-9l-7.98-6.2C.94 16.43 0 20.1 0 24c0 3.9.94 7.57 2.32 10.7l7.98-6.2z"/><path fill="%23EA4335" d="M24 48c6.5 0 12.15-2.15 16.2-5.85l-7.27-5.63C30.04 38.6 27.12 39.5 24 39.5c-5.88 0-10.93-3.85-12.69-9.1l-7.98 6.2C7.15 42.74 14.88 48 24 48z"/></svg>') center/contain no-repeat;
}
/* overlay */
#google_translate_element{position:absolute; inset:0; overflow:hidden;}
#google_translate_element .goog-te-gadget{font-size:0!important; line-height:0!important}
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget span,
#google_translate_element img{display:none!important}
#google_translate_element .goog-te-combo{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; appearance:none; background:transparent;
}
.goog-te-menu-frame{z-index:2147483647!important}

/* card */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  padding:18px 20px;
}

/* footer */
.site-footer{
  background:var(--accent); color:#fff;
  padding:14px 0; text-align:center; font-size:.95rem;
}

/* responsive */
@media (max-width:960px){ .nav-links{gap:14px} }
@media (max-width:780px){
  .nav-inner{gap:8px}
  .nav-links{gap:10px}
  .gt-chip{padding:5px 10px}
}
@media (max-width:640px){ .nav-links{display:none} }

/* Form focus: purple ring (input / textarea / select) */
input[type="text"],
textarea,
select{
  transition: border-color .2s, box-shadow .2s;
}

input[type="text"]:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: #800080;                        /* 보라 테두리 */
  box-shadow: 0 0 0 2px rgba(128,0,128,.2);     /* 보라 외곽 하이라이트 */
}

/* 키보드 탐색용 :focus-visible도 케어 */
input[type="text"]:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: none;
  border-color: #800080;
  box-shadow: 0 0 0 2px rgba(128,0,128,.25);
}

input[type="text"], textarea, select { transition:border-color .2s, box-shadow .2s; }
input[type="text"]:focus, textarea:focus, select:focus,
input[type="text"]:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none; border-color:#800080; box-shadow:0 0 0 2px rgba(128,0,128,.2);
}

/* Section titles: apricot + soft shadow */
.section-title,
.card > h2 {
  color: #D99058;
  text-shadow: 1px 1px 2px rgba(0,0,0,.12);
}

/* light background cards */
.card.light-gray    { background: #ffffff; } /* 기존 f9f9f9보다 진한 회색 */
.card.light-apricot { background: #ffffff; } /* 기존 fffaf5보다 진한 살구 */
.card.light-blue    { background: #e6f0ff; } /* 기존 f8f9ff보다 진한 파랑 */

/* ===== Hero card: animated background INSIDE the card (stronger & obvious) */
.hero-card{
  position: relative;
  overflow: hidden;              /* 카드 내부에서만 보이게 */
}

.hero-card::before{
  content:"";
  position:absolute; inset:-10%;
  z-index:0;
  border-radius: inherit;        /* 카드 둥근 모서리와 동일 */
  pointer-events:none;

  /* 보라/골드/살구 블롭 – 알파↑, 블러↑ */
  background:
    radial-gradient(60% 80% at 15% 25%, rgba(128,0,128,1.0), transparent 60%),
    radial-gradient(55% 75% at 85% 35%, rgba(255,215,0,1.0), transparent 60%),
    radial-gradient(45% 65% at 50% 85%, rgba(217,144,88,1.0), transparent 60%);
  filter: blur(55px);
  animation: heroCardFlow 6s ease-in-out infinite alternate; /* 더 빠르게 */
  will-change: transform;
  transform: translateZ(0);
}

/* 카드 내용은 항상 위 */
.hero-card > *{ position: relative; z-index: 1; }

@keyframes heroCardFlow{
  0%   { transform: translate3d(-6%, 2%, 0) scale(1);    }
  50%  { transform: translate3d( 6%,-3%, 0) scale(1.05); }
  100% { transform: translate3d(-4%, 1%, 0) scale(1);    }
}

/* 만약 OS가 '모션 줄이기'여도 강제로 보이게 하려면 유지. 
   OS 설정을 존중하려면 이 블록을 삭제하세요. */
@media (prefers-reduced-motion: reduce){
  .hero-card::before{ animation: heroCardFlow 10s ease-in-out infinite alternate; }
}

/* Ad slot look */
.ad-slot .ad-placeholder{
  min-height: 90px;
  display:flex; align-items:center; justify-content:center;
  color:#666; font-size:.9rem;
  border:1px dashed #ddd; border-radius:10px;
  background: #fafafa;
}
.added-slot { overflow: hidden; }
.added-slot .addedsbygoogle { min-height: 90px; }

/* Pagination look */
.page-btn{
  display:inline-block; padding:6px 10px; border-radius:8px;
  background:#f2f2f2; color:#333; text-decoration:none; font-weight:600;
}
.page-btn:hover{ background:#e8e8e8; }
.page-btn.current{ background:#800080; color:#fff; }
.dots{ padding:0 4px; color:#999; }

  .added-slot{background:var(--added-bg,#fff);color:var(--added-fg,#111);
    border:var(--added-bd,none);box-shadow:0 2px 8px rgba(0,0,0,.06);
    border-radius:14px;padding:6px 10px;overflow:hidden}
  .added-slot .addedph{min-height:50px;display:flex;align-items:center;
    justify-content:center;font-size:.9rem;font-weight:700;letter-spacing:.2px;color:inherit}

  /* 테마 프리셋 */
  .added--blue-soft{ --added-bg:linear-gradient(135deg,#e9f2ff 0%,#dbeafe 100%);
                     --added-fg:#0f172a; }            /* 은은한 연파랑 */
  .added--brand{     --added-bg:linear-gradient(135deg,#800080 0%,#FFD700 100%);
                     --added-fg:#fff; }               /* 사이트 퍼플→골드 */
  .added--ghost{     --added-bg:#fff; --added-fg:#0f172a;
                     --added-bd:1px solid rgba(0,0,0,.08);} /* 카드같이 담백 */