/* 그레드하우스 공통 테마 (모든 페이지에서 style.css 다음에 로드) */
/* ===== 메인페이지 외관 (이 파일에서만 적용) ===== */
body{background:#fcf6f0}
.top-visual{position:relative;background:#f7e9dd url(img/top-bg.jpg) center bottom/cover no-repeat}
.top-visual::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:linear-gradient(rgba(252,246,240,0),#fcf6f0);pointer-events:none;z-index:0}
.top-visual::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(rgba(255,248,242,.93) 0,rgba(255,248,242,.86) 130px,rgba(255,248,242,0) 100%);pointer-events:none;z-index:0}
.top-visual>*{position:relative;z-index:1}
.topbar{background:none;height:38px}
.topbar .wrap{align-items:center}
.btn{height:26px;line-height:26px;border-radius:14px;font-weight:500}
.btn.blue{background:#b0566f}.btn.gray{background:rgba(255,255,255,.7);color:#6b4a45}
.tb-user{color:#8a7570!important}
header{background:none;height:92px}
.logo img{height:74px}
.search{border:2px solid #efb4b8;box-shadow:0 4px 14px rgba(176,86,111,.12);height:50px;width:490px;padding:0 6px 0 22px}
.search button{width:40px;height:40px;border-radius:20px;background:linear-gradient(#cf7a80,#b0566f);align-items:center;justify-content:center}
.search svg{stroke:#fff;width:20px;height:20px}
.region-nav{background:rgba(255,255,255,.55);border-bottom:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.region-nav .wrap{font-weight:500;color:#3b2f2c}
.hero{height:max(340px,calc(33.4vw - 178px));background:none}
.hero-bg{display:none}
.hero>.wrap:last-child{position:absolute;left:15.7vw;right:15.7vw;top:44px;width:auto;max-width:none;padding:0}
.category-box{top:0;border-radius:6px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(120,70,50,.14);padding:20px 22px 16px}
.crow.r2{margin-top:14px}

.cat{flex:none}
.ico{width:36px;height:36px;stroke:#2a2320;stroke-width:1.8;margin-bottom:8px;transition:.18s}
.cat{font-weight:500;color:#3b2f2c}
.cat:hover .ico{stroke:#b0566f;transform:translateY(-2px)}
.hero-copy{position:absolute;left:max(18px,calc(15.7vw - 232px));top:48px;font-family:"Noto Serif KR",serif;color:#fff;z-index:2;text-shadow:0 2px 14px rgba(120,50,20,.55),0 0 3px rgba(120,50,20,.35)}
.hero-copy h2{margin:0;font-size:clamp(16px,1.65vw,26px);line-height:1.35;font-weight:600;letter-spacing:-.02em}
.hero-copy p{margin:12px 0 0;font-size:clamp(11px,.95vw,15px);line-height:1.65;color:#fff;font-family:"Noto Sans KR",sans-serif}
.hero-script{position:absolute;right:max(10px,calc(15.7vw - 232px));top:78px;transform:rotate(-10deg);font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(14px,1.5vw,25px);line-height:1.15;color:#fff;text-shadow:0 2px 12px rgba(120,50,20,.6);z-index:2;white-space:nowrap}
.hero-script span{display:block;padding-left:30px}
@media(max-width:1180px){.hero-copy,.hero-script{display:none}}
@media(max-width:1240px){.hero>.wrap:last-child{left:0;right:0;padding:0 16px}.hero{height:300px}}
@media(max-width:760px){.logo img{height:42px}.search{width:56%;height:42px}.search button{width:32px;height:32px}.hero{height:230px}}
/* 섹션 제목 */
.rooms h3{display:flex;align-items:center;gap:22px;font:400 20px "Noto Serif KR",serif;color:#5a4038;padding:34px 4px 18px}
.rooms:first-of-type h3{padding-top:30px}
.rooms h3 a{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
.rooms h3 a::after{content:"";flex:1;height:1px;background:#e7d6cc}
.rooms h3::after{content:"MORE  \203A";font:400 12px "Noto Sans KR",sans-serif;letter-spacing:.08em;color:#8a7570}
.rooms h3 a:hover{color:#b0566f}
/* 카드 */
.grid{column-gap:16px;row-gap:20px}
.card{background:#fff;border-radius:10px;padding:2px 2px 14px;box-shadow:0 4px 16px rgba(120,70,50,.10);text-align:left;transition:.25s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(120,70,50,.18)}
.card>a{display:block;position:relative}
.card .ph{border-radius:8px;position:relative}
.card .ph::after{content:"";position:absolute;right:10px;top:10px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.500A4 4 0 0 1 19 10c0 5.600-7 10-7 10z'/%3E%3C/svg%3E") center/18px no-repeat,rgba(255,255,255,.85);border-radius:50%}
.card b{margin:14px 16px 0;font-size:14px;font-weight:500;color:#2d2522;text-overflow:ellipsis}
.card strong{margin:7px 16px 10px;font-size:14px;font-weight:500}
.card small{margin:0 0 0 16px;background:#b0566f;font-size:10.5px;padding:4px 10px;border-radius:2px}
/* 배너 · 푸터 */
.banner{border-radius:10px;overflow:hidden}
footer{background:rgba(255,255,255,.55);border-top:1px solid #eadbd1}
/* 中文说明：仅替换 LOGO 交互，不改变图片、尺寸或 HEADER 布局。 */
.logo{
  position:relative;
  isolation:isolate;
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.logo img{width:auto;object-fit:contain;transform-origin:50% 50%;transition:filter .5s cubic-bezier(.22,.61,.36,1)}
/* 中文说明：香槟金反射光置于图片下方，不接收鼠标事件。 */
.logo::before{
  content:"";
  position:absolute;
  inset:6% -3%;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse,rgba(214,185,126,.22) 0%,rgba(232,210,164,.11) 48%,rgba(232,210,164,0) 76%);
  opacity:0;
  filter:blur(9px) brightness(.9);
  transition:opacity .5s ease-out;
}
/* 中文说明：星星位于当前源图左侧约 28%、顶部约 12.5%；仅叠加一次柔光。 */
.logo::after{
  content:"";
  position:absolute;
  left:28%;
  top:12.5%;
  width:6.4%;
  height:25%;
  z-index:1;
  pointer-events:none;
  transform:translate(-50%,-50%);
  clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%);
  background:radial-gradient(ellipse,rgba(255,247,220,.55),rgba(240,216,169,.2) 48%,transparent 76%);
  mix-blend-mode:screen;
  opacity:0;
}
@media(hover:hover) and (pointer:fine){
  .logo:hover{transform:translateY(-3px) scale(1.035)}
  /* 中文说明：直接给图片增加光晕，避免伪元素被浏览器层叠裁掉。 */
  .logo:hover img{filter:drop-shadow(0 0 4px rgba(218,190,132,.28)) drop-shadow(0 5px 9px rgba(90,64,48,.12))}
  .logo:hover::before{
    opacity:1;
    animation:gred-logo-breathe 3.8s ease-in-out infinite;
  }
  .logo:hover::after{animation:gred-logo-sparkle 1.4s ease-out .08s 1 both}
}
/* 中文说明：键盘焦点沿用同样的克制提示。 */
.logo:focus-visible{transform:translateY(-3px) scale(1.035)}
.logo:focus-visible img{filter:drop-shadow(0 0 4px rgba(218,190,132,.28)) drop-shadow(0 5px 9px rgba(90,64,48,.12))}
.logo:focus-visible::before{
  opacity:1;
  animation:gred-logo-breathe 3.8s ease-in-out infinite;
}
.logo:focus-visible::after{animation:gred-logo-sparkle 1.4s ease-out .08s 1 both}
@keyframes gred-logo-breathe{
  0%,100%{filter:blur(9px) brightness(.9)}
  50%{filter:blur(12px) brightness(1.14)}
}
@keyframes gred-logo-sparkle{
  0%{opacity:0}
  28%{opacity:.65}
  100%{opacity:0}
}
/* 中文说明：减少动态效果时保留静态柔光，关闭位移、缩放及循环。 */
@media(prefers-reduced-motion:reduce){
  .logo{transition:none}
  .logo:hover,.logo:focus-visible{transform:none}
  .logo img,.logo:hover img,.logo:focus-visible img{transition:none;filter:none}
  .logo::before{transition:none}
  .logo:hover::before,.logo:focus-visible::before{animation:none}
  .logo:hover::after,.logo:focus-visible::after{animation:none;opacity:0}
}

/* ===== 하위 페이지 공통 톤 맞춤 ===== */
.list-title,.detail-title,.auth-title{font-family:"Noto Serif KR",serif;font-weight:600;color:#5a4038}
.list-title{margin-top:44px}
.list-total{border-bottom-color:#e7d6cc}
.list-total em{color:#b0566f}
.sorts button{border:1px solid #e7d6cc;border-radius:6px;background:#fff;color:#5a4038}
.pager a{border-color:#e7d6cc;border-radius:6px;background:#fff}
.pager a.on{background:#b0566f;border-color:#b0566f}
.login-bg,.join-bg{background:transparent}
.auth-card{border-color:#eadbd1;border-radius:12px;box-shadow:0 6px 24px rgba(120,70,50,.08)}
.a-btn.primary,.j-chk,.j-img,.h-btn,.w-btn,.m-tabs a.on{background:#b0566f;border-color:#b0566f}
.w-btn.gray{background:#d9cfc9}
.m-tabs a{border-color:#eadbd1;border-radius:10px}
.h-table,.w-table{border-top-color:#b0566f}
.h-table th,.w-table th{background:#fbf4ef}
.n-table{border-top-color:#5a4038}
.m-card,.m-box,.m-btns a,.p-form,.ov-card,.book{border-color:#eadbd1;border-radius:10px;background:#fff}
.btn-book,.ov-btn{background:#b0566f}
.o-top{border-bottom-color:#b0566f}
.gallery{border-radius:10px}
.detail-tab span{border-bottom-color:#b0566f}
.list-grid .card b{margin:14px 16px 0}
.list-grid .card strong{margin:7px 16px 10px}
.list-grid .card small{margin:0 0 0 16px}
.category-box{display:flex;flex-direction:column;justify-content:center}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;background:linear-gradient(90deg,rgba(110,52,28,.55) 0,rgba(110,52,28,.28) 11%,rgba(110,52,28,0) 19%),linear-gradient(270deg,rgba(110,52,28,.5) 0,rgba(110,52,28,.22) 11%,rgba(110,52,28,0) 19%)}
.hero-copy{text-shadow:0 1px 3px rgba(80,30,10,.7),0 2px 16px rgba(80,30,10,.6)}
.hero-script{text-shadow:0 1px 3px rgba(80,30,10,.7),0 2px 14px rgba(80,30,10,.6)}
@media(max-width:1180px){.hero::before{display:none}}

/* ===== v28: 히어로 높이 축소 + 카테고리 격자 정렬 ===== */
.hero{height:272px}
.top-visual{background-position:center 72%}
.hero>.wrap:last-child{top:34px}
.hero-copy{top:40px}
.hero-script{top:66px}
.category-box{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;row-gap:14px;padding:18px 20px 16px;min-height:0}
.category-box .crow{display:contents}
.category-box .cat{width:calc(100% / 9);min-width:0;flex:none;padding:0 4px;white-space:normal;text-align:center;word-break:keep-all;line-height:1.3;align-items:center}
.category-box .cat span{display:block}
@media(max-width:1240px){.hero{height:auto;min-height:272px;padding-bottom:20px}.hero>.wrap:last-child{position:relative;top:auto;margin-top:22px}}
@media(max-width:760px){.category-box .cat{width:25%}.hero{min-height:0}}
@media(min-width:1300px){.category-box .cat{padding:0;white-space:nowrap;letter-spacing:-.03em}}