/* 그누보드 시험 사이트 (gnu.easyapplabs.com) — 차분한 동네 게시판: 짙은 초록 + 모래색 바탕 + 호박색 강조.
   XE·Rhymix·XE3·WP 시험 사이트와 다른 얼굴로 (EasyAppLabs 는 작은 '운영' 표시만). 기본 테마(basic)의 게시판 스킨 위에 얹는다 */
:root {
  --eal-green: #1f5f4a;
  --eal-green-d: #164536;
  --eal-green-l: #e6f0ea;
  --eal-sand: #f6f1e7;
  --eal-sand-d: #ece3d1;
  --eal-amber: #e7a33c;
  --eal-ink: #1d2320;
  --eal-ink2: #4a554f;
  --eal-ink3: #7b867f;
  --eal-line: #e3ddd0;
  --eal-card: #ffffff;
  --eal-r: 14px;
  --eal-font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
body { background: var(--eal-sand); }
.eal, .eal button, .eal input { font-family: var(--eal-font); }
.eal { color: var(--eal-ink); font-size: 15px; line-height: 1.55; }
.eal a { color: inherit; text-decoration: none; }
.eal-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.eal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--eal-amber); margin-right: 7px; vertical-align: 1px; }

/* 위 띠 */
.eal-topbar { background: var(--eal-green-d); color: #dbe7df; font-size: 12.5px; }
.eal-topbar__in { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; padding-bottom: 7px; }
.eal-topbar__badge { font-weight: 600; color: #fff; }
.eal-topbar a { color: #f4e3bd; }

/* 머리말 */
.eal-header { background: #fff; border-bottom: 1px solid var(--eal-line); position: sticky; top: 0; z-index: 50; }
.eal-header__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.eal-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.eal-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.eal-brand__text strong { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--eal-green-d); }
.eal-brand__text small { font-size: 11px; color: var(--eal-ink3); letter-spacing: .4px; }
.eal-nav { flex: 1; min-width: 0; }
.eal-nav > ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.eal-nav__item { position: relative; }
.eal-nav__item > a { display: block; padding: 10px 14px; border-radius: 10px; font-weight: 700; color: var(--eal-ink); }
.eal-nav__item:hover > a, .eal-nav__item:focus-within > a { background: var(--eal-green-l); color: var(--eal-green-d); }
.eal-nav__sub { display: none; position: absolute; left: 0; top: 100%; min-width: 190px; margin: 6px 0 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--eal-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(22,69,54,.12); }
.eal-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.eal-nav__item:hover .eal-nav__sub, .eal-nav__item:focus-within .eal-nav__sub { display: block; }
.eal-nav__sub a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--eal-ink2); }
.eal-nav__sub a:hover { background: var(--eal-sand); color: var(--eal-green-d); }
.eal-account { display: flex; align-items: center; gap: 10px; flex: none; font-size: 14px; }
.eal-account__me { font-weight: 700; color: var(--eal-green-d); }
.eal-account__link { color: var(--eal-ink2); }
.eal-account__link b { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--eal-amber); color: #fff; font-size: 11px; text-align: center; }

/* 단추 */
.eal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer; }
.eal-btn--primary { background: var(--eal-green); color: #fff !important; }
.eal-btn--primary:hover { background: var(--eal-green-d); }
.eal-btn--line { border-color: var(--eal-line); color: var(--eal-ink) !important; background: #fff; }
.eal-btn--line:hover { border-color: var(--eal-green); color: var(--eal-green-d) !important; }
.eal-hero .eal-btn--primary { background: var(--eal-amber); color: #1d2320 !important; }
.eal-hero .eal-btn--primary:hover { background: #f0b552; }
.eal-btn--ghost { background: rgba(255,255,255,.12); color: #fff !important; border-color: rgba(255,255,255,.35); }
.eal-btn--lg { padding: 12px 20px; font-size: 15px; border-radius: 12px; }

/* 서랍 메뉴 (좁은 화면) */
.eal-burger { display: none; width: 40px; height: 40px; margin-left: auto; border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.eal-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--eal-ink); }
.eal-drawer, .eal-drawer__dim { display: none; }
.eal-drawer-toggle:checked ~ .eal-drawer__dim { display: block; position: fixed; inset: 0; background: rgba(15,30,24,.45); z-index: 90; }
.eal-drawer-toggle:checked ~ .eal-drawer { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); overflow-y: auto;
  background: #fff; z-index: 100; padding: 18px; box-sizing: border-box; box-shadow: -12px 0 30px rgba(0,0,0,.15); }
.eal-drawer__head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: var(--eal-green-d); }
.eal-drawer__close { font-size: 28px; line-height: 1; cursor: pointer; color: var(--eal-ink3); padding: 0 6px; }
.eal-drawer__account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0; padding: 12px; border-radius: 12px; background: var(--eal-sand); font-size: 14px; }
.eal-drawer__menu, .eal-drawer__menu ul { list-style: none; margin: 0; padding: 0; }
.eal-drawer__menu > li { border-bottom: 1px solid var(--eal-line); padding: 8px 0; }
.eal-drawer__menu > li > a { display: block; padding: 8px 4px; font-weight: 800; }
.eal-drawer__menu ul a { display: block; padding: 7px 4px 7px 16px; color: var(--eal-ink2); }
.eal-drawer__op { margin-top: 18px; font-size: 12px; color: var(--eal-ink3); }

/* 본문 자리: 기본 테마가 #container 에 거는 폭·떠 있음을 푼다 */
#container.eal-main { float: none; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; }
.eal-page { padding-top: 28px; padding-bottom: 48px; }
.eal-page > * { background: transparent; }
#container.eal-main #bo_list, #container.eal-main #bo_v, #container.eal-main #bo_w, #container.eal-main #bo_gall { background: #fff; border-radius: var(--eal-r); padding: 22px; border: 1px solid var(--eal-line); box-sizing: border-box; }

/* 첫 화면 안내 */
.eal-hero { background: radial-gradient(1200px 400px at 85% -10%, #2f7a60 0%, transparent 60%), var(--eal-green); color: #fff; }
.eal-hero__in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 60px; }
.eal-hero__eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: #f4e3bd; }
.eal-hero__title { margin: 0; font-size: 42px; line-height: 1.18; font-weight: 900; letter-spacing: -1px; }
.eal-hero__lead { margin: 18px 0 26px; font-size: 16.5px; color: #d7e6dd; max-width: 34em; }
.eal-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.eal-hero__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.eal-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 18px; }
.eal-stat strong { display: block; font-size: 30px; font-weight: 900; color: #fff; }
.eal-stat span { font-size: 13px; color: #cfe1d6; }
.eal-stat--b strong { color: #f4e3bd; }
.eal-stat--c { grid-column: span 2; background: var(--eal-sand); border-color: var(--eal-sand); }
.eal-stat--c strong { color: var(--eal-green-d); }
.eal-stat--c span { color: var(--eal-ink2); }

/* 칸 */
.eal-main--home { padding-bottom: 56px; }
.eal-section { margin-top: 44px; }
.eal-section__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.eal-section__head h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--eal-green-d); letter-spacing: -.4px; }
.eal-section__head p { margin: 0; color: var(--eal-ink3); font-size: 14px; }

/* 최신 글 */
.eal-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eal-card { min-width: 0; background: var(--eal-card); border: 1px solid var(--eal-line); border-radius: var(--eal-r); padding: 18px 20px; }
.eal-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.eal-card__head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.eal-card__head h3 a::before { content: ""; display: inline-block; width: 6px; height: 16px; margin-right: 8px; border-radius: 3px; background: var(--eal-amber); vertical-align: -2px; }
.eal-card__more { font-size: 13px; color: var(--eal-ink3); }
.eal-card ul { list-style: none; margin: 0; padding: 0; }
.eal-card li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--eal-line); }
.eal-card li:first-child { border-top: 0; }
.eal-card li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.eal-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eal-card li > a:hover .eal-card__title { color: var(--eal-green); text-decoration: underline; }
.eal-card__cmt { flex: none; font-size: 12px; font-weight: 700; color: var(--eal-amber); }
.eal-card time { flex: none; font-size: 12.5px; color: var(--eal-ink3); }
.eal-lock { font-size: 12px; }

/* 사진 */
.eal-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eal-photo { position: relative; display: block; border-radius: var(--eal-r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--eal-sand-d); }
.eal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.eal-photo:hover img { transform: scale(1.04); }
.eal-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 10px; font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 게시판 둘러보기 */
.eal-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.eal-group { background: #fff; border: 1px solid var(--eal-line); border-radius: var(--eal-r); padding: 18px 20px; }
.eal-group__title { margin: 0 0 8px; font-size: 16px; font-weight: 900; color: var(--eal-green-d); }
.eal-group ul { list-style: none; margin: 0; padding: 0; }
.eal-group li { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.eal-group li > a { font-weight: 600; }
.eal-group li > a:hover { color: var(--eal-green); text-decoration: underline; }
.eal-group__count { margin-left: auto; font-size: 12.5px; color: var(--eal-ink3); }
.eal-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--eal-sand); color: var(--eal-ink2); white-space: nowrap; }
.eal-badge--member { background: #e7eefb; color: #2d5596; }
.eal-badge--regular { background: #f1e6fb; color: #6c3a99; }
.eal-badge--staff { background: #fde9d7; color: #9a4f12; }
.eal-badge--admin { background: #fbe3e3; color: #a12c2c; }
.eal-badge--preview { background: #fff3d6; color: #8a6210; }
.eal-badge--guest { background: var(--eal-green-l); color: var(--eal-green-d); }

/* 앱 받기 */
.eal-app { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px;
  background: linear-gradient(120deg, var(--eal-green-d), var(--eal-green)); color: #fff; }
.eal-app__text { display: flex; align-items: center; gap: 16px; }
.eal-app__appicon { border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.2); flex: none; }
.eal-app h2 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.eal-app p { margin: 0; color: #d7e6dd; font-size: 14px; }
.eal-app p b { color: #f4e3bd; }
.eal-app__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.eal-store { display: inline-flex; flex-direction: column; padding: 7px 16px; border-radius: 10px; background: #0d1a14; color: #fff !important; font-weight: 800; font-size: 16px; line-height: 1.15; }
.eal-store small { font-size: 10px; font-weight: 600; opacity: .8; }
.eal-store:hover { background: #000; }
.eal-app__soon { color: #f4e3bd !important; font-weight: 700; }

/* 꼬리말 */
.eal-footer { background: #13231c; color: #b8c8be; font-size: 13.5px; margin-top: 0; }
.eal-footer__in { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-top: 34px; padding-bottom: 22px; }
.eal-footer__site { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 16px; }
.eal-footer__brand p { margin: 10px 0 0; max-width: 34em; }
.eal-footer__links { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.eal-footer a { color: #e6efe9; }
.eal-footer__op { display: inline-flex; align-items: center; gap: 6px; color: #8fa498; }
.eal-footer__op img { border-radius: 3px; }
.eal-footer__copy { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; padding-bottom: 24px; color: #7f9488; font-size: 12.5px; }

/* 좁은 화면 */
@media (max-width: 960px) {
  .eal-nav, .eal-account { display: none; }
  .eal-burger { display: flex; }
  .eal-hero__in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 36px; padding-bottom: 40px; }
  .eal-hero__title { font-size: 32px; }
  .eal-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eal-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .eal-wrap { padding: 0 16px; }
  .eal-topbar__note { display: none; }
  .eal-hero__eyebrow { display: none; }
  .eal-header__in { min-height: 58px; gap: 12px; }
  .eal-brand__text strong { font-size: 16px; }
  .eal-hero__title { font-size: 28px; }
  .eal-hero__lead { font-size: 15px; }
  .eal-latest, .eal-groups { grid-template-columns: minmax(0, 1fr); }
  .eal-section { margin-top: 32px; }
  .eal-app { padding: 18px; }
  #container.eal-main #bo_list, #container.eal-main #bo_v, #container.eal-main #bo_w, #container.eal-main #bo_gall { padding: 14px; border-radius: 12px; }
}
