/* 비로그인 메인. 로그인 후 화면은 건드리지 않는다. */
body.site-body:has(#homeGuestDeck:not([hidden])) .site-main {
  max-width: none;
  width: 100%;
  min-height: calc(100vh - var(--site-nav-h, 58px));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  background: #fff;
  color: #1d1d1f;
}
body.site-body:has(#homeGuestDeck:not([hidden])) #homeLoggedLayout,
body.site-body:has(#homeGuestDeck:not([hidden])) #homeHero {
  display: none !important;
}

.home-guest-ring {
  --g: #48c78e;
  --gd: #3ab57d;
  --gl: #e9f7f0;
  --m: #6e6e73;
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  color: #1d1d1f;
}
.home-guest-ring.site-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #1d1d1f;
}
.home-guest-ring.is-intro-mode .hg-page { display: none !important; }
.home-guest-ring button { font-family: inherit; }

.hg-hero {
  text-align: center;
  padding: 48px 24px 0;
  background: linear-gradient(#fff 0%, #fff 40%, var(--gl) 100%);
  overflow: hidden;
}
.hg-eyebrow {
  display: inline-block;
  background: var(--gl);
  color: var(--gd);
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
}
.hg-hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: -2px;
  margin: 14px 0 10px;
  line-height: 1.15;
  color: #1d1d1f;
}
.hg-hero h1 em { font-style: normal; color: var(--gd); }
.hg-hero > p { font-size: 21px; color: var(--m); margin: 0; }
.hg-btn {
  display: inline-block;
  background: var(--g);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font: 700 17px Pretendard, "Malgun Gothic", sans-serif;
  cursor: pointer;
}
.hg-btn:hover { background: var(--gd); }
.hg-hero .hg-btn { margin-top: 28px; }
.hg-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px auto 0; max-width: 900px; }
.hg-chips a {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 15px;
  color: inherit;
  text-decoration: none;
}
.hg-collage { position: relative; max-width: 1100px; height: 520px; margin: 18px auto 0; }
html.is-desktop-screen .hg-hero { max-width: 1480px; margin-left: auto; margin-right: auto; }
html.is-desktop-screen .hg-chips { max-width: 1280px; }
html.is-desktop-screen .hg-collage { max-width: 1480px; height: 640px; }
html.is-desktop-screen .hg-collage .hg-f img { height: 300px; }
html.is-desktop-screen .hg-collage .c1 { width: 300px; }
html.is-desktop-screen .hg-collage .c2,
html.is-desktop-screen .hg-collage .c4 { width: 330px; }
html.is-desktop-screen .hg-collage .c3 { width: 400px; margin-left: -200px; }
html.is-desktop-screen .hg-collage .c5 { width: 300px; }
html.is-desktop-screen .home-search-lead { max-width: 1100px; }
html.is-desktop-screen .hg-menus,
html.is-desktop-screen .hg-pipe,
html.is-desktop-screen .hg-trio,
html.is-desktop-screen .hg-fan,
html.is-desktop-screen .hg-shot,
html.is-desktop-screen .hg-pad-duo { max-width: 1480px; }
.hg-f {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
  border: 1px solid #e6e6e6;
  transform-origin: 50% 140%;
}
.hg-f img, .hg-browser img, .hg-tablet img, .hg-alims img, .hg-src img, .hg-o1 img { display: block; width: 100%; }
.hg-collage .hg-f img { height: 250px; object-fit: cover; object-position: top center; }
.hg-collage .c1 { left: 8px; top: 78px; width: 250px; transform: rotate(-16deg); z-index: 1; }
.hg-collage .c2 { left: 175px; top: 36px; width: 270px; transform: rotate(-8deg); z-index: 2; }
.hg-collage .c3 { left: 50%; top: 6px; width: 320px; margin-left: -160px; z-index: 5; }
.hg-collage .c4 { right: 175px; top: 36px; width: 270px; transform: rotate(8deg); z-index: 3; }
.hg-collage .c5 { right: 8px; top: 78px; width: 250px; transform: rotate(16deg); z-index: 1; }
.hg-mas { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); height: 150px; z-index: 6; }

