/* 기본 스타일 초기화 */
*, :after, :before {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html {overflow-y:scroll;}
body {margin:0;padding:0;background-color:#111;color:#fff;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6 {font-size:18px;word-break: auto-phrase;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ul, ol, dl {margin: 0;padding: 0;list-style: none;}
li, dt, dd {word-break: break-all;}
dd {margin: 0;word-break: auto-phrase;}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:normal;text-indent:-9999em;overflow:hidden;}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;}
input[type="submit"] {cursor:pointer;}
button {cursor:pointer;word-break: auto-phrase;}
select {margin:0;}
p {margin: 0;padding: 0;word-break: auto-phrase;}
pre {overflow: auto;}
a {color:#000;text-decoration:none;line-height: normal;word-break: auto-phrase;}
input[type="text"], input[type="password"], textarea {-webkit-transition:all 0.30s ease-in-out;-moz-transition:all 0.30s ease-in-out;-ms-transition:all 0.30s ease-in-out;-o-transition:all 0.30s ease-in-out;outline:none;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {outline: #8e836a solid 1px;box-shadow: 0px 0px 5px 0px #8e836a;}
img {max-width: 100%;}
textarea {resize: vertical;}
body,
h1, h2, h3, h4, h5, h6,
input, button,
textarea, select {
	font-family: 'Noto Sans KR', 'dotum', sans-serif;
	font-size: 16px;
	color: #000;
}
body:before {
	content:"";
	position:fixed;inset:0;
	background:url('../img/background.jpg') center/cover no-repeat;
	filter:brightness(.55);
	z-index:-2;
}
body:after {
	content:"";position:fixed;inset:0;backdrop-filter:blur(2px);z-index:-1;
}

/* 레이아웃 래퍼 */
#wrapper {max-width:1550px;padding:0 40px;margin:0 auto;}
#header {padding:18px 0;}
#header .logo img {height:68px;}

/* 히어로 */
.landing-inner {padding-bottom:60px;}
.hero-head {margin-top:10px;margin-bottom:30px;}
.hero-head h2 {font-size:48px;line-height:1.15;font-weight:700;color:#fff;margin:0 0 8px;}
.hero-head p {font-size:20px;font-weight:400;color:#ddd;}

/* 카드 그리드 */
.card-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:40px 10px;}
.place-card {position:relative;height:300px;border-radius:22px;overflow:hidden;box-shadow:0 8px 28px -6px rgba(0,0,0,.55);display:flex;background:#222;border:1px solid rgba(255, 255, 255, 0.73);transition:transform .3s,box-shadow .3s;}
.place-card .media {flex:1 1 auto;position:relative;}
.place-card .media img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.place-card:hover .media img {transform:scale(1.05);}
.place-card .info {position:absolute;top:0;right:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:25px 18px;backdrop-filter:blur(2px);}
.place-card .info .info-body {flex:1 1 auto;display:flex;flex-direction:column;gap:10px;}
.place-card .info .actions {}
.place-card .tags {display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;}
.place-card .tags li {font-size:10px;font-weight:600;letter-spacing:.4px;padding:3px 8px;border-radius:14px;background:#fff;color:#1a1a1a;line-height:1.1;}
.place-card h3 {font-size:20px;margin:0 0 10px;font-weight:700;color:#fff;}
.place-card .desc {
	font-size:13px;
	line-height:1.5;
	color:#f2f2f2;
	margin:0 0 18px;
	max-height:70px;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	text-overflow:ellipsis;
	word-break:break-all;
}
.place-card .actions {display:flex;flex-direction:column;gap:10px;}
.place-card .btn {display:flex;align-items:center;justify-content:center;height:42px;border-radius:8px;font-size:14px;font-weight:600;letter-spacing:.3px;transition:all .3s;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(255,255,255,.25);text-align:center;}
.place-card .btn:hover {background:rgba(255,255,255,.12);}
.place-card .btn-vr {background:rgba(0,0,0,.55);}
.place-card .btn-vr:hover {background:rgba(0,0,0,.7);}
.place-card .btn-vr-disable {background:rgba(0,0,0,.55);cursor:not-allowed;opacity:.6;}
.place-card .btn-vr-disable:hover {background:rgba(0,0,0,.55);}

/* 테마 색상 (오른쪽 패널 그라데이션) */
.place-card.theme-green .info {background:linear-gradient(110deg,#008c5a 0%,rgba(0,140,90,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-purple .info {background:linear-gradient(110deg,#5d1f96 0%,rgba(93,31,150,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-brown .info {background:linear-gradient(110deg,#7a4b18 0%,rgba(122,75,24,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-forest .info {background:linear-gradient(110deg,#144d3a 0%,rgba(20,77,58,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-blue .info {background:linear-gradient(110deg,#0060b9 0%,rgba(0,96,185,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-navy .info {background:linear-gradient(110deg,#061f47 0%,rgba(6,31,71,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-ocean .info {background:linear-gradient(110deg,#0d5f93 0%,rgba(13,95,147,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-leaf .info {background:linear-gradient(110deg,#3b7324 0%,rgba(59,115,36,.85)30%,rgba(0,0,0,.05)100%);}
.place-card.theme-sunset .info {background:linear-gradient(110deg,#b45219 0%,rgba(180,82,25,.85)30%,rgba(0,0,0,.05)100%);}

/* 반응형 */
@media (max-width:1400px){
	#wrapper {padding:0 30px;}
	.card-grid {gap:36px 18px;}
	.place-card {height:290px;}
}
@media (max-width:1150px){
	.card-grid {grid-template-columns:repeat(2,1fr);gap:36px 18px;}
	.place-card .info {width:52%;}
	.place-card {height:310px;}
}
@media (max-width:820px){
	.hero-head h2 {font-size:42px;}
	.card-grid {grid-template-columns:1fr;gap:32px;}
	.place-card {height:auto;min-height:320px;flex-direction:column;}
	.place-card .media {height:180px;}
	.place-card .info {position:static;width:100%;background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.25));height:auto;padding:20px 22px 22px;}
	.place-card .info .actions {margin-top:12px;}
}
@media (max-width:520px){
	.hero-head h2 {font-size:34px;}
	.hero-head p {font-size:16px;}
	.place-card {min-height:0;}
	.place-card .media {height:160px;}
	.place-card .desc {display:none;}
}