.hg-feat {
  display: block;
  width: 100%;
  padding: 110px 24px;
  text-align: center;
  border: 0;
  background: #fff;
  color: inherit;
  cursor: pointer;
}
.hg-feat:nth-of-type(even) { background: #f7f8f8; }
.hg-kw { font-size: 15px; font-weight: 700; color: var(--gd); letter-spacing: 1px; }
.hg-feat h2, .hg-menuwrap h2, .hg-cta h2, .gi h2 {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin: 10px 0 12px;
  color: #1d1d1f;
}
.hg-feat p, .gi-lead { font-size: 19px; color: var(--m); margin: 0; }
.hg-more { display: inline-block; margin-top: 16px; color: var(--gd); font-weight: 700; }
.hg-more::after { content: " ›"; }
.hg-badge {
  display: inline-block;
  margin-top: 14px;
  background: var(--gl);
  color: var(--gd);
  border: 1px solid var(--g);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 15px;
}
.hg-shot { max-width: 1000px; margin: 46px auto 0; }
.hg-browser {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.13);
  border: 1px solid #e3e3e3;
  text-align: left;
}
.hg-bar { height: 34px; background: #f1f3f4; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.hg-bar span { background: #fff; border-radius: 6px; font-size: 12px; color: #888; padding: 3px 14px; }
.hg-duo { display: flex; justify-content: center; align-items: center; gap: 50px; margin-top: 46px; flex-wrap: wrap; }
.hg-trio { display: flex; justify-content: center; align-items: flex-start; gap: 16px; margin: 22px auto 0; flex-wrap: wrap; max-width: 1100px; }
.hg-trio .hg-browser { width: min(340px, 100%); }
.hg-duo-top { align-items: flex-start; }
.hg-browser-drop { margin-top: 70px; }
.hg-pad-duo { max-width: 1180px; gap: 28px; margin-left: auto; margin-right: auto; flex-wrap: nowrap; align-items: center; }
.hg-pad-shot { display: block; width: min(460px, 40vw); flex: 0 0 auto; border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); background: #fff; }
.hg-pad-duo .hg-alims { flex-direction: row; flex-wrap: nowrap; gap: 16px; align-items: center; }
.hg-pad-duo .hg-alims img { width: min(300px, 26vw); }
.hg-alims { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hg-alims img, .hg-fan img, .hg-alim1 {
  width: min(330px, 100%);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
.hg-stack { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; margin-top: 0; }
.hg-alim1 { width: min(340px, 100%) !important; }
.hg-tax-alims { margin-top: 28px; }
.hg-tax-alims img { width: min(300px, 100%); }
.hg-fan { position: relative; height: 470px; max-width: 900px; margin: 40px auto 0; }
.hg-fan img { position: absolute; top: 0; width: 300px; }
.hg-fan img:nth-child(1) { left: calc(50% - 400px); transform: rotate(-6deg); top: 30px; }
.hg-fan img:nth-child(2) { left: calc(50% - 150px); z-index: 2; }
.hg-fan img:nth-child(3) { left: calc(50% + 100px); transform: rotate(6deg); top: 30px; }
.hg-fancap { margin-top: 6px; font-weight: 700; color: var(--gd) !important; }
.hg-pipe { display: flex; align-items: center; justify-content: center; gap: 26px; max-width: 1080px; margin: 46px auto 0; flex-wrap: wrap; }
.hg-pipe figure { background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); margin: 0; }
.hg-pipe figcaption { font-weight: 800; margin-top: 6px; font-size: 17px; }
.hg-next { width: min(240px, 86vw); background: #fff; border: 1px solid #d9d9d9; border-radius: 16px; padding: 16px 16px 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); text-align: left; }
.hg-next b { display: block; margin-bottom: 8px; font-size: 16px; }
.hg-next span { display: block; padding: 8px 0; border-top: 1px solid #eee; font-weight: 700; font-size: 15px; }
.hg-src img { width: min(420px, 80vw); height: 330px; object-fit: contain; }
.hg-arr { font-size: 30px; color: var(--g); }
.hg-outs { display: flex; flex-direction: column; gap: 16px; }
.hg-o1 img { width: min(400px, 80vw); height: 200px; object-fit: contain; }
.hg-o1 figcaption { color: var(--gd); }
.hg-o2 {
  background: var(--gl);
  border: 1.5px solid var(--g);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.hg-o2 b { font-size: 19px; display: block; color: #1d1d1f; }
.hg-o2 span { display: block; font-size: 14px; color: var(--m); }
.hg-price {
  display: inline-block;
  margin-top: 22px;
  color: #2d7a57;
  background: var(--gl);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 15px;
  font-weight: 700;
}

.hg-menuwrap { padding: 100px 24px; text-align: center; background: #fff; }
.hg-menuwrap h2 { font-size: 40px; margin-bottom: 36px; }
.hg-menus { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hg-menus button { border: 0; padding: 0; background: none; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); cursor: pointer; }
.hg-menus img { width: 100%; display: block; }
.hg-cta { background: var(--gl); padding: 80px 24px; text-align: center; }
.hg-cta img { height: 150px; }
.hg-cta h2 { font-size: 40px; margin: 10px 0 22px; }
.hg-naver {
  margin: 30px auto 0;
  max-width: 400px;
  background: #fff;
  border: 2.5px solid #03c75a;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 16px;
  color: #444;
}
.hg-naver b { color: #03c75a; }
.home-guest-seo-desc {
  margin: 0;
  padding: 8px 16px 28px;
  text-align: center;
  color: #c5c5c5;
  font-size: 12px;
}

.home-guest-intro { max-width: 980px; margin: 0 auto; padding: 28px 20px 72px; text-align: center; }
.hg-back {
  border: 0;
  background: transparent;
  color: var(--gd);
  font-weight: 700;
  cursor: pointer;
  padding: 0 0 12px;
}
.gi { text-align: center; }
.gi-kw { font-size: 15px; font-weight: 700; color: var(--gd); letter-spacing: 1px; margin: 8px 0 0; }
.gi-lead { margin: 0 auto 8px; max-width: 40rem; }
.gi-shots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px; margin: 28px 0; }
.gi-shots .hg-browser { width: min(680px, 100%); }
.gi-shots .hg-plain, .gi-shots .hg-alims img { width: min(420px, 100%); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14); }
.gi-pad-all { width: min(1180px, 100%); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.gi-padboard {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 20px; padding: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.gi-padboard .gi-pad { width: min(420px, 100%); border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.gi-padboard img:not(.gi-pad) { width: min(280px, 100%); border-radius: 12px; background: #fff; }
.gi-kaks { display: flex; justify-content: center; gap: 16px; margin-top: 0; flex-wrap: wrap; align-items: center; }
.gi-kaks img { width: min(340px, 42vw); border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); }
.gi-ocr { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.gi-ocr figure { margin: 0; width: min(320px, 42vw); background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.gi-ocr img { display: block; width: 100%; height: 260px; object-fit: contain; background: #fff; }
.gi-ocr figcaption { font-weight: 800; margin-top: 8px; font-size: 16px; }
.gi-feats { list-style: none; padding: 0; margin: 8px auto 0; max-width: 720px; text-align: left; display: grid; gap: 12px; }
.gi-feats li { background: #f7f8f8; border-radius: 14px; padding: 14px 16px; }
.gi-feats b { display: block; font-size: 17px; margin-bottom: 4px; }
.gi-feats span { color: var(--m); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.gi-note { margin: 22px 0 0; color: #1d1d1f; font-weight: 700; }
.home-guest-intro .hg-btn { margin-top: 28px; }

@media (min-width: 1200px) {
  .hg-chips { max-width: 1280px; }
  .hg-collage { max-width: 1480px; height: 640px; }
  .hg-collage .hg-f img { height: 300px; }
  .hg-collage .c1 { width: 300px; }
  .hg-collage .c2,
  .hg-collage .c4 { width: 330px; }
  .hg-collage .c3 { width: 400px; margin-left: -200px; }
  .hg-collage .c5 { width: 300px; }
  .home-search-lead { max-width: 1100px; }
  .hg-menus,
  .hg-pipe,
  .hg-trio,
  .hg-fan,
  .hg-shot,
  .hg-pad-duo { max-width: 1480px; }
}
@media (max-width: 900px) {
  html:not(.is-desktop-screen) .hg-collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 8px 24px; }
  html:not(.is-desktop-screen) .hg-collage .c1,
  html:not(.is-desktop-screen) .hg-collage .c2,
  html:not(.is-desktop-screen) .hg-collage .c3,
  html:not(.is-desktop-screen) .hg-collage .c4,
  html:not(.is-desktop-screen) .hg-collage .c5 { position: static; width: auto; transform: none; }
  html:not(.is-desktop-screen) .hg-mas { position: static; transform: none; height: 120px; margin: 0 auto; grid-column: 1 / -1; }
  html:not(.is-desktop-screen) .hg-fan { height: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  html:not(.is-desktop-screen) .hg-fan img { position: static; transform: none !important; width: min(300px, 100%); }
  html:not(.is-desktop-screen) .hg-browser-drop,
  html:not(.is-desktop-screen) .hg-stack { margin-top: 16px; }
  html:not(.is-desktop-screen) .hg-feat { padding: 64px 16px; }
  html:not(.is-desktop-screen) .hg-menus { grid-template-columns: 1fr 1fr; }
  html:not(.is-desktop-screen) .hg-src img,
  html:not(.is-desktop-screen) .hg-o1 img { height: auto; }
  html:not(.is-desktop-screen) .hg-pad-duo { flex-wrap: wrap; max-width: none; }
  html:not(.is-desktop-screen) .hg-pad-shot { width: min(420px, 92vw); flex-basis: auto; }
  html:not(.is-desktop-screen) .hg-pad-duo .hg-alims img { width: min(280px, 44vw); }
  html:not(.is-desktop-screen) .gi-ocr figure { width: min(320px, 100%); }
  html:not(.is-desktop-screen) .gi-ocr img { height: 220px; }
}