<!-- 펜톤나인 [A02] Calm Ocean 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9A02Page {
--p9a2-ink: #222222;
--p9a2-sub: #717171;
--p9a2-line: #ebebeb;
--p9a2-accent: #FF385C;
--p9a2-bg-soft: #f7f7f7;
}
#p9A02Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a2-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9A02Page * { box-sizing: border-box; }
#p9A02Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9A02Page .p9a2-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9a2-sub);
}
#p9A02Page .p9a2-crumb { min-width: 0; }
#p9A02Page .p9a2-crumb b { color: var(--p9a2-ink); font-weight: 600; }
#p9A02Page .p9a2-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9A02Page .p9a2-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9a2-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9A02Page .p9a2-share:hover { background: var(--p9a2-bg-soft); }
#p9A02Page .p9a2-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9a2-line); border-radius: 999px; padding: 3px;
}
#p9A02Page .p9a2-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9a2-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9A02Page .p9a2-lang button.on { background: var(--p9a2-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9A02Page .p9a2-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9A02Page .p9a2-gallery .p9a2-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9A02Page .p9a2-gallery .p9a2-main { grid-row: 1 / 3; }
#p9A02Page .p9a2-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9A02Page .p9a2-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9A02Page .p9a2-stats { font-size: 15px; color: var(--p9a2-ink); margin: 0 0 4px; font-weight: 500; }
#p9A02Page .p9a2-stats2 { font-size: 14px; color: var(--p9a2-sub); margin: 0; }
#p9A02Page .p9a2-divider { border: none; border-top: 1px solid var(--p9a2-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9A02Page .p9a2-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9A02Page .p9a2-feat + .p9a2-feat { border-top: 1px solid var(--p9a2-line); }
#p9A02Page .p9a2-feat svg { margin-top: 2px; }
#p9A02Page .p9a2-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9A02Page .p9a2-feat p { margin: 0; font-size: 14px; color: var(--p9a2-sub); }
/* ── 섹션 제목 ── */
#p9A02Page .p9a2-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9A02Page .p9a2-h2sub { font-size: 14px; color: var(--p9a2-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9A02Page .p9a2-info { border: 1px solid var(--p9a2-line); border-radius: 14px; padding: 24px; }
#p9A02Page .p9a2-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9A02Page .p9a2-infoitem + .p9a2-infoitem { border-top: 1px solid var(--p9a2-line); }
#p9A02Page .p9a2-infoitem svg { margin-top: 2px; }
#p9A02Page .p9a2-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9A02Page .p9a2-infoitem span { font-size: 13px; color: var(--p9a2-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9A02Page .p9a2-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9A02Page .p9a2-layout .cell {
border: 1px solid var(--p9a2-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9A02Page .p9a2-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9A02Page .p9a2-layout .cell svg { margin-bottom: 0; }
#p9A02Page .p9a2-layout .cell .txt { width: 100%; }
#p9A02Page .p9a2-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9a2-sub); align-self: center; margin-left: 1px; }
#p9A02Page .p9a2-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9A02Page .p9a2-layout .beds { font-size: 13.5px; color: var(--p9a2-sub); }
#p9A02Page .p9a2-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9a2-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9A02Page .p9a2-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9a2-sub);
}
/* ── 편의시설 ── */
#p9A02Page .p9a2-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9A02Page .p9a2-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9a2-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9A02Page .p9a2-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9A02Page .p9a2-fac .cell {
border: 1px solid var(--p9a2-line); border-radius: 14px; padding: 22px 20px;
}
#p9A02Page .p9a2-fac .cell svg { margin-bottom: 14px; }
#p9A02Page .p9a2-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9A02Page .p9a2-fac .fdesc { font-size: 13.5px; color: var(--p9a2-sub); }
#p9A02Page .p9a2-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9a2-line);
}
#p9A02Page .p9a2-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9A02Page .p9a2-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9A02Page .p9a2-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9A02Page .p9a2-fac a.cell:hover { background: var(--p9a2-bg-soft); }
#p9A02Page .p9a2-fac b { display: flex; align-items: center; gap: 6px; }
#p9A02Page .p9a2-fac .farrow { transition: transform .15s; }
#p9A02Page .p9a2-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9A02Page .p9a2-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9A02Page .p9a2-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9a2-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9A02Page .p9a2-deal:hover { background: var(--p9a2-bg-soft); }
#p9A02Page .p9a2-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9a2-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9A02Page .p9a2-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9A02Page .p9a2-deal p { margin: 0; font-size: 13.5px; color: var(--p9a2-sub); }
#p9A02Page .p9a2-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9a2-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9A02Page .p9a2-plan { border: 1px solid var(--p9a2-line); border-radius: 14px; overflow: hidden; }
#p9A02Page .p9a2-plan img { width: 100%; display: block; }
#p9A02Page .p9a2-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9A02Page .p9a2-photos .cell:first-child { grid-column: 1 / -1; }
#p9A02Page .p9a2-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9A02Page .p9a2-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9a2Modal {
--p9a2-ink: #222222;
--p9a2-sub: #717171;
--p9a2-line: #ebebeb;
--p9a2-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a2-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9a2Modal * { box-sizing: border-box; }
#p9a2Modal svg { display: block; flex: none; }
#p9a2Modal.on { display: flex; }
#p9a2Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9a2Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9a2Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9a2-line); flex: none;
}
#p9a2Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9a2Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9a2-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9a2Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9a2-ink); line-height: 0;
}
#p9a2Modal .mclose:hover { background: var(--p9a2-bg-soft); }
#p9a2Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9a2Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9a2Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9a2-sub);
}
#p9a2Modal.fallback .mfall { display: flex; }
#p9a2Modal.fallback iframe { visibility: hidden; }
#p9a2Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9a2-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9a2-ink); text-decoration: none;
}
#p9A02Page .p9a2-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9a2-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9A02Page .p9a2-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9A02Page { padding: 8px 16px 56px; }
#p9A02Page .p9a2-gallery { grid-template-rows: 112px 112px; }
#p9A02Page .p9a2-h1 { font-size: 22px; }
#p9A02Page .p9a2-amen { grid-template-columns: 1fr; }
#p9A02Page .p9a2-layout { grid-template-columns: 1fr; gap: 10px; }
#p9A02Page .p9a2-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9A02Page .p9a2-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9A02Page .p9a2-layout .cell .txt { flex: 1; min-width: 0; }
#p9A02Page .p9a2-cap { margin-top: 8px; }
#p9A02Page .p9a2-fac { grid-template-columns: 1fr; }
#p9a2Modal { padding: 0; }
#p9a2Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9A02Page .p9a2-photos img { height: 145px; }
#p9A02Page .p9a2-photos .cell:first-child img { height: 215px; }
#p9A02Page .p9a2-topbar { flex-wrap: wrap; }
#p9A02Page .p9a2-crumb { order: 2; width: 100%; }
#p9A02Page .p9a2-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9A02Page">
<div class="p9a2-topbar">
<div class="p9a2-crumb" data-t="crumb"></div>
<div class="p9a2-actions">
<div class="p9a2-lang" role="group" aria-label="Language">
<button type="button" data-p9a2-lang="ko" class="on">한국어</button>
<button type="button" data-p9a2-lang="en">EN</button>
<button type="button" data-p9a2-lang="zh">繁中</button>
<button type="button" data-p9a2-lang="cn">简中</button>
</div>
<button class="p9a2-share" type="button" data-p9a2-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9a2-gallery" id="p9a2Gallery"></div>
<h1 class="p9a2-h1">[A02] Calm Ocean</h1>
<p class="p9a2-stats" data-t="stats"></p>
<p class="p9a2-stats2" data-t="stats2"></p>
<hr class="p9a2-divider">
<div class="p9a2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9a2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9a2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="infoT"></h2>
<p class="p9a2-h2sub" data-t="infoS"></p>
<div class="p9a2-info">
<div class="p9a2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9a2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9a2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="layoutT"></h2>
<p class="p9a2-h2sub" data-t="layoutS"></p>
<div class="p9a2-layout" id="p9a2Layout"></div>
<div class="p9a2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="amenT"></h2>
<p class="p9a2-h2sub" data-t="amenS"></p>
<div class="p9a2-amen" id="p9a2Amen"></div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="addonT"></h2>
<p class="p9a2-h2sub" data-t="addonS"></p>
<div class="p9a2-fac" id="p9a2Fac"></div>
<div class="p9a2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9a2-divider">
<a class="p9a2-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="planT"></h2>
<p class="p9a2-h2sub" data-t="planS"></p>
<div class="p9a2-plan" id="p9a2Plan"></div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="photoT"></h2>
<p class="p9a2-h2sub" data-t="photoS"></p>
<div class="p9a2-photos" id="p9a2Photos"></div>
<hr class="p9a2-divider">
<h2 class="p9a2-h2" data-t="ryoT"></h2>
<p class="p9a2-h2sub" data-t="ryoS"></p>
<div class="p9a2-photos" id="p9a2Ryokan"></div>
<div class="p9a2-modal" id="p9a2Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9a2-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9a2ModalTitle"></div>
<a class="mnew" id="p9a2ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9a2-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9a2ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9a2ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9a2-toast" id="p9a2Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
IMG + 'attachment%3A388b4468-e6d3-4286-895f-2428a38cdfd1%3AA02_%EA%B1%B0%EC%8B%A4%EC%98%A4%EC%85%98%EB%B7%B0.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-804d-a67e-d9136bca9e01',
IMG + 'attachment%3A313094cc-87c8-4f22-853c-181a29989ecf%3AA02_%EC%8B%9D%ED%83%81.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-805e-b6fa-ebd2506cdd00',
IMG + 'attachment%3A36f6c57b-3625-4c65-b9ec-41340f51ebe2%3AA02_%EC%B9%A8%EC%8B%A4.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80eb-93c1-d38b854573c1'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'mattress'(엑스트라 매트리스·1인) */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'single', n: 3 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '슈퍼싱글 침대 3개', en: '3 super single beds', zh: '加大單人床 3張', cn: '加大单人床 3张' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } },
{ icon: [{ t: 'mattress', n: 8 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 8개', en: '8 floor mattresses', zh: '床墊 8組', cn: '床垫 8组' },
guest: { ko: '8명', en: '8 guests', zh: '8人', cn: '8人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq'(숯불그릴) | 'jacuzzi'(자쿠지) */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '숯불바베큐', en: 'Charcoal BBQ', zh: '炭火燒烤', cn: '炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '숯불 방식', en: 'Charcoal-fired', zh: '炭火直烤', cn: '炭火直烤' } },
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '한 팀만 단독으로 쓰는 온수 스파예요. 예약 필수.',
en: 'A hot-water spa reserved for one group at a time. Reservation required.',
zh: '一組客人專屬使用的溫水SPA,需預約。',
cn: '一组客人专属使用的温水SPA,需预约。' },
tag: { ko: '최대 6명', en: 'Fits up to 6', zh: '最多6人', cn: '最多6人' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV · 빔프로젝터', en: 'TV & projector', zh: '電視 · 投影機', cn: '电视 · 投影仪' },
{ ko: '쇼파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '대형식탁 (12인) · 의자', en: 'Large dining table (seats 12)', zh: '大型餐桌(12人) · 椅子', cn: '大型餐桌(12人) · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 평면도 */
var PLAN_IMG = IMG + 'attachment%3Ade433f1c-b5e8-41d5-831c-92d4dc249874%3AA02_%ED%8F%89%EB%A9%B4%EB%8F%84.jpg&blockId=2a5855f1-e498-8081-b02f-e65d11e9ec00';
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 오션뷰 (대표) */
GALLERY[1], /* 식탁 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'attachment%3A8da9f160-7a49-465e-876d-971e8205fe71%3AA02_%EA%B1%B0%EC%8B%A4.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80d1-bca7-cb2a5793568e',
IMG + 'attachment%3A2c455f93-ff4f-4359-bd68-94f6e6a7fed1%3AA02_%EC%B9%A8%EC%8B%A4_1_2.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8059-ba26-f381710f5e9e',
IMG + 'attachment%3Ac4982c42-d16b-40a7-a0c4-ec1c1c6f85ba%3AA02_%EC%B9%A8%EC%8B%A41.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8021-a60d-ce0dcf7fe2a7',
IMG + 'attachment%3Adb36eb7f-b1ef-4a46-93a4-3b7d7b5090bc%3AA02%EC%A3%BC%EB%B0%A9%EC%82%AC%EC%A7%84.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8050-8365-fb314d8bc766',
IMG + 'attachment%3Addcd26de-dc66-48c5-b772-953f14b83269%3AKakaoTalk_20251108_213103454.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8081-80ee-c670d1457231',
IMG + 'attachment%3A792af3df-ecd5-4fd5-9b26-969403836f2d%3AKakaoTalk_20251108_220550361.png&blockId=2a8855f1-e498-8049-bd4d-c479cddf9499',
IMG + 'attachment%3A709ff439-928a-4ca7-b29f-31b5ef2fd228%3AKakaoTalk_20251108_222023743.png&blockId=2a8855f1-e498-80a4-975c-c46247f0bc3b',
IMG + 'attachment%3A8901dc4a-39ee-496d-97c0-b4546410d61a%3AKakaoTalk_20251108_223435984.png&blockId=2a8855f1-e498-80aa-ac28-e02f2bfcd74b',
IMG + 'attachment%3Af0d8f4ff-18f6-4f4c-918b-3f5fd30877e7%3AKakaoTalk_20251108_231229576.jpg&blockId=2a8855f1-e498-803a-ac57-ebd872b055d7',
IMG + 'attachment%3A88514ff1-7548-4c05-870f-65e7064fa4e7%3A%EB%B0%94%EB%B2%A0%ED%81%90_%EC%9D%B4%EC%9A%A9%EC%83%B7%28%EB%82%AE%29.png&blockId=2a8855f1-e498-8041-bd9f-ddcd3a97d523',
IMG + 'attachment%3A600cf8a8-6721-4516-9b2d-0a0724194895%3A%ED%99%94%EC%9E%A5%EC%8B%A4_%EB%B3%B4%EC%A0%95_%ED%9B%84.png%EC%9D%98_%EC%82%AC%EB%B3%B8%281%29.png&blockId=2a8855f1-e498-80e9-b7f5-cc028961e691',
IMG + 'attachment%3Ae081ee2d-77f9-4ff3-8d8e-50d86bc9b0ee%3A%ED%99%94%EC%9E%A5%EC%8B%A4_%EB%B3%B4%EC%A0%95_%ED%9B%84.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80e3-adbd-d91712ec995b',
IMG + 'attachment%3A3414b582-b5d2-498b-9f9d-a67559ab517d%3AA02_%EA%B1%B0%EC%8B%A4_3.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80bc-890b-f5881a105223'
];
/* 프라이빗 료칸 사진 (첫 장 가로 전체 + 2열) */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/a02';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[A02] Calm Ocean</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[A02] Calm Ocean</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[A02] Calm Ocean</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[A02] Calm Ocean</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 2개 · 침대 5개 · 매트리스 8개 · 화장실 2개 · 50평대',
en: '2 bedrooms · 5 beds · 8 mattresses · 2 bathrooms · approx. 165㎡',
zh: '2房 · 5床 · 床墊8組 · 2衛浴 · 約165㎡',
cn: '2房 · 5床 · 床垫8组 · 2卫浴 · 约165㎡' });
I18N.set('feat1t', { ko: '거실에서 바로 오션뷰', en: 'Ocean view from the living room', zh: '客廳即享海景', cn: '客厅即享海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Calm Ocean — 거실 창 너머로 잔잔한 송정 바다가 펼쳐져요.',
en: 'True to its name — the calm Songjeong sea stretches out beyond the living-room windows.',
zh: '如其名 Calm Ocean——客廳窗外就是寧靜的松亭海。',
cn: '如其名 Calm Ocean——客厅窗外就是宁静的松亭海。' });
I18N.set('feat2t', { ko: '독립 공간 숯불바베큐', en: 'Private charcoal BBQ area', zh: '獨立空間炭火燒烤', cn: '独立空间炭火烧烤' });
I18N.set('feat2d', {
ko: '우리 팀만 쓰는 독립된 공간에서 국산 참숯 바베큐를 즐길 수 있어요. (추가 서비스)',
en: 'Enjoy real charcoal BBQ in a space reserved just for your group. (Add-on)',
zh: '在專屬空間享受韓國木炭燒烤。(加購服務)',
cn: '在专属空间享受韩国木炭烧烤。(加购服务)' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan bath)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' });
I18N.set('feat3d', {
ko: '일상의 소음이 닿지 않는 프라이빗 온수 스파를 예약제로 이용할 수 있어요. (추가 서비스)',
en: 'A private hot-water spa, available by reservation. (Add-on)',
zh: '可預約使用私密溫水SPA。(加購服務)',
cn: '可预约使用私密温水SPA。(加购服务)' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '50평대 · 방 2 · 화장실 2 · 거실 · 주방 · 테라스', en: '~165㎡ · 2BR · 2BA · living room · kitchen · terrace', zh: '約165㎡ · 2房 · 2衛浴 · 客廳 · 廚房 · 露台', cn: '约165㎡ · 2房 · 2卫浴 · 客厅 · 厨房 · 露台' });
I18N.set('info3d', {
ko: '탁 트인 거실과 12인 대형 식탁이 있는 넓은 구조예요.',
en: 'An open layout with a spacious living room and a large table for 12.',
zh: '開闊格局,附12人大餐桌的寬敞客廳。',
cn: '开阔格局,附12人大餐桌的宽敞客厅。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '퀸 침대는 2명, 슈퍼싱글 침대와 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two; each super single and floor mattress sleeps one.',
zh: 'Queen床可睡2人,加大單人床與加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,加大单人床与加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 2개 · 슈퍼싱글 3개 · 매트리스 8개 = 최대 15명 (기준 6명)',
en: '2 queens · 3 super singles · 8 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床2張 · 加大單人床3張 · 床墊8組 = 最多15人(基準6人)',
cn: 'Queen床2张 · 加大单人床3张 · 床垫8组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐와 료칸은 예약 시 함께 신청해주세요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'Please request the BBQ and ryokan bath when booking. Laundry can be requested anytime during your stay.',
zh: '燒烤與湯屋請於預約時一併申請,洗衣服務住宿期間隨時可申請。',
cn: '烧烤与汤屋请于预约时一并申请,洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('planT', { ko: '평면도', en: 'Floor plan', zh: '平面圖', cn: '平面图' });
I18N.set('planS', {
ko: '한눈에 보는 A02의 구조.',
en: 'The layout of A02 at a glance.',
zh: '一眼看懂 A02 的格局。',
cn: '一眼看懂 A02 的格局。' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '거실, 침실, 주방, 그리고 바베큐 공간까지.',
en: 'Living room, bedrooms, kitchen, and the BBQ area.',
zh: '客廳、臥室、廚房,以及燒烤空間。',
cn: '客厅、卧室、厨房,以及烧烤空间。' });
I18N.set('ryoT', { ko: '프라이빗 료칸', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파.',
en: 'A private hot-water spa in the annex.',
zh: '設於別館的私密溫水SPA。',
cn: '设于别馆的私密温水SPA。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 A02 Calm Ocean', en: 'Penton Nine A02 Calm Ocean', zh: 'Penton Nine A02 Calm Ocean', cn: 'Penton Nine A02 Calm Ocean' });
I18N.set('shareTitle', { ko: '펜톤나인 [A02] Calm Ocean', en: 'Penton Nine [A02] Calm Ocean', zh: 'Penton Nine [A02] Calm Ocean', cn: 'Penton Nine [A02] Calm Ocean' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9A02Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9a2Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9a2-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9a2-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildSingles();
buildPhotoGrid('p9a2Photos', PHOTOS);
buildPhotoGrid('p9a2Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9a2-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9a2Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9a2-main' : '';
html += imgOrPh(GALLERY[i], 'p9a2-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9a2Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9a2-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9a2Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9a2-cap">' + (f.icon === 'jacuzzi' ? ICON_PERSON : '') + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9a2Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildSingles() {
var p = document.getElementById('p9a2Plan');
if (p) p.innerHTML = imgOrPh(PLAN_IMG);
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9a2Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9A02Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9a2Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9a2-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9a2-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9a2-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9a2-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9a2Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9a2-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9a2Modal');
var frame = document.getElementById('p9a2ModalFrame');
if (!m || !frame) return;
document.getElementById('p9a2ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9a2ModalNew');
var fallLink = document.getElementById('p9a2ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9a2Modal');
var frame = document.getElementById('p9a2ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[A02] Calm Ocean
기본 6명 / 최대 15명
방 2개
침대 5개
화장실 2개
오션뷰
숯불바베큐
자쿠지
<!-- 펜톤나인 [A03] Ocean Modern 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9A03Page {
--p9a3-ink: #222222;
--p9a3-sub: #717171;
--p9a3-line: #ebebeb;
--p9a3-accent: #FF385C;
--p9a3-bg-soft: #f7f7f7;
}
#p9A03Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a3-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9A03Page * { box-sizing: border-box; }
#p9A03Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9A03Page .p9a3-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9a3-sub);
}
#p9A03Page .p9a3-crumb { min-width: 0; }
#p9A03Page .p9a3-crumb b { color: var(--p9a3-ink); font-weight: 600; }
#p9A03Page .p9a3-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9A03Page .p9a3-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9a3-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9A03Page .p9a3-share:hover { background: var(--p9a3-bg-soft); }
#p9A03Page .p9a3-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9a3-line); border-radius: 999px; padding: 3px;
}
#p9A03Page .p9a3-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9a3-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9A03Page .p9a3-lang button.on { background: var(--p9a3-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9A03Page .p9a3-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9A03Page .p9a3-gallery .p9a3-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9A03Page .p9a3-gallery .p9a3-main { grid-row: 1 / 3; }
#p9A03Page .p9a3-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9A03Page .p9a3-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9A03Page .p9a3-stats { font-size: 15px; color: var(--p9a3-ink); margin: 0 0 4px; font-weight: 500; }
#p9A03Page .p9a3-stats2 { font-size: 14px; color: var(--p9a3-sub); margin: 0; }
#p9A03Page .p9a3-divider { border: none; border-top: 1px solid var(--p9a3-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9A03Page .p9a3-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9A03Page .p9a3-feat + .p9a3-feat { border-top: 1px solid var(--p9a3-line); }
#p9A03Page .p9a3-feat svg { margin-top: 2px; }
#p9A03Page .p9a3-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9A03Page .p9a3-feat p { margin: 0; font-size: 14px; color: var(--p9a3-sub); }
/* ── 섹션 제목 ── */
#p9A03Page .p9a3-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9A03Page .p9a3-h2sub { font-size: 14px; color: var(--p9a3-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9A03Page .p9a3-info { border: 1px solid var(--p9a3-line); border-radius: 14px; padding: 24px; }
#p9A03Page .p9a3-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9A03Page .p9a3-infoitem + .p9a3-infoitem { border-top: 1px solid var(--p9a3-line); }
#p9A03Page .p9a3-infoitem svg { margin-top: 2px; }
#p9A03Page .p9a3-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9A03Page .p9a3-infoitem span { font-size: 13px; color: var(--p9a3-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9A03Page .p9a3-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9A03Page .p9a3-layout .cell {
border: 1px solid var(--p9a3-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9A03Page .p9a3-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9A03Page .p9a3-layout .cell svg { margin-bottom: 0; }
#p9A03Page .p9a3-layout .cell .txt { width: 100%; }
#p9A03Page .p9a3-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9a3-sub); align-self: center; margin-left: 1px; }
#p9A03Page .p9a3-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9A03Page .p9a3-layout .beds { font-size: 13.5px; color: var(--p9a3-sub); }
#p9A03Page .p9a3-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9a3-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9A03Page .p9a3-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9a3-sub);
}
/* ── 편의시설 ── */
#p9A03Page .p9a3-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9A03Page .p9a3-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9a3-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9A03Page .p9a3-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9A03Page .p9a3-fac .cell {
border: 1px solid var(--p9a3-line); border-radius: 14px; padding: 22px 20px;
}
#p9A03Page .p9a3-fac .cell svg { margin-bottom: 14px; }
#p9A03Page .p9a3-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9A03Page .p9a3-fac .fdesc { font-size: 13.5px; color: var(--p9a3-sub); }
#p9A03Page .p9a3-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9a3-line);
}
#p9A03Page .p9a3-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9A03Page .p9a3-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9A03Page .p9a3-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9A03Page .p9a3-fac a.cell:hover { background: var(--p9a3-bg-soft); }
#p9A03Page .p9a3-fac b { display: flex; align-items: center; gap: 6px; }
#p9A03Page .p9a3-fac .farrow { transition: transform .15s; }
#p9A03Page .p9a3-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9A03Page .p9a3-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9A03Page .p9a3-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9a3-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9A03Page .p9a3-deal:hover { background: var(--p9a3-bg-soft); }
#p9A03Page .p9a3-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9a3-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9A03Page .p9a3-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9A03Page .p9a3-deal p { margin: 0; font-size: 13.5px; color: var(--p9a3-sub); }
#p9A03Page .p9a3-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9a3-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9A03Page .p9a3-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9A03Page .p9a3-photos .cell:first-child { grid-column: 1 / -1; }
#p9A03Page .p9a3-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9A03Page .p9a3-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9a3Modal {
--p9a3-ink: #222222;
--p9a3-sub: #717171;
--p9a3-line: #ebebeb;
--p9a3-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a3-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9a3Modal * { box-sizing: border-box; }
#p9a3Modal svg { display: block; flex: none; }
#p9a3Modal.on { display: flex; }
#p9a3Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9a3Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9a3Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9a3-line); flex: none;
}
#p9a3Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9a3Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9a3-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9a3Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9a3-ink); line-height: 0;
}
#p9a3Modal .mclose:hover { background: var(--p9a3-bg-soft); }
#p9a3Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9a3Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9a3Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9a3-sub);
}
#p9a3Modal.fallback .mfall { display: flex; }
#p9a3Modal.fallback iframe { visibility: hidden; }
#p9a3Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9a3-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9a3-ink); text-decoration: none;
}
#p9A03Page .p9a3-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9a3-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9A03Page .p9a3-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9A03Page { padding: 8px 16px 56px; }
#p9A03Page .p9a3-gallery { grid-template-rows: 112px 112px; }
#p9A03Page .p9a3-h1 { font-size: 22px; }
#p9A03Page .p9a3-amen { grid-template-columns: 1fr; }
#p9A03Page .p9a3-layout { grid-template-columns: 1fr; gap: 10px; }
#p9A03Page .p9a3-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9A03Page .p9a3-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9A03Page .p9a3-layout .cell .txt { flex: 1; min-width: 0; }
#p9A03Page .p9a3-cap { margin-top: 8px; }
#p9A03Page .p9a3-fac { grid-template-columns: 1fr; }
#p9a3Modal { padding: 0; }
#p9a3Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9A03Page .p9a3-photos img { height: 145px; }
#p9A03Page .p9a3-photos .cell:first-child img { height: 215px; }
#p9A03Page .p9a3-topbar { flex-wrap: wrap; }
#p9A03Page .p9a3-crumb { order: 2; width: 100%; }
#p9A03Page .p9a3-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9A03Page">
<div class="p9a3-topbar">
<div class="p9a3-crumb" data-t="crumb"></div>
<div class="p9a3-actions">
<div class="p9a3-lang" role="group" aria-label="Language">
<button type="button" data-p9a3-lang="ko" class="on">한국어</button>
<button type="button" data-p9a3-lang="en">EN</button>
<button type="button" data-p9a3-lang="zh">繁中</button>
<button type="button" data-p9a3-lang="cn">简中</button>
</div>
<button class="p9a3-share" type="button" data-p9a3-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9a3-gallery" id="p9a3Gallery"></div>
<h1 class="p9a3-h1">[A03] Ocean Modern</h1>
<p class="p9a3-stats" data-t="stats"></p>
<p class="p9a3-stats2" data-t="stats2"></p>
<hr class="p9a3-divider">
<div class="p9a3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9a3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9a3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="infoT"></h2>
<p class="p9a3-h2sub" data-t="infoS"></p>
<div class="p9a3-info">
<div class="p9a3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9a3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9a3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="layoutT"></h2>
<p class="p9a3-h2sub" data-t="layoutS"></p>
<div class="p9a3-layout" id="p9a3Layout"></div>
<div class="p9a3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="amenT"></h2>
<p class="p9a3-h2sub" data-t="amenS"></p>
<div class="p9a3-amen" id="p9a3Amen"></div>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="addonT"></h2>
<p class="p9a3-h2sub" data-t="addonS"></p>
<div class="p9a3-fac" id="p9a3Fac"></div>
<div class="p9a3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9a3-divider">
<a class="p9a3-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="photoT"></h2>
<p class="p9a3-h2sub" data-t="photoS"></p>
<div class="p9a3-photos" id="p9a3Photos"></div>
<hr class="p9a3-divider">
<h2 class="p9a3-h2" data-t="ryoT"></h2>
<p class="p9a3-h2sub" data-t="ryoS"></p>
<div class="p9a3-photos" id="p9a3Ryokan"></div>
<div class="p9a3-modal" id="p9a3Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9a3-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9a3ModalTitle"></div>
<a class="mnew" id="p9a3ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9a3-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9a3ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9a3ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9a3-toast" id="p9a3Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 거실 (대표컷) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5a8f39ba-0507-499c-86d1-8206b7e2030b%2Fa3_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-8069-91e6-c98ebd0d0dcb',
/* 오른쪽 위 — 테라스 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2772ea06-3886-4282-ab8f-f7f8c8bbfb35%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A4.webp&blockId=12f855f1-e498-8006-8800-ecc4dc777d48',
/* 오른쪽 아래 — 침실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa8e9c598-2c59-4387-abe8-bb09e8773b44%2Fa3_%25EC%25B9%25A8%25EC%258B%25A41.webp&blockId=12f855f1-e498-807e-82fb-c3b7fc4d28aa'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'mattress'(엑스트라 매트리스·1인) */
var LAYOUT = [
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: 'queen',
cap: { ko: '침실 4', en: 'Bedroom 4', zh: '臥室 4', cn: '卧室 4' },
beds: { ko: '퀸 침대 1개', en: '1 queen bed', zh: 'Queen床 1張', cn: 'Queen床 1张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'mattress', n: 7 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 7개', en: '7 floor mattresses', zh: '床墊 7組', cn: '床垫 7组' },
guest: { ko: '7명', en: '7 guests', zh: '7人', cn: '7人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq'(숯불그릴) | 'jacuzzi'(자쿠지) */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '숯불바베큐', en: 'Charcoal BBQ', zh: '炭火燒烤', cn: '炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '숯불 방식', en: 'Charcoal-fired', zh: '炭火直烤', cn: '炭火直烤' } },
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '한 팀만 단독으로 쓰는 온수 스파예요. 예약 필수.',
en: 'A hot-water spa reserved for one group at a time. Reservation required.',
zh: '一組客人專屬使用的溫水SPA,需預約。',
cn: '一组客人专属使用的温水SPA,需预约。' },
tag: { ko: '최대 6명', en: 'Fits up to 6', zh: '最多6人', cn: '最多6人' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV · 빔프로젝터', en: 'TV & projector', zh: '電視 · 投影機', cn: '电视 · 投影仪' },
{ ko: '쇼파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 (대표) */
GALLERY[1], /* 테라스 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb8336569-0f02-4eac-bfc2-e724c529e34c%2Fa3_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-80f7-b8a7-dc6d73bc6246',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Feb40eafd-799d-4683-ad33-7b15bb87c025%2Fa3_%25EA%25B1%25B0%25EC%258B%25A44.webp&blockId=12f855f1-e498-80c0-b04b-f701c94e024d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F31a1fa40-6ae1-499c-8985-e57b9ac783a2%2Fa3_%25EA%25B1%25B0%25EC%258B%25A42.webp&blockId=12f855f1-e498-80ea-a866-c41ebc7cfa4d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F752ef6c3-6e29-4bfa-99d6-061e657b958e%2Fa3_%25EA%25B1%25B0%25EC%258B%25A43.webp&blockId=12f855f1-e498-809a-b163-c9a690b77b84',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc736541b-9819-45d9-b8cc-fbb4c99b585c%2Fa3_%25EC%258B%259D%25EC%2582%25AC3.webp&blockId=12f855f1-e498-804e-a1e1-e7f4ac5dab25',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe5ac4081-2931-4fab-9111-ee71035435d9%2Fa3_%25EC%258B%259D%25EC%2582%25AC4.webp&blockId=12f855f1-e498-80cf-8454-fcd2bb0ae044',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F53993eb4-bc4c-40a4-9a01-38899fb585e8%2Fa3_%25EC%259A%2595%25EC%258B%25A41.webp&blockId=12f855f1-e498-809b-ae0b-fea622b18f81',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F79969455-352a-4361-8674-606c3180c914%2Fa3_%25EC%259A%2595%25EC%258B%25A42.webp&blockId=12f855f1-e498-80e7-817d-d3190c979836',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F17213a74-f083-4cb6-9436-2c2222819e94%2Fa3_%25EC%25A3%25BC%25EB%25B0%25A91.webp&blockId=12f855f1-e498-8074-b5cb-f2a53fde3bc1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0900c0b4-1b91-414b-86eb-f7c2e03de68b%2Fa3_%25EC%25A3%25BC%25EB%25B0%25A92.webp&blockId=12f855f1-e498-80fa-ab69-cb862aba60a5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F71f7113a-a388-489a-8165-026b59214614%2Fa3_%25EC%25A3%25BC%25EB%25B0%25A93.webp&blockId=12f855f1-e498-8013-841c-d97b06433b80',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3b45e3a4-3911-44a3-bda0-f8216e64468b%2Fa3_%25EC%25B9%25A8%25EC%258B%25A42.webp&blockId=12f855f1-e498-8066-8874-ca1af56f9509',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fec4556d2-035c-4c3b-a7af-b2939aead3db%2Fa3_%25EC%25B9%25A8%25EC%258B%25A43.webp&blockId=12f855f1-e498-8067-9a38-ff1e05f04865',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa9ae74ea-ea71-4f19-a93b-7f010a046da0%2Fa3_%25EC%25B9%25A8%25EC%258B%25A44.webp&blockId=12f855f1-e498-80df-938b-c53747069fd0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F081a7e2b-e1a4-4b80-81c5-72f906027889%2Fa3_%25EC%25B9%25A8%25EC%258B%25A45.webp&blockId=12f855f1-e498-8015-a522-d6c778152f19',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb4af9fb9-26d0-49e3-b605-d455928be2d3%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A41.webp&blockId=12f855f1-e498-805a-ae55-dd20a2104b40',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Febe9135e-93ea-4ed8-ac5b-2cff5a90d15b%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A42.webp&blockId=12f855f1-e498-80f7-80b7-ca73e06e51dc',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F91bf810c-1203-4fe3-947b-f9ca2c42a529%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A43.webp&blockId=12f855f1-e498-80f5-b782-ef45b82a9bb6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff2c744a4-bb01-404d-bc8e-f448ed5c43e2%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A44.webp&blockId=12f855f1-e498-80b1-9d31-ca6c14126ae9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8bd01cd4-bc53-4cd2-ad91-731e331db17f%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A45.webp&blockId=12f855f1-e498-8022-9313-c50fe79aac97',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9781c057-5d3d-458a-a7d1-26f067d0f601%2Fa3_%25EA%25B4%2591%25EA%25B3%25A04.webp&blockId=12f855f1-e498-80a7-afe0-c4d98b470832',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd00dc0eb-39b9-4d68-ad7b-0ee30563a16f%2Fa3_%25EA%25B4%2591%25EA%25B3%25A03.webp&blockId=12f855f1-e498-8044-b349-e7a642c1baf6'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 A02와 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/a03';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[A03] Ocean Modern</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[A03] Ocean Modern</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[A03] Ocean Modern</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[A03] Ocean Modern</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 4개 · 침대 7개 · 매트리스 7개 · 화장실 2개 · 50평대',
en: '4 bedrooms · 7 beds · 7 mattresses · 2 bathrooms · approx. 165㎡',
zh: '4房 · 7床 · 床墊7組 · 2衛浴 · 約165㎡',
cn: '4房 · 7床 · 床垫7组 · 2卫浴 · 约165㎡' });
I18N.set('feat1t', { ko: '거실·테라스에서 즐기는 오션뷰', en: 'Ocean view from the living room & terrace', zh: '客廳與露台皆享海景', cn: '客厅与露台皆享海景' });
I18N.set('feat1d', {
ko: '모던한 인테리어의 Ocean Modern — 거실과 테라스 어디서든 송정 바다가 보여요.',
en: 'Ocean Modern, true to its name — the Songjeong sea is in view from both the living room and the terrace.',
zh: '如其名 Ocean Modern——現代簡約風格,客廳與露台都能看見松亭海。',
cn: '如其名 Ocean Modern——现代简约风格,客厅与露台都能看见松亭海。' });
I18N.set('feat2t', { ko: '독립 공간 숯불바베큐', en: 'Private charcoal BBQ area', zh: '獨立空間炭火燒烤', cn: '独立空间炭火烧烤' });
I18N.set('feat2d', {
ko: '우리 팀만 쓰는 독립된 공간에서 국산 참숯 바베큐를 즐길 수 있어요. (추가 서비스)',
en: 'Enjoy real charcoal BBQ in a space reserved just for your group. (Add-on)',
zh: '在專屬空間享受韓國木炭燒烤。(加購服務)',
cn: '在专属空间享受韩国木炭烧烤。(加购服务)' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan bath)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' });
I18N.set('feat3d', {
ko: '일상의 소음이 닿지 않는 프라이빗 온수 스파를 예약제로 이용할 수 있어요. (추가 서비스)',
en: 'A private hot-water spa, available by reservation. (Add-on)',
zh: '可預約使用私密溫水SPA。(加購服務)',
cn: '可预约使用私密温水SPA。(加购服务)' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '50평대 · 방 4 · 화장실 2 · 거실 · 주방 · 테라스', en: '~165㎡ · 4BR · 2BA · living room · kitchen · terrace', zh: '約165㎡ · 4房 · 2衛浴 · 客廳 · 廚房 · 露台', cn: '约165㎡ · 4房 · 2卫浴 · 客厅 · 厨房 · 露台' });
I18N.set('info3d', {
ko: '방 4개가 나뉘어 있어 단체도 여유롭게 나눠 쓸 수 있어요.',
en: 'Four separate bedrooms give a large group room to spread out.',
zh: '共4間臥室,團體出遊也能分開使用、更寬裕。',
cn: '共4间卧室,团体出游也能分开使用、更宽裕。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '방 4개에 침대 7개. 퀸은 2명, 슈퍼싱글과 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two; each super single and floor mattress sleeps one.',
zh: 'Queen床可睡2人,加大單人床與加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,加大单人床与加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 1개 · 슈퍼싱글 6개 · 매트리스 7개 = 최대 15명 (기준 6명)',
en: '1 queen · 6 super singles · 7 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床1張 · 加大單人床6張 · 床墊7組 = 最多15人(基準6人)',
cn: 'Queen床1张 · 加大单人床6张 · 床垫7组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐와 료칸은 예약 시 함께 신청해주세요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'Please request the BBQ and ryokan bath when booking. Laundry can be requested anytime during your stay.',
zh: '燒烤與湯屋請於預約時一併申請,洗衣服務住宿期間隨時可申請。',
cn: '烧烤与汤屋请于预约时一并申请,洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '거실, 침실, 주방, 욕실, 그리고 테라스까지.',
en: 'Living room, bedrooms, kitchen, bathrooms, and the terrace.',
zh: '客廳、臥室、廚房、衛浴,以及露台。',
cn: '客厅、卧室、厨房、卫浴,以及露台。' });
I18N.set('ryoT', { ko: '프라이빗 료칸', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 A03 Ocean Modern', en: 'Penton Nine A03 Ocean Modern', zh: 'Penton Nine A03 Ocean Modern', cn: 'Penton Nine A03 Ocean Modern' });
I18N.set('shareTitle', { ko: '펜톤나인 [A03] Ocean Modern', en: 'Penton Nine [A03] Ocean Modern', zh: 'Penton Nine [A03] Ocean Modern', cn: 'Penton Nine [A03] Ocean Modern' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9A03Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9a3Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9a3-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9a3-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9a3Photos', PHOTOS);
buildPhotoGrid('p9a3Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9a3-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9a3Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9a3-main' : '';
html += imgOrPh(GALLERY[i], 'p9a3-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9a3Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9a3-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9a3Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9a3-cap">' + (f.icon === 'jacuzzi' ? ICON_PERSON : '') + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9a3Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9a3Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9A03Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9a3Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9a3-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9a3-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9a3-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9a3-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9a3Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9a3-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9a3Modal');
var frame = document.getElementById('p9a3ModalFrame');
if (!m || !frame) return;
document.getElementById('p9a3ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9a3ModalNew');
var fallLink = document.getElementById('p9a3ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9a3Modal');
var frame = document.getElementById('p9a3ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[A03] Ocean Modern
기본 6명 / 최대 15명
방 4개
침대 7개
화장실 2개
오션뷰
숯불바베큐
자쿠지
<!-- 펜톤나인 [A04] Ocean Panorama 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9A04Page {
--p9a4-ink: #222222;
--p9a4-sub: #717171;
--p9a4-line: #ebebeb;
--p9a4-accent: #FF385C;
--p9a4-bg-soft: #f7f7f7;
}
#p9A04Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a4-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9A04Page * { box-sizing: border-box; }
#p9A04Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9A04Page .p9a4-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9a4-sub);
}
#p9A04Page .p9a4-crumb { min-width: 0; }
#p9A04Page .p9a4-crumb b { color: var(--p9a4-ink); font-weight: 600; }
#p9A04Page .p9a4-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9A04Page .p9a4-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9a4-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9A04Page .p9a4-share:hover { background: var(--p9a4-bg-soft); }
#p9A04Page .p9a4-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9a4-line); border-radius: 999px; padding: 3px;
}
#p9A04Page .p9a4-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9a4-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9A04Page .p9a4-lang button.on { background: var(--p9a4-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9A04Page .p9a4-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9A04Page .p9a4-gallery .p9a4-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9A04Page .p9a4-gallery .p9a4-main { grid-row: 1 / 3; }
#p9A04Page .p9a4-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9A04Page .p9a4-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9A04Page .p9a4-stats { font-size: 15px; color: var(--p9a4-ink); margin: 0 0 4px; font-weight: 500; }
#p9A04Page .p9a4-stats2 { font-size: 14px; color: var(--p9a4-sub); margin: 0; }
#p9A04Page .p9a4-divider { border: none; border-top: 1px solid var(--p9a4-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9A04Page .p9a4-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9A04Page .p9a4-feat + .p9a4-feat { border-top: 1px solid var(--p9a4-line); }
#p9A04Page .p9a4-feat svg { margin-top: 2px; }
#p9A04Page .p9a4-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9A04Page .p9a4-feat p { margin: 0; font-size: 14px; color: var(--p9a4-sub); }
/* ── 섹션 제목 ── */
#p9A04Page .p9a4-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9A04Page .p9a4-h2sub { font-size: 14px; color: var(--p9a4-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9A04Page .p9a4-info { border: 1px solid var(--p9a4-line); border-radius: 14px; padding: 24px; }
#p9A04Page .p9a4-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9A04Page .p9a4-infoitem + .p9a4-infoitem { border-top: 1px solid var(--p9a4-line); }
#p9A04Page .p9a4-infoitem svg { margin-top: 2px; }
#p9A04Page .p9a4-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9A04Page .p9a4-infoitem span { font-size: 13px; color: var(--p9a4-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9A04Page .p9a4-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9A04Page .p9a4-layout .cell {
border: 1px solid var(--p9a4-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9A04Page .p9a4-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9A04Page .p9a4-layout .cell svg { margin-bottom: 0; }
#p9A04Page .p9a4-layout .cell .txt { width: 100%; }
#p9A04Page .p9a4-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9a4-sub); align-self: center; margin-left: 1px; }
#p9A04Page .p9a4-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9A04Page .p9a4-layout .beds { font-size: 13.5px; color: var(--p9a4-sub); }
#p9A04Page .p9a4-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9a4-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9A04Page .p9a4-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9a4-sub);
}
/* ── 편의시설 ── */
#p9A04Page .p9a4-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9A04Page .p9a4-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9a4-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9A04Page .p9a4-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9A04Page .p9a4-fac .cell {
border: 1px solid var(--p9a4-line); border-radius: 14px; padding: 22px 20px;
}
#p9A04Page .p9a4-fac .cell svg { margin-bottom: 14px; }
#p9A04Page .p9a4-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9A04Page .p9a4-fac .fdesc { font-size: 13.5px; color: var(--p9a4-sub); }
#p9A04Page .p9a4-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9a4-line);
}
#p9A04Page .p9a4-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9A04Page .p9a4-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9A04Page .p9a4-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9A04Page .p9a4-fac a.cell:hover { background: var(--p9a4-bg-soft); }
#p9A04Page .p9a4-fac b { display: flex; align-items: center; gap: 6px; }
#p9A04Page .p9a4-fac .farrow { transition: transform .15s; }
#p9A04Page .p9a4-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9A04Page .p9a4-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9A04Page .p9a4-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9a4-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9A04Page .p9a4-deal:hover { background: var(--p9a4-bg-soft); }
#p9A04Page .p9a4-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9a4-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9A04Page .p9a4-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9A04Page .p9a4-deal p { margin: 0; font-size: 13.5px; color: var(--p9a4-sub); }
#p9A04Page .p9a4-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9a4-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9A04Page .p9a4-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9A04Page .p9a4-photos .cell:first-child { grid-column: 1 / -1; }
#p9A04Page .p9a4-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9A04Page .p9a4-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9a4Modal {
--p9a4-ink: #222222;
--p9a4-sub: #717171;
--p9a4-line: #ebebeb;
--p9a4-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9a4-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9a4Modal * { box-sizing: border-box; }
#p9a4Modal svg { display: block; flex: none; }
#p9a4Modal.on { display: flex; }
#p9a4Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9a4Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9a4Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9a4-line); flex: none;
}
#p9a4Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9a4Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9a4-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9a4Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9a4-ink); line-height: 0;
}
#p9a4Modal .mclose:hover { background: var(--p9a4-bg-soft); }
#p9a4Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9a4Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9a4Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9a4-sub);
}
#p9a4Modal.fallback .mfall { display: flex; }
#p9a4Modal.fallback iframe { visibility: hidden; }
#p9a4Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9a4-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9a4-ink); text-decoration: none;
}
#p9A04Page .p9a4-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9a4-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9A04Page .p9a4-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9A04Page { padding: 8px 16px 56px; }
#p9A04Page .p9a4-gallery { grid-template-rows: 112px 112px; }
#p9A04Page .p9a4-h1 { font-size: 22px; }
#p9A04Page .p9a4-amen { grid-template-columns: 1fr; }
#p9A04Page .p9a4-layout { grid-template-columns: 1fr; gap: 10px; }
#p9A04Page .p9a4-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9A04Page .p9a4-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9A04Page .p9a4-layout .cell .txt { flex: 1; min-width: 0; }
#p9A04Page .p9a4-cap { margin-top: 8px; }
#p9A04Page .p9a4-fac { grid-template-columns: 1fr; }
#p9a4Modal { padding: 0; }
#p9a4Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9A04Page .p9a4-photos img { height: 145px; }
#p9A04Page .p9a4-photos .cell:first-child img { height: 215px; }
#p9A04Page .p9a4-topbar { flex-wrap: wrap; }
#p9A04Page .p9a4-crumb { order: 2; width: 100%; }
#p9A04Page .p9a4-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9A04Page">
<div class="p9a4-topbar">
<div class="p9a4-crumb" data-t="crumb"></div>
<div class="p9a4-actions">
<div class="p9a4-lang" role="group" aria-label="Language">
<button type="button" data-p9a4-lang="ko" class="on">한국어</button>
<button type="button" data-p9a4-lang="en">EN</button>
<button type="button" data-p9a4-lang="zh">繁中</button>
<button type="button" data-p9a4-lang="cn">简中</button>
</div>
<button class="p9a4-share" type="button" data-p9a4-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9a4-gallery" id="p9a4Gallery"></div>
<h1 class="p9a4-h1">[A04] Ocean Panorama</h1>
<p class="p9a4-stats" data-t="stats"></p>
<p class="p9a4-stats2" data-t="stats2"></p>
<hr class="p9a4-divider">
<div class="p9a4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9a4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9a4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="infoT"></h2>
<p class="p9a4-h2sub" data-t="infoS"></p>
<div class="p9a4-info">
<div class="p9a4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9a4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9a4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="layoutT"></h2>
<p class="p9a4-h2sub" data-t="layoutS"></p>
<div class="p9a4-layout" id="p9a4Layout"></div>
<div class="p9a4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="amenT"></h2>
<p class="p9a4-h2sub" data-t="amenS"></p>
<div class="p9a4-amen" id="p9a4Amen"></div>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="addonT"></h2>
<p class="p9a4-h2sub" data-t="addonS"></p>
<div class="p9a4-fac" id="p9a4Fac"></div>
<div class="p9a4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9a4-divider">
<a class="p9a4-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="photoT"></h2>
<p class="p9a4-h2sub" data-t="photoS"></p>
<div class="p9a4-photos" id="p9a4Photos"></div>
<hr class="p9a4-divider">
<h2 class="p9a4-h2" data-t="ryoT"></h2>
<p class="p9a4-h2sub" data-t="ryoS"></p>
<div class="p9a4-photos" id="p9a4Ryokan"></div>
<div class="p9a4-modal" id="p9a4Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9a4-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9a4ModalTitle"></div>
<a class="mnew" id="p9a4ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9a4-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9a4ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9a4ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9a4-toast" id="p9a4Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 거실 (대표컷) */
IMG + 'attachment%3A4b86608f-ba4d-4f9b-be6c-4f6439a6d139%3AA04%EA%B1%B0%EC%8B%A4%EB%B3%B4%EC%A0%95_1.png&blockId=1c6855f1-e498-8079-931c-e372b7931acc',
/* 오른쪽 위 — 거실 */
IMG + 'attachment%3A832884c0-9493-4cb7-a339-7e836eafa0df%3A%EA%B1%B0%EC%8B%A4%EC%82%AC%EC%A7%84_4.jpg&blockId=1c6855f1-e498-807b-bb73-fc2b9c393753',
/* 오른쪽 아래 — 침실 */
IMG + 'attachment%3Aa4945568-ab58-4d20-b7be-7d731d48e5c5%3A%EC%B9%A8%EC%8B%A4%EC%82%AC%EC%A7%841.png&blockId=1c6855f1-e498-80f2-8d0c-e0d4bb842ae8'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'mattress'(엑스트라 매트리스·1인)
침대가 섞인 방은 배열로: icon: ['queen','single'] */
var LAYOUT = [
{ icon: ['queen','single'],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 1개 · 슈퍼싱글 침대 1개', en: '1 queen bed · 1 super single bed', zh: 'Queen床 1張 · 加大單人床 1張', cn: 'Queen床 1张 · 加大单人床 1张' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } },
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'mattress', n: 8 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 8개', en: '8 floor mattresses', zh: '床墊 8組', cn: '床垫 8组' },
guest: { ko: '8명', en: '8 guests', zh: '8人', cn: '8人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq'(숯불그릴) | 'jacuzzi'(자쿠지) */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '숯불바베큐', en: 'Charcoal BBQ', zh: '炭火燒烤', cn: '炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '숯불 방식', en: 'Charcoal-fired', zh: '炭火直烤', cn: '炭火直烤' } },
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '한 팀만 단독으로 쓰는 온수 스파예요. 예약 필수.',
en: 'A hot-water spa reserved for one group at a time. Reservation required.',
zh: '一組客人專屬使用的溫水SPA,需預約。',
cn: '一组客人专属使用的温水SPA,需预约。' },
tag: { ko: '최대 6명', en: 'Fits up to 6', zh: '最多6人', cn: '最多6人' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV · 빔프로젝터', en: 'TV & projector', zh: '電視 · 投影機', cn: '电视 · 投影仪' },
{ ko: '쇼파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 (대표) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'attachment%3Ae1d8bfaf-1217-4a80-847b-fe4914b7899a%3A%EA%B1%B0%EC%8B%A4%EC%82%AC%EC%A7%842.png&blockId=1c6855f1-e498-80a2-b70e-c2dcea5f3005',
IMG + 'attachment%3A38f67469-c40d-41a6-9d87-377695d6755c%3A%EA%B1%B0%EC%8B%A4%EC%82%AC%EC%A7%843.png&blockId=1c6855f1-e498-80e5-8442-c8a5bb059e93',
IMG + 'attachment%3Af6e9c8fe-4af1-4d4d-ace3-e71ec7a85461%3A%EA%B1%B0%EC%8B%A4%EC%82%AC%EC%A7%844.png&blockId=1c6855f1-e498-8099-9f11-ddd37e71170b',
IMG + 'attachment%3A35731495-afd0-4fef-b9c5-8d3f3eac3449%3A%EC%8B%9D%ED%83%81%EC%82%AC%EC%A7%84_2.jpg&blockId=1c6855f1-e498-8008-8097-c26ef73a3377',
IMG + 'attachment%3A9585dbcb-131b-48fe-a9c0-ccc7c7d56cb3%3A%EC%8B%9D%ED%83%81%EC%82%AC%EC%A7%841.png&blockId=1c6855f1-e498-8013-9f2c-d45b3f63a7ff',
IMG + 'attachment%3A3861f102-66ec-486f-837a-b3ef4511b401%3A%EC%B9%A8%EC%8B%A4%EC%82%AC%EC%A7%842.png&blockId=1c6855f1-e498-8051-8aea-e20e4b722483',
IMG + 'attachment%3Ae2e63c55-e6c7-4cb7-9b11-fa4751c3c5e1%3AKakaoTalk_20250330_112140972.jpg&blockId=1c6855f1-e498-80c4-9a85-d235378c3be9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd3ba0d3b-5e90-4c11-8948-476c4e31e702%2Fa4_%25EC%25B9%25A8%25EC%258B%25A42.webp&blockId=12f855f1-e498-8007-8d99-d3d30d1834c8',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe72542ad-dfae-4fbf-8556-b984d5bfe81e%2Fa4_%25EC%25B9%25A8%25EC%258B%25A41.webp&blockId=12f855f1-e498-804a-9846-e166d0df847e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F904becf7-a459-463a-819a-9ac37183d918%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A4.webp&blockId=12f855f1-e498-8040-8625-c162493f9ef6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa48e3518-a5d6-485d-86b5-b39de0891f20%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A41.webp&blockId=12f855f1-e498-8016-9466-cafabe4596db',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2b61877a-cc29-4fc9-8290-0fa4c2dbe261%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A42.webp&blockId=12f855f1-e498-80ce-a865-f77c6b7fb197',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0b58523f-e505-4864-8700-fee2f6109a85%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A43.webp&blockId=12f855f1-e498-80b3-8b80-efbe3b44ac36',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcff8426a-cc8c-48f0-b968-3e5acfbb1316%2Fa3_%25ED%2585%258C%25EB%259D%25BC%25EC%258A%25A45.webp&blockId=12f855f1-e498-80b8-a99a-c30d3f6215b9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F821c449e-b784-4925-8516-75b030922b10%2Fa3_%25EA%25B4%2591%25EA%25B3%25A04.webp&blockId=12f855f1-e498-80f2-81b4-dfbbbaf7e18f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F735102f8-629d-4e3c-be6d-895d9dbc52da%2Fa3_%25EA%25B4%2591%25EA%25B3%25A03.webp&blockId=12f855f1-e498-806c-9470-ea084191c0bf'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 A02와 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/a04';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[A04] Ocean Panorama</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[A04] Ocean Panorama</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[A04] Ocean Panorama</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[A04] Ocean Panorama</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 8개 · 화장실 2개 · 50평대',
en: '3 bedrooms · 6 beds · 8 mattresses · 2 bathrooms · approx. 165㎡',
zh: '3房 · 6床 · 床墊8組 · 2衛浴 · 約165㎡',
cn: '3房 · 6床 · 床垫8组 · 2卫浴 · 约165㎡' });
I18N.set('feat1t', { ko: '파노라마로 펼쳐지는 오션뷰', en: 'A panoramic ocean view', zh: '全景視野的無敵海景', cn: '全景视野的无敌海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Ocean Panorama — 거실 통창과 테라스에서 송정 바다가 넓게 펼쳐져요.',
en: 'True to its name, Ocean Panorama — the Songjeong sea opens up wide from the living-room windows and the terrace.',
zh: '如其名 Ocean Panorama——客廳大面窗與露台,松亭海一覽無遺。',
cn: '如其名 Ocean Panorama——客厅大面窗与露台,松亭海一览无遗。' });
I18N.set('feat2t', { ko: '독립 공간 숯불바베큐', en: 'Private charcoal BBQ area', zh: '獨立空間炭火燒烤', cn: '独立空间炭火烧烤' });
I18N.set('feat2d', {
ko: '우리 팀만 쓰는 독립된 공간에서 국산 참숯 바베큐를 즐길 수 있어요. (추가 서비스)',
en: 'Enjoy real charcoal BBQ in a space reserved just for your group. (Add-on)',
zh: '在專屬空間享受韓國木炭燒烤。(加購服務)',
cn: '在专属空间享受韩国木炭烧烤。(加购服务)' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan bath)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' });
I18N.set('feat3d', {
ko: '일상의 소음이 닿지 않는 프라이빗 온수 스파를 예약제로 이용할 수 있어요. (추가 서비스)',
en: 'A private hot-water spa, available by reservation. (Add-on)',
zh: '可預約使用私密溫水SPA。(加購服務)',
cn: '可预约使用私密温水SPA。(加购服务)' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '50평대 · 방 3 · 화장실 2 · 거실 · 주방 · 테라스', en: '~165㎡ · 3BR · 2BA · living room · kitchen · terrace', zh: '約165㎡ · 3房 · 2衛浴 · 客廳 · 廚房 · 露台', cn: '约165㎡ · 3房 · 2卫浴 · 客厅 · 厨房 · 露台' });
I18N.set('info3d', {
ko: '통창 너머로 바다가 보이는 거실을 중심으로 방 3개가 이어져요.',
en: 'Three bedrooms open off a living room that looks straight out to the sea.',
zh: '以能望見大海的落地窗客廳為中心,連接3間臥室。',
cn: '以能望见大海的落地窗客厅为中心,连接3间卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '방 3개에 침대 6개. 퀸은 2명, 슈퍼싱글과 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two; each super single and floor mattress sleeps one.',
zh: 'Queen床可睡2人,加大單人床與加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,加大单人床与加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 1개 · 슈퍼싱글 5개 · 매트리스 8개 = 최대 15명 (기준 6명)',
en: '1 queen · 5 super singles · 8 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床1張 · 加大單人床5張 · 床墊8組 = 最多15人(基準6人)',
cn: 'Queen床1张 · 加大单人床5张 · 床垫8组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐와 료칸은 예약 시 함께 신청해주세요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'Please request the BBQ and ryokan bath when booking. Laundry can be requested anytime during your stay.',
zh: '燒烤與湯屋請於預約時一併申請,洗衣服務住宿期間隨時可申請。',
cn: '烧烤与汤屋请于预约时一并申请,洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '거실, 침실, 주방, 욕실, 그리고 테라스까지.',
en: 'Living room, bedrooms, kitchen, bathrooms, and the terrace.',
zh: '客廳、臥室、廚房、衛浴,以及露台。',
cn: '客厅、卧室、厨房、卫浴,以及露台。' });
I18N.set('ryoT', { ko: '프라이빗 료칸', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 A04 Ocean Panorama', en: 'Penton Nine A04 Ocean Panorama', zh: 'Penton Nine A04 Ocean Panorama', cn: 'Penton Nine A04 Ocean Panorama' });
I18N.set('shareTitle', { ko: '펜톤나인 [A04] Ocean Panorama', en: 'Penton Nine [A04] Ocean Panorama', zh: 'Penton Nine [A04] Ocean Panorama', cn: 'Penton Nine [A04] Ocean Panorama' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9A04Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9a4Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9a4-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9a4-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9a4Photos', PHOTOS);
buildPhotoGrid('p9a4Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9a4-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9a4Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9a4-main' : '';
html += imgOrPh(GALLERY[i], 'p9a4-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9a4Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9a4-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9a4Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9a4-cap">' + (f.icon === 'jacuzzi' ? ICON_PERSON : '') + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9a4Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9a4Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9A04Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9a4Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9a4-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9a4-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9a4-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9a4-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9a4Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9a4-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9a4Modal');
var frame = document.getElementById('p9a4ModalFrame');
if (!m || !frame) return;
document.getElementById('p9a4ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9a4ModalNew');
var fallLink = document.getElementById('p9a4ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9a4Modal');
var frame = document.getElementById('p9a4ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[A04] Ocean Panorama
기본 6명 / 최대 15명
방 3개
침대 6개
화장실 2개
오션뷰
숯불바베큐
자쿠지
<!-- 펜톤나인 [B02] BeachFront 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9B02Page {
--p9b2-ink: #222222;
--p9b2-sub: #717171;
--p9b2-line: #ebebeb;
--p9b2-accent: #FF385C;
--p9b2-bg-soft: #f7f7f7;
}
#p9B02Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b2-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9B02Page * { box-sizing: border-box; }
#p9B02Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9B02Page .p9b2-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9b2-sub);
}
#p9B02Page .p9b2-crumb { min-width: 0; }
#p9B02Page .p9b2-crumb b { color: var(--p9b2-ink); font-weight: 600; }
#p9B02Page .p9b2-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9B02Page .p9b2-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9b2-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9B02Page .p9b2-share:hover { background: var(--p9b2-bg-soft); }
#p9B02Page .p9b2-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9b2-line); border-radius: 999px; padding: 3px;
}
#p9B02Page .p9b2-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9b2-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9B02Page .p9b2-lang button.on { background: var(--p9b2-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9B02Page .p9b2-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9B02Page .p9b2-gallery .p9b2-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9B02Page .p9b2-gallery .p9b2-main { grid-row: 1 / 3; }
#p9B02Page .p9b2-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9B02Page .p9b2-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9B02Page .p9b2-stats { font-size: 15px; color: var(--p9b2-ink); margin: 0 0 4px; font-weight: 500; }
#p9B02Page .p9b2-stats2 { font-size: 14px; color: var(--p9b2-sub); margin: 0; }
#p9B02Page .p9b2-divider { border: none; border-top: 1px solid var(--p9b2-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9B02Page .p9b2-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9B02Page .p9b2-feat + .p9b2-feat { border-top: 1px solid var(--p9b2-line); }
#p9B02Page .p9b2-feat svg { margin-top: 2px; }
#p9B02Page .p9b2-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9B02Page .p9b2-feat p { margin: 0; font-size: 14px; color: var(--p9b2-sub); }
/* ── 섹션 제목 ── */
#p9B02Page .p9b2-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9B02Page .p9b2-h2sub { font-size: 14px; color: var(--p9b2-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9B02Page .p9b2-info { border: 1px solid var(--p9b2-line); border-radius: 14px; padding: 24px; }
#p9B02Page .p9b2-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9B02Page .p9b2-infoitem + .p9b2-infoitem { border-top: 1px solid var(--p9b2-line); }
#p9B02Page .p9b2-infoitem svg { margin-top: 2px; }
#p9B02Page .p9b2-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9B02Page .p9b2-infoitem span { font-size: 13px; color: var(--p9b2-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9B02Page .p9b2-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9B02Page .p9b2-layout .cell {
border: 1px solid var(--p9b2-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9B02Page .p9b2-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9B02Page .p9b2-layout .cell svg { margin-bottom: 0; }
#p9B02Page .p9b2-layout .cell .txt { width: 100%; }
#p9B02Page .p9b2-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9b2-sub); align-self: center; margin-left: 1px; }
#p9B02Page .p9b2-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9B02Page .p9b2-layout .beds { font-size: 13.5px; color: var(--p9b2-sub); }
#p9B02Page .p9b2-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9b2-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9B02Page .p9b2-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9b2-sub);
}
/* ── 편의시설 ── */
#p9B02Page .p9b2-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9B02Page .p9b2-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9b2-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9B02Page .p9b2-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9B02Page .p9b2-fac .cell {
border: 1px solid var(--p9b2-line); border-radius: 14px; padding: 22px 20px;
}
#p9B02Page .p9b2-fac .cell svg { margin-bottom: 14px; }
#p9B02Page .p9b2-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9B02Page .p9b2-fac .fdesc { font-size: 13.5px; color: var(--p9b2-sub); }
#p9B02Page .p9b2-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9b2-line);
}
#p9B02Page .p9b2-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9B02Page .p9b2-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9B02Page .p9b2-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9B02Page .p9b2-fac a.cell:hover { background: var(--p9b2-bg-soft); }
#p9B02Page .p9b2-fac b { display: flex; align-items: center; gap: 6px; }
#p9B02Page .p9b2-fac .farrow { transition: transform .15s; }
#p9B02Page .p9b2-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9B02Page .p9b2-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9B02Page .p9b2-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9b2-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9B02Page .p9b2-deal:hover { background: var(--p9b2-bg-soft); }
#p9B02Page .p9b2-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9b2-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9B02Page .p9b2-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9B02Page .p9b2-deal p { margin: 0; font-size: 13.5px; color: var(--p9b2-sub); }
#p9B02Page .p9b2-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9b2-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9B02Page .p9b2-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9B02Page .p9b2-photos .cell:first-child { grid-column: 1 / -1; }
#p9B02Page .p9b2-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9B02Page .p9b2-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9b2Modal {
--p9b2-ink: #222222;
--p9b2-sub: #717171;
--p9b2-line: #ebebeb;
--p9b2-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b2-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9b2Modal * { box-sizing: border-box; }
#p9b2Modal svg { display: block; flex: none; }
#p9b2Modal.on { display: flex; }
#p9b2Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9b2Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9b2Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9b2-line); flex: none;
}
#p9b2Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9b2Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9b2-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9b2Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9b2-ink); line-height: 0;
}
#p9b2Modal .mclose:hover { background: var(--p9b2-bg-soft); }
#p9b2Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9b2Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9b2Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9b2-sub);
}
#p9b2Modal.fallback .mfall { display: flex; }
#p9b2Modal.fallback iframe { visibility: hidden; }
#p9b2Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9b2-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9b2-ink); text-decoration: none;
}
#p9B02Page .p9b2-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9b2-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9B02Page .p9b2-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9B02Page { padding: 8px 16px 56px; }
#p9B02Page .p9b2-gallery { grid-template-rows: 112px 112px; }
#p9B02Page .p9b2-h1 { font-size: 22px; }
#p9B02Page .p9b2-amen { grid-template-columns: 1fr; }
#p9B02Page .p9b2-layout { grid-template-columns: 1fr; gap: 10px; }
#p9B02Page .p9b2-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9B02Page .p9b2-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9B02Page .p9b2-layout .cell .txt { flex: 1; min-width: 0; }
#p9B02Page .p9b2-cap { margin-top: 8px; }
#p9B02Page .p9b2-fac { grid-template-columns: 1fr; }
#p9b2Modal { padding: 0; }
#p9b2Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9B02Page .p9b2-photos img { height: 145px; }
#p9B02Page .p9b2-photos .cell:first-child img { height: 215px; }
#p9B02Page .p9b2-topbar { flex-wrap: wrap; }
#p9B02Page .p9b2-crumb { order: 2; width: 100%; }
#p9B02Page .p9b2-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9B02Page">
<div class="p9b2-topbar">
<div class="p9b2-crumb" data-t="crumb"></div>
<div class="p9b2-actions">
<div class="p9b2-lang" role="group" aria-label="Language">
<button type="button" data-p9b2-lang="ko" class="on">한국어</button>
<button type="button" data-p9b2-lang="en">EN</button>
<button type="button" data-p9b2-lang="zh">繁中</button>
<button type="button" data-p9b2-lang="cn">简中</button>
</div>
<button class="p9b2-share" type="button" data-p9b2-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9b2-gallery" id="p9b2Gallery"></div>
<h1 class="p9b2-h1">[B02] BeachFront</h1>
<p class="p9b2-stats" data-t="stats"></p>
<p class="p9b2-stats2" data-t="stats2"></p>
<hr class="p9b2-divider">
<div class="p9b2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9b2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9b2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="infoT"></h2>
<p class="p9b2-h2sub" data-t="infoS"></p>
<div class="p9b2-info">
<div class="p9b2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9b2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9b2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="layoutT"></h2>
<p class="p9b2-h2sub" data-t="layoutS"></p>
<div class="p9b2-layout" id="p9b2Layout"></div>
<div class="p9b2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="amenT"></h2>
<p class="p9b2-h2sub" data-t="amenS"></p>
<div class="p9b2-amen" id="p9b2Amen"></div>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="addonT"></h2>
<p class="p9b2-h2sub" data-t="addonS"></p>
<div class="p9b2-fac" id="p9b2Fac"></div>
<div class="p9b2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9b2-divider">
<a class="p9b2-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="photoT"></h2>
<p class="p9b2-h2sub" data-t="photoS"></p>
<div class="p9b2-photos" id="p9b2Photos"></div>
<hr class="p9b2-divider">
<h2 class="p9b2-h2" data-t="ryoT"></h2>
<p class="p9b2-h2sub" data-t="ryoS"></p>
<div class="p9b2-photos" id="p9b2Ryokan"></div>
<div class="p9b2-modal" id="p9b2Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9b2-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9b2ModalTitle"></div>
<a class="mnew" id="p9b2ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9b2-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9b2ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9b2ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9b2-toast" id="p9b2Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 거실 (대표, 오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F7c733618-1000-418d-94da-5e16102673e3%2FB2_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-8087-ad8e-ccd1003dafe8',
/* 오른쪽 위 — 식사 공간 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9db965fe-1464-4c65-a280-6cc07e4c261e%2FB2_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%2584.webp&blockId=12f855f1-e498-805d-b381-e76672067033',
/* 오른쪽 아래 — 침실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8ae5d60f-d664-4ed5-8932-e179aea9f731%2FB2_%25EC%25B9%25A8%25EC%258B%25A41-1.webp&blockId=12f855f1-e498-80b2-8dcd-ebfecd3dbe9d'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'single', n: 2 }],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '슈퍼싱글 침대 2개', en: '2 super single beds', zh: '加大單人床 2張', cn: '加大单人床 2张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'mattress', n: 5 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 5개', en: '5 floor mattresses', zh: '床墊 5組', cn: '床垫 5组' },
guest: { ko: '5명', en: '5 guests', zh: '5人', cn: '5人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 (대표) */
GALLERY[1], /* 식사 공간 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F207305c3-04aa-43d6-808d-8b9e13de8d6a%2FB2_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-800e-b49f-e87abc2ae3de',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6a45495f-4815-488d-bb30-24fdce30863f%2FB2_%25EA%25B1%25B0%25EC%258B%25A42.webp&blockId=12f855f1-e498-8045-98f5-ec385960fa2a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff0751d90-04af-472f-ba0c-e4677f6c2365%2FB2_%25EA%25B1%25B0%25EC%258B%25A43.webp&blockId=12f855f1-e498-8057-9d4f-c827b7816088',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fefbbb473-fe16-4e17-adcf-744da1388406%2FB2_%25EA%25B1%25B0%25EC%258B%25A44.webp&blockId=12f855f1-e498-8081-bde5-e4b3a49deed5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F04063edb-f55d-476e-a627-8c545e63a8d5%2FB2_%25EA%25B1%25B0%25EC%258B%25A45.webp&blockId=12f855f1-e498-8023-bb52-dab29f0c92ba',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F362e15c0-dc0c-4a7d-97d8-0fef5a038423%2FB2_%25EA%25B1%25B0%25EC%258B%25A46.webp&blockId=12f855f1-e498-8025-b8a0-fe7b9fd865a7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F7eee5b1c-164e-4be1-bdf6-d0201bf0bfce%2FB2_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%25842.webp&blockId=12f855f1-e498-8096-ad60-f00a4d6ca9a7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5f92fb08-aeff-4482-a1de-6f21835f866b%2FB2_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%25843.webp&blockId=12f855f1-e498-80ac-ab4d-d1ce7ce299b9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F539461f9-44d0-4f8c-bdb4-6dd65049bf21%2FB2_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%25844.webp&blockId=12f855f1-e498-8092-a38f-dda9dda5c652',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb6d84f3e-b683-4fc9-84eb-ff11bc40b754%2FB2_%25EC%25A3%25BC%25EB%25B0%25A9.webp&blockId=12f855f1-e498-8069-bd91-d2bc70ae9477',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa5541f90-d932-42df-814e-8f1baff5fe69%2FB2_%25EC%25B9%25A8%25EC%258B%25A41-2.webp&blockId=12f855f1-e498-8061-91aa-d2332a85d20e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff52bca42-895a-4845-b592-ab2d7c287e7a%2FB2_%25EC%25B9%25A8%25EC%258B%25A41-3.webp&blockId=12f855f1-e498-8059-905b-e19d55e49ed0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F30f227f4-c5cf-463a-a7bd-01b3e36e83ea%2FB2_%25EC%25B9%25A8%25EC%258B%25A41-4.webp&blockId=12f855f1-e498-80a7-af6a-eb46bfb4b43e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0f6cae03-ac8b-4b02-b489-a0802817ffa1%2FB2_%25EC%25B9%25A8%25EC%258B%25A43-1.webp&blockId=12f855f1-e498-803c-acfe-eb120c6e0ba8',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff5ef0607-7bfb-4e39-8677-9d2cae1fd9c7%2FB2_%25EC%259A%2595%25EC%258B%25A41-1.webp&blockId=12f855f1-e498-801b-9516-cd624010f61f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5bc72b25-9454-4d8d-b1f8-034559842afd%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25841.webp&blockId=12f855f1-e498-802d-8dc4-e9586a4d99cc',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fba456ef2-1b29-4ada-84e7-fb451c87e9c1%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25842.webp&blockId=12f855f1-e498-80b9-9133-d84b6af3c8d6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd7505923-2b9a-42ff-bf60-0271e3d05660%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25843.webp&blockId=12f855f1-e498-8068-900d-e72080f20c1f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Feeb612f4-f27a-4576-8862-962c416585ae%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25844.webp&blockId=12f855f1-e498-80fb-b24a-cfbdbd0b0ef9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8f2ab65d-bd33-4c00-ba30-9dd25e1488b0%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25845.webp&blockId=12f855f1-e498-80f7-9e03-cb62955455f1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6ccf5f12-b861-4ee1-a75d-8daf87ffaa61%2FB2_%25EC%25B6%2594%25EA%25B0%2580%25EC%2582%25AC%25EC%25A7%25846.webp&blockId=12f855f1-e498-80b5-a112-ef9ee1a0e697'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/b02';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[B02] BeachFront</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[B02] BeachFront</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[B02] BeachFront</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[B02] BeachFront</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 5개 · 화장실 2개 · 60평대',
en: '3 bedrooms · 6 beds · 5 mattresses · 2 bathrooms · approx. 198㎡',
zh: '3房 · 6床 · 床墊5組 · 2衛浴 · 約198㎡',
cn: '3房 · 6床 · 床垫5组 · 2卫浴 · 约198㎡' });
I18N.set('feat1t', { ko: '해변 바로 앞, BeachFront 오션뷰', en: 'BeachFront — the sea right in front', zh: '海灘就在眼前的 BeachFront 海景', cn: '海滩就在眼前的 BeachFront 海景' });
I18N.set('feat1d', {
ko: '이름 그대로 BeachFront — 거실 통창 너머로 송정 바다가 바로 펼쳐져요.',
en: 'True to its name, BeachFront — the Songjeong sea opens up right beyond the living-room windows.',
zh: '如其名 BeachFront——客廳落地窗外就是松亭海。',
cn: '如其名 BeachFront——客厅落地窗外就是松亭海。' });
I18N.set('feat2t', { ko: '60평대 넓은 단독 공간', en: 'A spacious ~198㎡ floor to yourselves', zh: '約198㎡的寬敞獨立空間', cn: '约198㎡的宽敞独立空间' });
I18N.set('feat2d', {
ko: '한 층 전체를 한 팀만 사용해요. 최대 15명까지 여유롭게 머물 수 있어요.',
en: 'The entire floor is yours alone — comfortable for up to 15 guests.',
zh: '整層樓由一組客人獨享,最多可容納15人。',
cn: '整层楼由一组客人独享,最多可容纳15人。' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat3d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '60평대 · 방 3 · 화장실 2 · 거실 · 주방', en: '~198㎡ · 3BR · 2BA · living room · kitchen', zh: '約198㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约198㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '60평대의 넓은 구조. 바다가 보이는 거실을 중심으로 방 3개가 이어져요.',
en: 'A spacious ~198㎡ layout — three bedrooms open off a living room with a sea view.',
zh: '約198㎡的寬敞格局,以能望見大海的客廳為中心連接3間臥室。',
cn: '约198㎡的宽敞格局,以能望见大海的客厅为中心连接3间卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '퀸 침대는 2명, 슈퍼싱글 침대와 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two; each super single and floor mattress sleeps one.',
zh: 'Queen床可睡2人,加大單人床與加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,加大单人床与加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 4개 · 슈퍼싱글 2개 · 매트리스 5개 = 최대 15명 (기준 6명)',
en: '4 queens · 2 super singles · 5 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床4張 · 加大單人床2張 · 床墊5組 = 最多15人(基準6人)',
cn: 'Queen床4张 · 加大单人床2张 · 床垫5组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '자쿠지는 예약이 필요하고, 세탁은 머무는 동안 언제든 신청할 수 있어요. B동은 숯불바베큐와 루프탑 풀은 이용할 수 없어요.',
en: 'The jacuzzi requires a reservation; laundry can be requested anytime. Note that the BBQ and rooftop pool are not available in Building B.',
zh: '湯屋需預約,洗衣服務住宿期間隨時可申請。B館無法使用炭火燒烤與頂樓泳池。',
cn: '汤屋需预约,洗衣服务住宿期间随时可申请。B馆无法使用炭火烧烤与顶楼泳池。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰 거실, 식사 공간, 침실, 그리고 욕실까지.',
en: 'The ocean-view living room, dining space, bedrooms, and bathrooms.',
zh: '海景客廳、用餐空間、臥室,以及衛浴。',
cn: '海景客厅、用餐空间、卧室,以及卫浴。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 B02 BeachFront', en: 'Penton Nine B02 BeachFront', zh: 'Penton Nine B02 BeachFront', cn: 'Penton Nine B02 BeachFront' });
I18N.set('shareTitle', { ko: '펜톤나인 [B02] BeachFront', en: 'Penton Nine [B02] BeachFront', zh: 'Penton Nine [B02] BeachFront', cn: 'Penton Nine [B02] BeachFront' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9B02Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9b2Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9b2-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9b2-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9b2Photos', PHOTOS);
buildPhotoGrid('p9b2Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9b2-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9b2Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9b2-main' : '';
html += imgOrPh(GALLERY[i], 'p9b2-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9b2Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9b2-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9b2Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9b2-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9b2Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9b2Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9B02Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9b2Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9b2-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9b2-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9b2-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9b2-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9b2Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9b2-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9b2Modal');
var frame = document.getElementById('p9b2ModalFrame');
if (!m || !frame) return;
document.getElementById('p9b2ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9b2ModalNew');
var fallLink = document.getElementById('p9b2ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9b2Modal');
var frame = document.getElementById('p9b2ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[B02] BeachFront
기본 6명 / 최대 15명
방 3개
침대 6개
화장실 2개
오션뷰
자쿠지
<!-- 펜톤나인 [B03] Coastal Beach 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9B03Page {
--p9b3-ink: #222222;
--p9b3-sub: #717171;
--p9b3-line: #ebebeb;
--p9b3-accent: #FF385C;
--p9b3-bg-soft: #f7f7f7;
}
#p9B03Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b3-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9B03Page * { box-sizing: border-box; }
#p9B03Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9B03Page .p9b3-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9b3-sub);
}
#p9B03Page .p9b3-crumb { min-width: 0; }
#p9B03Page .p9b3-crumb b { color: var(--p9b3-ink); font-weight: 600; }
#p9B03Page .p9b3-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9B03Page .p9b3-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9b3-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9B03Page .p9b3-share:hover { background: var(--p9b3-bg-soft); }
#p9B03Page .p9b3-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9b3-line); border-radius: 999px; padding: 3px;
}
#p9B03Page .p9b3-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9b3-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9B03Page .p9b3-lang button.on { background: var(--p9b3-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9B03Page .p9b3-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9B03Page .p9b3-gallery .p9b3-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9B03Page .p9b3-gallery .p9b3-main { grid-row: 1 / 3; }
#p9B03Page .p9b3-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9B03Page .p9b3-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9B03Page .p9b3-stats { font-size: 15px; color: var(--p9b3-ink); margin: 0 0 4px; font-weight: 500; }
#p9B03Page .p9b3-stats2 { font-size: 14px; color: var(--p9b3-sub); margin: 0; }
#p9B03Page .p9b3-divider { border: none; border-top: 1px solid var(--p9b3-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9B03Page .p9b3-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9B03Page .p9b3-feat + .p9b3-feat { border-top: 1px solid var(--p9b3-line); }
#p9B03Page .p9b3-feat svg { margin-top: 2px; }
#p9B03Page .p9b3-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9B03Page .p9b3-feat p { margin: 0; font-size: 14px; color: var(--p9b3-sub); }
/* ── 섹션 제목 ── */
#p9B03Page .p9b3-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9B03Page .p9b3-h2sub { font-size: 14px; color: var(--p9b3-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9B03Page .p9b3-info { border: 1px solid var(--p9b3-line); border-radius: 14px; padding: 24px; }
#p9B03Page .p9b3-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9B03Page .p9b3-infoitem + .p9b3-infoitem { border-top: 1px solid var(--p9b3-line); }
#p9B03Page .p9b3-infoitem svg { margin-top: 2px; }
#p9B03Page .p9b3-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9B03Page .p9b3-infoitem span { font-size: 13px; color: var(--p9b3-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9B03Page .p9b3-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9B03Page .p9b3-layout .cell {
border: 1px solid var(--p9b3-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9B03Page .p9b3-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9B03Page .p9b3-layout .cell svg { margin-bottom: 0; }
#p9B03Page .p9b3-layout .cell .txt { width: 100%; }
#p9B03Page .p9b3-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9b3-sub); align-self: center; margin-left: 1px; }
#p9B03Page .p9b3-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9B03Page .p9b3-layout .beds { font-size: 13.5px; color: var(--p9b3-sub); }
#p9B03Page .p9b3-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9b3-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9B03Page .p9b3-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9b3-sub);
}
/* ── 편의시설 ── */
#p9B03Page .p9b3-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9B03Page .p9b3-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9b3-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9B03Page .p9b3-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9B03Page .p9b3-fac .cell {
border: 1px solid var(--p9b3-line); border-radius: 14px; padding: 22px 20px;
}
#p9B03Page .p9b3-fac .cell svg { margin-bottom: 14px; }
#p9B03Page .p9b3-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9B03Page .p9b3-fac .fdesc { font-size: 13.5px; color: var(--p9b3-sub); }
#p9B03Page .p9b3-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9b3-line);
}
#p9B03Page .p9b3-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9B03Page .p9b3-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9B03Page .p9b3-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9B03Page .p9b3-fac a.cell:hover { background: var(--p9b3-bg-soft); }
#p9B03Page .p9b3-fac b { display: flex; align-items: center; gap: 6px; }
#p9B03Page .p9b3-fac .farrow { transition: transform .15s; }
#p9B03Page .p9b3-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9B03Page .p9b3-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9B03Page .p9b3-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9b3-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9B03Page .p9b3-deal:hover { background: var(--p9b3-bg-soft); }
#p9B03Page .p9b3-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9b3-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9B03Page .p9b3-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9B03Page .p9b3-deal p { margin: 0; font-size: 13.5px; color: var(--p9b3-sub); }
#p9B03Page .p9b3-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9b3-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9B03Page .p9b3-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9B03Page .p9b3-photos .cell:first-child { grid-column: 1 / -1; }
#p9B03Page .p9b3-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9B03Page .p9b3-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9b3Modal {
--p9b3-ink: #222222;
--p9b3-sub: #717171;
--p9b3-line: #ebebeb;
--p9b3-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b3-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9b3Modal * { box-sizing: border-box; }
#p9b3Modal svg { display: block; flex: none; }
#p9b3Modal.on { display: flex; }
#p9b3Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9b3Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9b3Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9b3-line); flex: none;
}
#p9b3Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9b3Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9b3-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9b3Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9b3-ink); line-height: 0;
}
#p9b3Modal .mclose:hover { background: var(--p9b3-bg-soft); }
#p9b3Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9b3Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9b3Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9b3-sub);
}
#p9b3Modal.fallback .mfall { display: flex; }
#p9b3Modal.fallback iframe { visibility: hidden; }
#p9b3Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9b3-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9b3-ink); text-decoration: none;
}
#p9B03Page .p9b3-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9b3-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9B03Page .p9b3-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9B03Page { padding: 8px 16px 56px; }
#p9B03Page .p9b3-gallery { grid-template-rows: 112px 112px; }
#p9B03Page .p9b3-h1 { font-size: 22px; }
#p9B03Page .p9b3-amen { grid-template-columns: 1fr; }
#p9B03Page .p9b3-layout { grid-template-columns: 1fr; gap: 10px; }
#p9B03Page .p9b3-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9B03Page .p9b3-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9B03Page .p9b3-layout .cell .txt { flex: 1; min-width: 0; }
#p9B03Page .p9b3-cap { margin-top: 8px; }
#p9B03Page .p9b3-fac { grid-template-columns: 1fr; }
#p9b3Modal { padding: 0; }
#p9b3Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9B03Page .p9b3-photos img { height: 145px; }
#p9B03Page .p9b3-photos .cell:first-child img { height: 215px; }
#p9B03Page .p9b3-topbar { flex-wrap: wrap; }
#p9B03Page .p9b3-crumb { order: 2; width: 100%; }
#p9B03Page .p9b3-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9B03Page">
<div class="p9b3-topbar">
<div class="p9b3-crumb" data-t="crumb"></div>
<div class="p9b3-actions">
<div class="p9b3-lang" role="group" aria-label="Language">
<button type="button" data-p9b3-lang="ko" class="on">한국어</button>
<button type="button" data-p9b3-lang="en">EN</button>
<button type="button" data-p9b3-lang="zh">繁中</button>
<button type="button" data-p9b3-lang="cn">简中</button>
</div>
<button class="p9b3-share" type="button" data-p9b3-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9b3-gallery" id="p9b3Gallery"></div>
<h1 class="p9b3-h1">[B03] Coastal Beach</h1>
<p class="p9b3-stats" data-t="stats"></p>
<p class="p9b3-stats2" data-t="stats2"></p>
<hr class="p9b3-divider">
<div class="p9b3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9b3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9b3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="infoT"></h2>
<p class="p9b3-h2sub" data-t="infoS"></p>
<div class="p9b3-info">
<div class="p9b3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9b3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9b3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="layoutT"></h2>
<p class="p9b3-h2sub" data-t="layoutS"></p>
<div class="p9b3-layout" id="p9b3Layout"></div>
<div class="p9b3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="amenT"></h2>
<p class="p9b3-h2sub" data-t="amenS"></p>
<div class="p9b3-amen" id="p9b3Amen"></div>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="addonT"></h2>
<p class="p9b3-h2sub" data-t="addonS"></p>
<div class="p9b3-fac" id="p9b3Fac"></div>
<div class="p9b3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9b3-divider">
<a class="p9b3-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="photoT"></h2>
<p class="p9b3-h2sub" data-t="photoS"></p>
<div class="p9b3-photos" id="p9b3Photos"></div>
<hr class="p9b3-divider">
<h2 class="p9b3-h2" data-t="ryoT"></h2>
<p class="p9b3-h2sub" data-t="ryoS"></p>
<div class="p9b3-photos" id="p9b3Ryokan"></div>
<div class="p9b3-modal" id="p9b3Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9b3-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9b3ModalTitle"></div>
<a class="mnew" id="p9b3ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9b3-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9b3ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9b3ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9b3-toast" id="p9b3Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 거실 (대표, 오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb7c16fd7-0e05-4d10-aeec-59f74fb8e660%2FB3_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-8084-bad7-f1dca12aeac6',
/* 오른쪽 위 — 거실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6158285f-ff96-4532-b175-78b81289f418%2FB3_%25EA%25B1%25B0%25EC%258B%25A410.webp&blockId=12f855f1-e498-806c-a47f-ec906d768667',
/* 오른쪽 아래 — 침실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5a363ad4-740d-4ed7-8b19-acc535187943%2FB3_%25EC%25B9%25A8%25EC%258B%25A42-1.webp&blockId=12f855f1-e498-8062-8cbb-ca2b87104747'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: ['queen','single'],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '퀸 침대 1개 · 슈퍼싱글 침대 1개', en: '1 queen bed · 1 super single bed', zh: 'Queen床 1張 · 加大單人床 1張', cn: 'Queen床 1张 · 加大单人床 1张' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } },
{ icon: [{ t: 'mattress', n: 4 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 4개', en: '4 floor mattresses', zh: '床墊 4組', cn: '床垫 4组' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 (대표) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff5c00e98-e3e5-405c-8e95-8d8a2147ea9c%2FB3_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-807c-9c5f-d387465943e2',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa0e5e09e-b47f-4fab-9660-38e55aac8da0%2FB3_%25EA%25B1%25B0%25EC%258B%25A42.webp&blockId=12f855f1-e498-801e-b288-d9422958c57b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbcfc72fa-0e47-41c2-911e-d2af503f3d03%2FB3_%25EA%25B1%25B0%25EC%258B%25A43.webp&blockId=12f855f1-e498-8086-9e63-e43c092fd0a5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9fc4aac5-5d2b-4bdd-a1bd-b6ea6003e4d9%2FB3_%25EA%25B1%25B0%25EC%258B%25A44.webp&blockId=12f855f1-e498-80d5-9367-d98cd4f73dd7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F459083fc-6de4-4755-b35c-efc9a9731264%2FB3_%25EA%25B1%25B0%25EC%258B%25A45.webp&blockId=12f855f1-e498-8035-a5e8-e10316b688ef',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2adcc537-55e8-48b7-875e-8fcbe165a2b7%2FB3_%25EA%25B1%25B0%25EC%258B%25A46.webp&blockId=12f855f1-e498-80ae-98f7-eaae01954cd0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbca8a4b6-f38b-40f5-97a3-dfe9969369a2%2FB3_%25EA%25B1%25B0%25EC%258B%25A47.webp&blockId=12f855f1-e498-808c-ba5b-e93a4d0a1d8f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcfd9e7b7-cd9d-4974-904f-4044b951a57f%2FB3_%25EA%25B1%25B0%25EC%258B%25A48.webp&blockId=12f855f1-e498-80da-b882-cd0512eb58a0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5a5ab2de-13e0-48ce-8b84-fe44568f76e9%2FB3_%25EA%25B1%25B0%25EC%258B%25A49.webp&blockId=12f855f1-e498-8024-a887-d3d60e632889',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F4fb3911c-2496-4ed9-bfbd-4f57e987f71e%2FB3_%25EC%25A3%25BC%25EB%25B0%25A94.webp&blockId=12f855f1-e498-807f-b80c-d67f7416900d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff726ede5-ed05-4a44-b174-c9e55daa7ba3%2FB3_%25EC%25A3%25BC%25EB%25B0%25A92.webp&blockId=12f855f1-e498-80fc-90cd-d7204c057335',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2e5b5ec9-acd4-498f-987f-b552a85b2eac%2FB3_%25EC%25A3%25BC%25EB%25B0%25A93.webp&blockId=12f855f1-e498-803d-8fec-ececd009c6a7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc2c9ada9-4abb-4272-a123-e6c28a26ff97%2FB3_%25EC%25B9%25A8%25EC%258B%25A42-2.webp&blockId=12f855f1-e498-80e3-a560-eb9ae02fa68a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F03b49490-1b16-4db2-883b-06c8083fe06f%2FB3_%25EC%25B9%25A8%25EC%258B%25A43-1.webp&blockId=12f855f1-e498-80d7-95ed-f05231e283f5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F73b7c8b7-30b5-45c5-b954-3f99b3b4a59e%2FB3_%25EC%25B9%25A8%25EC%258B%25A43-2.webp&blockId=12f855f1-e498-8099-a028-d9c2f6eaf16b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa9b8266f-2231-4845-8529-65f17bbe9b19%2FB3_%25EC%25B9%25A8%25EC%258B%25A43-3.webp&blockId=12f855f1-e498-808a-aae9-ec17a6d8f3a0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fad14f93b-297a-4847-986b-bd0e2868df53%2FB3_%25EC%25B9%25A8%25EC%258B%25A43-4.webp&blockId=12f855f1-e498-80c9-b5c5-ca55e8e8ecb2',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd2ff9f35-d083-4e30-9e65-28ab73ac6430%2FB3_%25EC%259A%2595%25EC%258B%25A41-1.webp&blockId=12f855f1-e498-8085-a4de-d78639deb1b1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F22a4ec2c-87f1-4043-9928-b83bee758955%2FB3_%25EC%259A%2595%25EC%258B%25A41-2.webp&blockId=12f855f1-e498-802c-ab9e-d2d4bd4b9bc7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F70448885-8c00-47a9-9c9d-93240cde3a3f%2FB3_%25EC%259A%2595%25EC%258B%25A41-3.webp&blockId=12f855f1-e498-8004-b483-e021ffb5070b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fdef512b9-ae2a-47f6-8492-84c14c094efb%2FB3_%25EC%259A%2595%25EC%258B%25A41-4.webp&blockId=12f855f1-e498-807c-ae8f-d90401d3c190',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F50b7fe7f-d512-4da4-9381-749a0728e19d%2FB3_%25EC%259A%2595%25EC%258B%25A41-5.webp&blockId=12f855f1-e498-809a-a9d2-fa83890503a6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd657beab-e70d-44c3-81ae-52d7be82b030%2FB3_%25EC%259A%2595%25EC%258B%25A42-5.webp&blockId=12f855f1-e498-808e-8f59-c06195dd09b8',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc21c84f5-f340-4cab-a9cd-93a773a2851e%2FB3_%25EC%259A%2595%25EC%258B%25A42-6.webp&blockId=12f855f1-e498-80fd-bdef-e15466302e1e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fce008681-0d47-459d-8d2a-5b81b5644aad%2FB3_%25EC%259A%2595%25EC%258B%25A42-7.webp&blockId=12f855f1-e498-8007-a639-c0c4ee1cf52a'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/b03';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[B03] Coastal Beach</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[B03] Coastal Beach</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[B03] Coastal Beach</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[B03] Coastal Beach</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 4개 · 화장실 2개 · 60평대',
en: '3 bedrooms · 6 beds · 4 mattresses · 2 bathrooms · approx. 198㎡',
zh: '3房 · 6床 · 床墊4組 · 2衛浴 · 約198㎡',
cn: '3房 · 6床 · 床垫4组 · 2卫浴 · 约198㎡' });
I18N.set('feat1t', { ko: '해안선을 담은 오션뷰', en: 'An ocean view along the coastline', zh: '盡收海岸線的無敵海景', cn: '尽收海岸线的无敌海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Coastal Beach — 거실 통창 너머로 송정의 해안선이 펼쳐져요.',
en: 'True to its name, Coastal Beach — the Songjeong coastline stretches out beyond the living-room windows.',
zh: '如其名 Coastal Beach——客廳落地窗外就是松亭的海岸線。',
cn: '如其名 Coastal Beach——客厅落地窗外就是松亭的海岸线。' });
I18N.set('feat2t', { ko: '60평대 넓은 단독 공간', en: 'A spacious ~198㎡ floor to yourselves', zh: '約198㎡的寬敞獨立空間', cn: '约198㎡的宽敞独立空间' });
I18N.set('feat2d', {
ko: '한 층 전체를 한 팀만 사용해요. 최대 15명까지 여유롭게 머물 수 있어요.',
en: 'The entire floor is yours alone — comfortable for up to 15 guests.',
zh: '整層樓由一組客人獨享,最多可容納15人。',
cn: '整层楼由一组客人独享,最多可容纳15人。' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat3d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '60평대 · 방 3 · 화장실 2 · 거실 · 주방', en: '~198㎡ · 3BR · 2BA · living room · kitchen', zh: '約198㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约198㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '60평대의 넓은 구조. 바다가 보이는 거실을 중심으로 방 3개가 이어져요.',
en: 'A spacious ~198㎡ layout — three bedrooms open off a living room with a sea view.',
zh: '約198㎡的寬敞格局,以能望見大海的客廳為中心連接3間臥室。',
cn: '约198㎡的宽敞格局,以能望见大海的客厅为中心连接3间卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '퀸 침대는 2명, 슈퍼싱글 침대와 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two; each super single and floor mattress sleeps one.',
zh: 'Queen床可睡2人,加大單人床與加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,加大单人床与加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 5개 · 슈퍼싱글 1개 · 매트리스 4개 = 최대 15명 (기준 6명)',
en: '5 queens · 1 super single · 4 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床5張 · 加大單人床1張 · 床墊4組 = 最多15人(基準6人)',
cn: 'Queen床5张 · 加大单人床1张 · 床垫4组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '자쿠지는 예약이 필요하고, 세탁은 머무는 동안 언제든 신청할 수 있어요. B동은 숯불바베큐와 루프탑 풀은 이용할 수 없어요.',
en: 'The jacuzzi requires a reservation; laundry can be requested anytime. Note that the BBQ and rooftop pool are not available in Building B.',
zh: '湯屋需預約,洗衣服務住宿期間隨時可申請。B館無法使用炭火燒烤與頂樓泳池。',
cn: '汤屋需预约,洗衣服务住宿期间随时可申请。B馆无法使用炭火烧烤与顶楼泳池。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰 거실, 주방, 침실, 그리고 욕실까지.',
en: 'The ocean-view living room, dining space, bedrooms, and bathrooms.',
zh: '海景客廳、用餐空間、臥室,以及衛浴。',
cn: '海景客厅、用餐空间、卧室,以及卫浴。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 B03 Coastal Beach', en: 'Penton Nine B03 Coastal Beach', zh: 'Penton Nine B03 Coastal Beach', cn: 'Penton Nine B03 Coastal Beach' });
I18N.set('shareTitle', { ko: '펜톤나인 [B03] Coastal Beach', en: 'Penton Nine [B03] Coastal Beach', zh: 'Penton Nine [B03] Coastal Beach', cn: 'Penton Nine [B03] Coastal Beach' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9B03Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9b3Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9b3-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9b3-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9b3Photos', PHOTOS);
buildPhotoGrid('p9b3Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9b3-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9b3Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9b3-main' : '';
html += imgOrPh(GALLERY[i], 'p9b3-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9b3Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9b3-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9b3Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9b3-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9b3Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9b3Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9B03Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9b3Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9b3-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9b3-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9b3-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9b3-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9b3Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9b3-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9b3Modal');
var frame = document.getElementById('p9b3ModalFrame');
if (!m || !frame) return;
document.getElementById('p9b3ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9b3ModalNew');
var fallLink = document.getElementById('p9b3ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9b3Modal');
var frame = document.getElementById('p9b3ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[B03] Coastal Beach
기본 6명 / 최대 15명
방 3개
침대 6개
화장실 2개
오션뷰
자쿠지
<!-- 펜톤나인 [B04] Ocean Sky 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9B04Page {
--p9b4-ink: #222222;
--p9b4-sub: #717171;
--p9b4-line: #ebebeb;
--p9b4-accent: #FF385C;
--p9b4-bg-soft: #f7f7f7;
}
#p9B04Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b4-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9B04Page * { box-sizing: border-box; }
#p9B04Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9B04Page .p9b4-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9b4-sub);
}
#p9B04Page .p9b4-crumb { min-width: 0; }
#p9B04Page .p9b4-crumb b { color: var(--p9b4-ink); font-weight: 600; }
#p9B04Page .p9b4-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9B04Page .p9b4-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9b4-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9B04Page .p9b4-share:hover { background: var(--p9b4-bg-soft); }
#p9B04Page .p9b4-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9b4-line); border-radius: 999px; padding: 3px;
}
#p9B04Page .p9b4-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9b4-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9B04Page .p9b4-lang button.on { background: var(--p9b4-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9B04Page .p9b4-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9B04Page .p9b4-gallery .p9b4-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9B04Page .p9b4-gallery .p9b4-main { grid-row: 1 / 3; }
#p9B04Page .p9b4-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9B04Page .p9b4-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9B04Page .p9b4-stats { font-size: 15px; color: var(--p9b4-ink); margin: 0 0 4px; font-weight: 500; }
#p9B04Page .p9b4-stats2 { font-size: 14px; color: var(--p9b4-sub); margin: 0; }
#p9B04Page .p9b4-divider { border: none; border-top: 1px solid var(--p9b4-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9B04Page .p9b4-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9B04Page .p9b4-feat + .p9b4-feat { border-top: 1px solid var(--p9b4-line); }
#p9B04Page .p9b4-feat svg { margin-top: 2px; }
#p9B04Page .p9b4-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9B04Page .p9b4-feat p { margin: 0; font-size: 14px; color: var(--p9b4-sub); }
/* ── 섹션 제목 ── */
#p9B04Page .p9b4-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9B04Page .p9b4-h2sub { font-size: 14px; color: var(--p9b4-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9B04Page .p9b4-info { border: 1px solid var(--p9b4-line); border-radius: 14px; padding: 24px; }
#p9B04Page .p9b4-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9B04Page .p9b4-infoitem + .p9b4-infoitem { border-top: 1px solid var(--p9b4-line); }
#p9B04Page .p9b4-infoitem svg { margin-top: 2px; }
#p9B04Page .p9b4-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9B04Page .p9b4-infoitem span { font-size: 13px; color: var(--p9b4-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9B04Page .p9b4-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9B04Page .p9b4-layout .cell {
border: 1px solid var(--p9b4-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9B04Page .p9b4-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9B04Page .p9b4-layout .cell svg { margin-bottom: 0; }
#p9B04Page .p9b4-layout .cell .txt { width: 100%; }
#p9B04Page .p9b4-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9b4-sub); align-self: center; margin-left: 1px; }
#p9B04Page .p9b4-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9B04Page .p9b4-layout .beds { font-size: 13.5px; color: var(--p9b4-sub); }
#p9B04Page .p9b4-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9b4-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9B04Page .p9b4-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9b4-sub);
}
/* ── 편의시설 ── */
#p9B04Page .p9b4-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9B04Page .p9b4-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9b4-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9B04Page .p9b4-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9B04Page .p9b4-fac .cell {
border: 1px solid var(--p9b4-line); border-radius: 14px; padding: 22px 20px;
}
#p9B04Page .p9b4-fac .cell svg { margin-bottom: 14px; }
#p9B04Page .p9b4-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9B04Page .p9b4-fac .fdesc { font-size: 13.5px; color: var(--p9b4-sub); }
#p9B04Page .p9b4-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9b4-line);
}
#p9B04Page .p9b4-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9B04Page .p9b4-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9B04Page .p9b4-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9B04Page .p9b4-fac a.cell:hover { background: var(--p9b4-bg-soft); }
#p9B04Page .p9b4-fac b { display: flex; align-items: center; gap: 6px; }
#p9B04Page .p9b4-fac .farrow { transition: transform .15s; }
#p9B04Page .p9b4-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9B04Page .p9b4-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9B04Page .p9b4-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9b4-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9B04Page .p9b4-deal:hover { background: var(--p9b4-bg-soft); }
#p9B04Page .p9b4-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9b4-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9B04Page .p9b4-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9B04Page .p9b4-deal p { margin: 0; font-size: 13.5px; color: var(--p9b4-sub); }
#p9B04Page .p9b4-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9b4-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9B04Page .p9b4-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9B04Page .p9b4-photos .cell:first-child { grid-column: 1 / -1; }
#p9B04Page .p9b4-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9B04Page .p9b4-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9b4Modal {
--p9b4-ink: #222222;
--p9b4-sub: #717171;
--p9b4-line: #ebebeb;
--p9b4-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b4-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9b4Modal * { box-sizing: border-box; }
#p9b4Modal svg { display: block; flex: none; }
#p9b4Modal.on { display: flex; }
#p9b4Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9b4Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9b4Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9b4-line); flex: none;
}
#p9b4Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9b4Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9b4-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9b4Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9b4-ink); line-height: 0;
}
#p9b4Modal .mclose:hover { background: var(--p9b4-bg-soft); }
#p9b4Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9b4Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9b4Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9b4-sub);
}
#p9b4Modal.fallback .mfall { display: flex; }
#p9b4Modal.fallback iframe { visibility: hidden; }
#p9b4Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9b4-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9b4-ink); text-decoration: none;
}
#p9B04Page .p9b4-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9b4-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9B04Page .p9b4-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9B04Page { padding: 8px 16px 56px; }
#p9B04Page .p9b4-gallery { grid-template-rows: 112px 112px; }
#p9B04Page .p9b4-h1 { font-size: 22px; }
#p9B04Page .p9b4-amen { grid-template-columns: 1fr; }
#p9B04Page .p9b4-layout { grid-template-columns: 1fr; gap: 10px; }
#p9B04Page .p9b4-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9B04Page .p9b4-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9B04Page .p9b4-layout .cell .txt { flex: 1; min-width: 0; }
#p9B04Page .p9b4-cap { margin-top: 8px; }
#p9B04Page .p9b4-fac { grid-template-columns: 1fr; }
#p9b4Modal { padding: 0; }
#p9b4Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9B04Page .p9b4-photos img { height: 145px; }
#p9B04Page .p9b4-photos .cell:first-child img { height: 215px; }
#p9B04Page .p9b4-topbar { flex-wrap: wrap; }
#p9B04Page .p9b4-crumb { order: 2; width: 100%; }
#p9B04Page .p9b4-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9B04Page">
<div class="p9b4-topbar">
<div class="p9b4-crumb" data-t="crumb"></div>
<div class="p9b4-actions">
<div class="p9b4-lang" role="group" aria-label="Language">
<button type="button" data-p9b4-lang="ko" class="on">한국어</button>
<button type="button" data-p9b4-lang="en">EN</button>
<button type="button" data-p9b4-lang="zh">繁中</button>
<button type="button" data-p9b4-lang="cn">简中</button>
</div>
<button class="p9b4-share" type="button" data-p9b4-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9b4-gallery" id="p9b4Gallery"></div>
<h1 class="p9b4-h1">[B04] Ocean Sky</h1>
<p class="p9b4-stats" data-t="stats"></p>
<p class="p9b4-stats2" data-t="stats2"></p>
<hr class="p9b4-divider">
<div class="p9b4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9b4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9b4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="infoT"></h2>
<p class="p9b4-h2sub" data-t="infoS"></p>
<div class="p9b4-info">
<div class="p9b4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9b4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9b4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="layoutT"></h2>
<p class="p9b4-h2sub" data-t="layoutS"></p>
<div class="p9b4-layout" id="p9b4Layout"></div>
<div class="p9b4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="amenT"></h2>
<p class="p9b4-h2sub" data-t="amenS"></p>
<div class="p9b4-amen" id="p9b4Amen"></div>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="addonT"></h2>
<p class="p9b4-h2sub" data-t="addonS"></p>
<div class="p9b4-fac" id="p9b4Fac"></div>
<div class="p9b4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9b4-divider">
<a class="p9b4-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="photoT"></h2>
<p class="p9b4-h2sub" data-t="photoS"></p>
<div class="p9b4-photos" id="p9b4Photos"></div>
<hr class="p9b4-divider">
<h2 class="p9b4-h2" data-t="ryoT"></h2>
<p class="p9b4-h2sub" data-t="ryoS"></p>
<div class="p9b4-photos" id="p9b4Ryokan"></div>
<div class="p9b4-modal" id="p9b4Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9b4-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9b4ModalTitle"></div>
<a class="mnew" id="p9b4ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9b4-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9b4ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9b4ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9b4-toast" id="p9b4Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 거실 (대표, 오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9c4c0796-9233-4b38-ba05-bb7cbb3c17fa%2FB4_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-8067-a933-e527ed4b6782',
/* 오른쪽 위 — 식사 공간 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F4643b963-f415-4a2c-a043-44927478d4dd%2FB4_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%25841.webp&blockId=12f855f1-e498-80ba-8ebe-fe9a528d0539',
/* 오른쪽 아래 — 침실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F49cd9aff-c7e0-4405-94cc-ba23c27eaaf4%2FB4_%25EC%25B9%25A8%25EC%258B%25A42-1.webp&blockId=12f855f1-e498-805c-a042-e12d1bc4723e'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'mattress', n: 3 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 3개', en: '3 floor mattresses', zh: '床墊 3組', cn: '床垫 3组' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '드라이기', en: 'Hair dryer', zh: '吹風機', cn: '吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 거실 (대표) */
GALLERY[1], /* 식사 공간 (대표) */
GALLERY[2], /* 침실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc3d3dc63-ccb0-42b5-b595-2c051b1a0b63%2FB4_%25EA%25B1%25B0%25EC%258B%25A48.webp&blockId=12f855f1-e498-8076-a2eb-ce6755772022',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2d19e886-71f5-4485-9955-07cf69b49a4e%2FB4_%25EA%25B1%25B0%25EC%258B%25A41.webp&blockId=12f855f1-e498-8065-90ec-d7bbf51a5d32',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F363dd5f0-4e37-4ae1-bada-55ad5dc0efa3%2FB4_%25EA%25B1%25B0%25EC%258B%25A42.webp&blockId=12f855f1-e498-8098-b0a5-e44eaec522a8',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8925b885-a4f0-4bbb-ada9-4459a675ad64%2FB4_%25EA%25B1%25B0%25EC%258B%25A43.webp&blockId=12f855f1-e498-80ba-a01a-cdad61b13386',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F68a24177-d106-45f8-8131-9eb0ca0bd94c%2FB4_%25EA%25B1%25B0%25EC%258B%25A44.webp&blockId=12f855f1-e498-80c0-9aab-f2081229d1a9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F4e161e2b-0061-4a2c-bb3d-4b5b2049a861%2FB4_%25EA%25B1%25B0%25EC%258B%25A45.webp&blockId=12f855f1-e498-8055-87b7-e0bd6fe3d0b3',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa3255de4-9d3a-44a2-a330-f65c9cb2e985%2FB4_%25EA%25B1%25B0%25EC%258B%25A46.webp&blockId=12f855f1-e498-80ff-8ea9-c746bce62a84',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F876dd1dd-2e98-4876-9bfd-8541aacc9448%2FB4_%25EA%25B1%25B0%25EC%258B%25A47.webp&blockId=12f855f1-e498-8011-83fb-ee69f2b20848',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9f998f05-ae22-4708-be1e-762c7da7fa06%2FB4_%25EC%258B%259D%25EC%2582%25AC%25EA%25B3%25B5%25EA%25B0%25842.webp&blockId=12f855f1-e498-80b0-9077-c86486c24bd5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F679a2843-8c41-4b10-b357-72e2238d7f8a%2FB4_%25EC%25A3%25BC%25EB%25B0%25A93.webp&blockId=12f855f1-e498-8050-ae77-dee77e09cfa9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F62736751-24ef-4ee9-8db9-ce77728eed19%2FB4_%25EC%25A3%25BC%25EB%25B0%25A92.webp&blockId=12f855f1-e498-8008-9f90-cb9d97253161',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc6c29af0-9bf2-4c4d-8fa2-03998b5d716e%2FB4_%25EC%25B9%25A8%25EC%258B%25A41-2.webp&blockId=12f855f1-e498-8086-9de7-cc40b4da1f2b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F31920659-45e5-4f40-abb6-dd1e79096144%2FB4_%25EC%25B9%25A8%25EC%258B%25A41-3.webp&blockId=12f855f1-e498-8098-9f20-f45a06609194',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa815bf44-bfb2-466f-bdd8-ac876c6c7914%2FB4_%25EC%25B9%25A8%25EC%258B%25A41-4.webp&blockId=12f855f1-e498-80f6-9b73-e7239dc70ede',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd106e196-7a32-42b8-8429-c276bcd9463e%2FB4_%25EC%25B9%25A8%25EC%258B%25A43.webp&blockId=12f855f1-e498-80ec-a32c-e697144ef4b3',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F576c7cf7-3f2b-47cb-ad80-f98bd026900a%2FB4_%25EC%259A%2595%25EC%258B%25A41-1.webp&blockId=12f855f1-e498-8061-9cc0-c531bc4cae55',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0eb437b2-78d4-4760-8c09-d80e8a720f58%2FB4_%25EC%259A%2595%25EC%258B%25A41-2.webp&blockId=12f855f1-e498-805d-990c-e8774b161c1a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fdaccdcee-ae51-44f4-9067-cb3d7780632d%2FB4_%25EC%259A%2595%25EC%258B%25A41-3.webp&blockId=12f855f1-e498-8049-ba04-f22275e1177c',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1d4973e3-3143-45b4-8d3a-b792bacbc484%2FB4_%25EC%259A%2595%25EC%258B%25A41-4.webp&blockId=12f855f1-e498-80da-8e38-c6d0fa6b3737',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F17c18aac-8212-42b8-8fb3-000ddc383a95%2FB4_%25EC%259A%2595%25EC%258B%25A42-2.webp&blockId=12f855f1-e498-80eb-a2a8-de83bac67490',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F40fcdf1d-6583-4971-b9c7-5671d2bedf8b%2FB4_%25EC%259A%2595%25EC%258B%25A42-3.webp&blockId=12f855f1-e498-8023-b88e-eda45d5468cb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb3c19fa7-ca65-4283-a18b-e319c393f47c%2FB4_%25EC%259A%2595%25EC%258B%25A42-4.webp&blockId=12f855f1-e498-809f-ba12-cd725925eff7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9972bae4-c4d6-4675-8bb3-cb66c3777712%2FB4_%25EC%259A%2595%25EC%258B%25A42-5.webp&blockId=12f855f1-e498-8044-90fe-e9cc2d775fe2'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/b04';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[B04] Ocean Sky</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[B04] Ocean Sky</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[B04] Ocean Sky</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[B04] Ocean Sky</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 3개 · 화장실 2개 · 60평대',
en: '3 bedrooms · 6 beds · 3 mattresses · 2 bathrooms · approx. 198㎡',
zh: '3房 · 6床 · 床墊3組 · 2衛浴 · 約198㎡',
cn: '3房 · 6床 · 床垫3组 · 2卫浴 · 约198㎡' });
I18N.set('feat1t', { ko: '바다와 하늘이 함께 보이는 오션뷰', en: 'Ocean and sky in one view', zh: '海天一色的絕佳視野', cn: '海天一色的绝佳视野' });
I18N.set('feat1d', {
ko: '이름 그대로 Ocean Sky — 높은 층에서 송정 바다와 하늘이 시원하게 펼쳐져요.',
en: 'True to its name, Ocean Sky — from a higher floor, the Songjeong sea and sky open up wide.',
zh: '如其名 Ocean Sky——樓層較高,松亭的海與天一覽無遺。',
cn: '如其名 Ocean Sky——楼层较高,松亭的海与天一览无遗。' });
I18N.set('feat2t', { ko: '60평대 넓은 단독 공간', en: 'A spacious ~198㎡ floor to yourselves', zh: '約198㎡的寬敞獨立空間', cn: '约198㎡的宽敞独立空间' });
I18N.set('feat2d', {
ko: '한 층 전체를 한 팀만 사용해요. 최대 15명까지 여유롭게 머물 수 있어요.',
en: 'The entire floor is yours alone — comfortable for up to 15 guests.',
zh: '整層樓由一組客人獨享,最多可容納15人。',
cn: '整层楼由一组客人独享,最多可容纳15人。' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat3d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '60평대 · 방 3 · 화장실 2 · 거실 · 주방', en: '~198㎡ · 3BR · 2BA · living room · kitchen', zh: '約198㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约198㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '60평대의 넓은 구조. 바다가 보이는 거실을 중심으로 방 3개가 이어져요.',
en: 'A spacious ~198㎡ layout — three bedrooms open off a living room with a sea view.',
zh: '約198㎡的寬敞格局,以能望見大海的客廳為中心連接3間臥室。',
cn: '约198㎡的宽敞格局,以能望见大海的客厅为中心连接3间卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '세 방 모두 퀸 침대 2개씩이에요. 퀸은 2명, 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'All three bedrooms have two queen beds each — a queen sleeps two, and each floor mattress sleeps one.',
zh: '三間臥室皆配置2張Queen床。Queen床可睡2人,加鋪床墊各可睡1人。',
cn: '三间卧室均配置2张Queen床。Queen床可睡2人,加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 6개 · 매트리스 3개 = 최대 15명 (기준 6명)',
en: '6 queen beds · 3 mattresses = up to 15 guests (6 standard)',
zh: 'Queen床6張 · 床墊3組 = 最多15人(基準6人)',
cn: 'Queen床6张 · 床垫3组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '자쿠지는 예약이 필요하고, 세탁은 머무는 동안 언제든 신청할 수 있어요. B동은 숯불바베큐와 루프탑 풀은 이용할 수 없어요.',
en: 'The jacuzzi requires a reservation; laundry can be requested anytime. Note that the BBQ and rooftop pool are not available in Building B.',
zh: '湯屋需預約,洗衣服務住宿期間隨時可申請。B館無法使用炭火燒烤與頂樓泳池。',
cn: '汤屋需预约,洗衣服务住宿期间随时可申请。B馆无法使用炭火烧烤与顶楼泳池。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰 거실, 식사 공간, 침실, 그리고 욕실까지.',
en: 'The ocean-view living room, dining space, bedrooms, and bathrooms.',
zh: '海景客廳、用餐空間、臥室,以及衛浴。',
cn: '海景客厅、用餐空间、卧室,以及卫浴。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 B04 Ocean Sky', en: 'Penton Nine B04 Ocean Sky', zh: 'Penton Nine B04 Ocean Sky', cn: 'Penton Nine B04 Ocean Sky' });
I18N.set('shareTitle', { ko: '펜톤나인 [B04] Ocean Sky', en: 'Penton Nine [B04] Ocean Sky', zh: 'Penton Nine [B04] Ocean Sky', cn: 'Penton Nine [B04] Ocean Sky' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9B04Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9b4Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9b4-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9b4-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9b4Photos', PHOTOS);
buildPhotoGrid('p9b4Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9b4-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9b4Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9b4-main' : '';
html += imgOrPh(GALLERY[i], 'p9b4-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9b4Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9b4-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9b4Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9b4-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9b4Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9b4Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9B04Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9b4Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9b4-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9b4-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9b4-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9b4-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9b4Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9b4-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9b4Modal');
var frame = document.getElementById('p9b4ModalFrame');
if (!m || !frame) return;
document.getElementById('p9b4ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9b4ModalNew');
var fallLink = document.getElementById('p9b4ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9b4Modal');
var frame = document.getElementById('p9b4ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[B04] Ocean Sky
기본 6명 / 최대 15명
방 3개
침대 6개
화장실 2개
오션뷰
자쿠지
<!-- 펜톤나인 [B05] Ocean Artisan 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9B05Page {
--p9b5-ink: #222222;
--p9b5-sub: #717171;
--p9b5-line: #ebebeb;
--p9b5-accent: #FF385C;
--p9b5-bg-soft: #f7f7f7;
}
#p9B05Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b5-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9B05Page * { box-sizing: border-box; }
#p9B05Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9B05Page .p9b5-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9b5-sub);
}
#p9B05Page .p9b5-crumb { min-width: 0; }
#p9B05Page .p9b5-crumb b { color: var(--p9b5-ink); font-weight: 600; }
#p9B05Page .p9b5-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9B05Page .p9b5-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9b5-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9B05Page .p9b5-share:hover { background: var(--p9b5-bg-soft); }
#p9B05Page .p9b5-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9b5-line); border-radius: 999px; padding: 3px;
}
#p9B05Page .p9b5-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9b5-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9B05Page .p9b5-lang button.on { background: var(--p9b5-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9B05Page .p9b5-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9B05Page .p9b5-gallery .p9b5-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9B05Page .p9b5-gallery .p9b5-main { grid-row: 1 / 3; }
#p9B05Page .p9b5-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9B05Page .p9b5-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9B05Page .p9b5-stats { font-size: 15px; color: var(--p9b5-ink); margin: 0 0 4px; font-weight: 500; }
#p9B05Page .p9b5-stats2 { font-size: 14px; color: var(--p9b5-sub); margin: 0; }
#p9B05Page .p9b5-divider { border: none; border-top: 1px solid var(--p9b5-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9B05Page .p9b5-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9B05Page .p9b5-feat + .p9b5-feat { border-top: 1px solid var(--p9b5-line); }
#p9B05Page .p9b5-feat svg { margin-top: 2px; }
#p9B05Page .p9b5-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9B05Page .p9b5-feat p { margin: 0; font-size: 14px; color: var(--p9b5-sub); }
/* ── 섹션 제목 ── */
#p9B05Page .p9b5-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9B05Page .p9b5-h2sub { font-size: 14px; color: var(--p9b5-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9B05Page .p9b5-info { border: 1px solid var(--p9b5-line); border-radius: 14px; padding: 24px; }
#p9B05Page .p9b5-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9B05Page .p9b5-infoitem + .p9b5-infoitem { border-top: 1px solid var(--p9b5-line); }
#p9B05Page .p9b5-infoitem svg { margin-top: 2px; }
#p9B05Page .p9b5-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9B05Page .p9b5-infoitem span { font-size: 13px; color: var(--p9b5-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9B05Page .p9b5-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9B05Page .p9b5-layout .cell {
border: 1px solid var(--p9b5-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9B05Page .p9b5-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9B05Page .p9b5-layout .cell svg { margin-bottom: 0; }
#p9B05Page .p9b5-layout .cell .txt { width: 100%; }
#p9B05Page .p9b5-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9b5-sub); align-self: center; margin-left: 1px; }
#p9B05Page .p9b5-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9B05Page .p9b5-layout .beds { font-size: 13.5px; color: var(--p9b5-sub); }
#p9B05Page .p9b5-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9b5-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9B05Page .p9b5-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9b5-sub);
}
/* ── 편의시설 ── */
#p9B05Page .p9b5-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9B05Page .p9b5-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9b5-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9B05Page .p9b5-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9B05Page .p9b5-fac .cell {
border: 1px solid var(--p9b5-line); border-radius: 14px; padding: 22px 20px;
}
#p9B05Page .p9b5-fac .cell svg { margin-bottom: 14px; }
#p9B05Page .p9b5-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9B05Page .p9b5-fac .fdesc { font-size: 13.5px; color: var(--p9b5-sub); }
#p9B05Page .p9b5-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9b5-line);
}
#p9B05Page .p9b5-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9B05Page .p9b5-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9B05Page .p9b5-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9B05Page .p9b5-fac a.cell:hover { background: var(--p9b5-bg-soft); }
#p9B05Page .p9b5-fac b { display: flex; align-items: center; gap: 6px; }
#p9B05Page .p9b5-fac .farrow { transition: transform .15s; }
#p9B05Page .p9b5-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9B05Page .p9b5-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9B05Page .p9b5-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9b5-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9B05Page .p9b5-deal:hover { background: var(--p9b5-bg-soft); }
#p9B05Page .p9b5-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9b5-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9B05Page .p9b5-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9B05Page .p9b5-deal p { margin: 0; font-size: 13.5px; color: var(--p9b5-sub); }
#p9B05Page .p9b5-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9b5-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9B05Page .p9b5-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9B05Page .p9b5-photos .cell:first-child { grid-column: 1 / -1; }
#p9B05Page .p9b5-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9B05Page .p9b5-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9b5Modal {
--p9b5-ink: #222222;
--p9b5-sub: #717171;
--p9b5-line: #ebebeb;
--p9b5-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9b5-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9b5Modal * { box-sizing: border-box; }
#p9b5Modal svg { display: block; flex: none; }
#p9b5Modal.on { display: flex; }
#p9b5Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9b5Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9b5Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9b5-line); flex: none;
}
#p9b5Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9b5Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9b5-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9b5Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9b5-ink); line-height: 0;
}
#p9b5Modal .mclose:hover { background: var(--p9b5-bg-soft); }
#p9b5Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9b5Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9b5Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9b5-sub);
}
#p9b5Modal.fallback .mfall { display: flex; }
#p9b5Modal.fallback iframe { visibility: hidden; }
#p9b5Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9b5-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9b5-ink); text-decoration: none;
}
#p9B05Page .p9b5-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9b5-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9B05Page .p9b5-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9B05Page { padding: 8px 16px 56px; }
#p9B05Page .p9b5-gallery { grid-template-rows: 112px 112px; }
#p9B05Page .p9b5-h1 { font-size: 22px; }
#p9B05Page .p9b5-amen { grid-template-columns: 1fr; }
#p9B05Page .p9b5-layout { grid-template-columns: 1fr; gap: 10px; }
#p9B05Page .p9b5-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9B05Page .p9b5-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9B05Page .p9b5-layout .cell .txt { flex: 1; min-width: 0; }
#p9B05Page .p9b5-cap { margin-top: 8px; }
#p9B05Page .p9b5-fac { grid-template-columns: 1fr; }
#p9b5Modal { padding: 0; }
#p9b5Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9B05Page .p9b5-photos img { height: 145px; }
#p9B05Page .p9b5-photos .cell:first-child img { height: 215px; }
#p9B05Page .p9b5-topbar { flex-wrap: wrap; }
#p9B05Page .p9b5-crumb { order: 2; width: 100%; }
#p9B05Page .p9b5-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9B05Page">
<div class="p9b5-topbar">
<div class="p9b5-crumb" data-t="crumb"></div>
<div class="p9b5-actions">
<div class="p9b5-lang" role="group" aria-label="Language">
<button type="button" data-p9b5-lang="ko" class="on">한국어</button>
<button type="button" data-p9b5-lang="en">EN</button>
<button type="button" data-p9b5-lang="zh">繁中</button>
<button type="button" data-p9b5-lang="cn">简中</button>
</div>
<button class="p9b5-share" type="button" data-p9b5-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9b5-gallery" id="p9b5Gallery"></div>
<h1 class="p9b5-h1">[B05] Ocean Artisan</h1>
<p class="p9b5-stats" data-t="stats"></p>
<p class="p9b5-stats2" data-t="stats2"></p>
<hr class="p9b5-divider">
<div class="p9b5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9b5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9b5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="infoT"></h2>
<p class="p9b5-h2sub" data-t="infoS"></p>
<div class="p9b5-info">
<div class="p9b5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9b5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9b5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="layoutT"></h2>
<p class="p9b5-h2sub" data-t="layoutS"></p>
<div class="p9b5-layout" id="p9b5Layout"></div>
<div class="p9b5-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="amenT"></h2>
<p class="p9b5-h2sub" data-t="amenS"></p>
<div class="p9b5-amen" id="p9b5Amen"></div>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="addonT"></h2>
<p class="p9b5-h2sub" data-t="addonS"></p>
<div class="p9b5-fac" id="p9b5Fac"></div>
<div class="p9b5-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9b5-divider">
<a class="p9b5-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="photoT"></h2>
<p class="p9b5-h2sub" data-t="photoS"></p>
<div class="p9b5-photos" id="p9b5Photos"></div>
<hr class="p9b5-divider">
<h2 class="p9b5-h2" data-t="ryoT"></h2>
<p class="p9b5-h2sub" data-t="ryoS"></p>
<div class="p9b5-photos" id="p9b5Ryokan"></div>
<div class="p9b5-modal" id="p9b5Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9b5-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9b5ModalTitle"></div>
<a class="mnew" id="p9b5ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9b5-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9b5ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9b5ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9b5-toast" id="p9b5Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 오션뷰 (대표) */
IMG + 'attachment%3A2ef9af16-cf18-4b21-a1d7-6a4c74ad3d8e%3A%EC%98%A4%EC%85%98%EB%B7%B0_%EB%BD%90%EB%83%84%EC%83%B7-1.jpg&blockId=393855f1-e498-804e-827e-e4b5474bc2fa',
/* 오른쪽 위 — 거실 */
IMG + 'attachment%3A80508fe5-11a8-4e82-8faf-ca61007f66cc%3A%EA%B1%B0%EC%8B%A4_%EA%B3%B5%EA%B0%84%EC%83%B7-1.jpg&blockId=393855f1-e498-801d-9094-fec956466525',
/* 오른쪽 아래 — 객실 */
IMG + 'attachment%3A2eb12d69-a2ef-4639-b49d-ac42cf9145f5%3A%EA%B0%9D%EC%8B%A4%281%EB%B2%88%EB%B0%A9%29.png&blockId=393855f1-e498-8064-9c4d-c320dfa7c919'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: ['queen','mattress'],
cap: { ko: '침실 4', en: 'Bedroom 4', zh: '臥室 4', cn: '卧室 4' },
beds: { ko: '퀸 침대 1개 · 매트리스 1개', en: '1 queen bed · 1 floor mattress', zh: 'Queen床 1張 · 床墊 1組', cn: 'Queen床 1张 · 床垫 1组' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '객실 내 세탁기 · 건조기', en: 'In-room washer & dryer', zh: '客房內洗衣機 · 烘乾機', cn: '客房内洗衣机 · 烘干机' },
{ ko: '냄비 · 프라이팬', en: 'Pots & frying pans', zh: '鍋具 · 平底鍋', cn: '锅具 · 平底锅' },
{ ko: '화장대 · 드라이기', en: 'Vanity & hair dryer', zh: '化妝台 · 吹風機', cn: '化妆台 · 吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 오션뷰 (대표) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 객실 (대표) */
IMG + 'attachment%3Aaf1a92af-a84f-4e58-954b-d185e90a8627%3A%EC%98%A4%EC%85%98%EB%B7%B0_%EB%BD%90%EB%83%84%EC%83%B7-2.jpg&blockId=393855f1-e498-8035-bb7b-c038fdf00d96',
IMG + 'attachment%3Aa773fc66-8c24-4b1a-be40-a2ccd8605270%3A%EC%98%A4%EC%85%98%EB%B7%B0_%EB%BD%90%EB%83%84%EC%83%B7-3.jpg&blockId=393855f1-e498-80de-9b12-ed54d05f08a2',
IMG + 'attachment%3A649e6291-cdce-4968-a8ae-96c17d42ebe8%3A%EC%98%A4%EC%85%98%EB%B7%B0_%EA%B0%90%EC%84%B1%EC%83%B7.jpg&blockId=393855f1-e498-80ea-8b82-ffb72f994d10',
IMG + 'attachment%3A4932b706-7047-453a-8644-9c7c59fad939%3A_%EB%A9%94%EC%9D%B8%EC%82%AC%EC%A7%84-1.jpg&blockId=393855f1-e498-80b1-9980-efca82cc0f72',
IMG + 'attachment%3Acc6d6d58-2b3a-4914-8055-969810885f47%3A%EA%B1%B0%EC%8B%A4_%EA%B3%B5%EA%B0%84%EC%83%B7-2.jpg&blockId=393855f1-e498-8043-9477-ed01b1eb750c',
IMG + 'attachment%3Acd8dd673-ebef-4c20-8c47-cd9bd512ab66%3A%EA%B1%B0%EC%8B%A4_%EA%B3%B5%EA%B0%84%EC%83%B7-3.jpg&blockId=393855f1-e498-80d1-816d-de112d11bc6c',
IMG + 'attachment%3A7303f11a-3a95-4cc4-8f94-dc5527015b80%3A%EA%B1%B0%EC%8B%A4_%EA%B3%B5%EA%B0%84%EC%83%B7-4.png&blockId=393855f1-e498-806b-b1f0-f2ebcbf6f0dd',
IMG + 'attachment%3Aaa37f251-81a2-425d-bc76-1f4f8682fb71%3A%EC%A3%BC%EB%B0%A9_%EA%B0%90%EC%84%B1%EC%83%B7.png&blockId=393855f1-e498-8014-a26b-dba7e2cc5997',
IMG + 'attachment%3A51914acc-e986-4cd2-9489-3bac83aaf365%3A%EA%B0%9D%EC%8B%A4%282%EB%B2%88%EB%B0%A9%29.png&blockId=393855f1-e498-80df-9a09-c978be2d42fe',
IMG + 'attachment%3Aca270b31-e1f9-4c7e-81a8-5281d6acaaba%3A%EA%B0%9D%EC%8B%A4%283%EB%B2%88%EB%B0%A9%29.png&blockId=393855f1-e498-809f-bd0c-f3d1c57f5a89',
IMG + 'attachment%3A3b3aa761-8b40-4726-a1fd-c14162ac5994%3A%EC%9A%95%EC%8B%A4_%EA%B0%90%EC%84%B1%EC%83%B7.jpg&blockId=393855f1-e498-8036-b5af-c52f877eea86',
IMG + 'attachment%3A583eddb4-19c9-4532-be3b-d3ea26f76955%3A%EC%9A%95%EC%8B%A4-1.jpg&blockId=393855f1-e498-8096-86c6-f40612cc2ef2',
IMG + 'attachment%3A5dd59d5f-c6bc-46de-b727-e269f0dce3a2%3A%EC%9A%95%EC%8B%A4-2.png&blockId=393855f1-e498-80d0-8bfd-cb09219019f4',
IMG + 'attachment%3A0c3a541f-4a49-40aa-a855-5d91c86a777d%3A%ED%99%94%EC%9E%A5%EB%8C%80%EC%83%B7-1.png&blockId=393855f1-e498-8027-b84e-d820a6fa1694'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/b05';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[B05] Ocean Artisan</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[B05] Ocean Artisan</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[B05] Ocean Artisan</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[B05] Ocean Artisan</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 15명',
en: '6 guests standard · up to 15',
zh: '基準6人 · 最多15人',
cn: '基准6人 · 最多15人' });
I18N.set('stats2', {
ko: '방 4개 · 침대 7개 · 매트리스 1개 · 화장실 2개 · 60평대',
en: '4 bedrooms · 7 beds · 1 mattress · 2 bathrooms · approx. 198㎡',
zh: '4房 · 7床 · 床墊1組 · 2衛浴 · 約198㎡',
cn: '4房 · 7床 · 床垫1组 · 2卫浴 · 约198㎡' });
I18N.set('feat1t', { ko: '감성적인 인테리어의 오션뷰', en: 'An ocean view with artisan interiors', zh: '質感空間中的海景', cn: '质感空间中的海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Ocean Artisan — 손맛이 느껴지는 인테리어와 함께 송정 바다가 펼쳐져요.',
en: 'True to its name, Ocean Artisan — carefully crafted interiors paired with a view of the Songjeong sea.',
zh: '如其名 Ocean Artisan——匠心打造的空間,搭配松亭海景。',
cn: '如其名 Ocean Artisan——匠心打造的空间,搭配松亭海景。' });
I18N.set('feat2t', { ko: '방 4개 · 60평대 단독 공간', en: '4 bedrooms across ~198㎡, all yours', zh: '4間臥室 · 約198㎡獨立空間', cn: '4间卧室 · 约198㎡独立空间' });
I18N.set('feat2d', {
ko: '한 층 전체를 한 팀만 사용해요. 방이 4개라 단체도 나눠 쓰기 편해요. (최대 15명)',
en: 'The entire floor is yours alone, with four bedrooms so a large group can spread out. (Up to 15 guests)',
zh: '整層樓由一組客人獨享,4間臥室讓團體分房更方便(最多15人)。',
cn: '整层楼由一组客人独享,4间卧室让团体分房更方便(最多15人)。' });
I18N.set('feat3t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat3d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 15명', en: '6 guests standard · up to 15', zh: '基準6人 · 最多15人', cn: '基准6人 · 最多15人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '60평대 · 방 4 · 화장실 2 · 거실 · 주방', en: '~198㎡ · 4BR · 2BA · living room · kitchen', zh: '約198㎡ · 4房 · 2衛浴 · 客廳 · 廚房', cn: '约198㎡ · 4房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '60평대에 방 4개. 단체가 방을 나눠 쓰기 좋은 구조예요.',
en: 'Four bedrooms across ~198㎡ — easy for a large group to split up comfortably.',
zh: '約198㎡配置4間臥室,團體分房使用相當方便。',
cn: '约198㎡配置4间卧室,团体分房使用相当方便。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '방 4개에 퀸 침대 7개. 퀸은 2명, 매트리스는 1명이 잘 수 있어요.',
en: 'Four bedrooms with seven queen beds — a queen sleeps two, and the floor mattress sleeps one.',
zh: '4間臥室共7張Queen床。Queen床可睡2人,床墊可睡1人。',
cn: '4间卧室共7张Queen床。Queen床可睡2人,床垫可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 7개 · 매트리스 1개 = 최대 15명 (기준 6명)',
en: '7 queen beds · 1 mattress = up to 15 guests (6 standard)',
zh: 'Queen床7張 · 床墊1組 = 最多15人(基準6人)',
cn: 'Queen床7张 · 床垫1组 = 最多15人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '자쿠지는 예약이 필요하고, 세탁은 머무는 동안 언제든 신청할 수 있어요. B동은 숯불바베큐와 루프탑 풀은 이용할 수 없어요.',
en: 'The jacuzzi requires a reservation; laundry can be requested anytime. Note that the BBQ and rooftop pool are not available in Building B.',
zh: '湯屋需預約,洗衣服務住宿期間隨時可申請。B館無法使用炭火燒烤與頂樓泳池。',
cn: '汤屋需预约,洗衣服务住宿期间随时可申请。B馆无法使用炭火烧烤与顶楼泳池。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰, 거실, 주방, 침실, 그리고 욕실까지.',
en: 'The ocean view, living room, kitchen, bedrooms, and bathrooms.',
zh: '海景、客廳、廚房、臥室,以及衛浴。',
cn: '海景、客厅、厨房、卧室,以及卫浴。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 B05 Ocean Artisan', en: 'Penton Nine B05 Ocean Artisan', zh: 'Penton Nine B05 Ocean Artisan', cn: 'Penton Nine B05 Ocean Artisan' });
I18N.set('shareTitle', { ko: '펜톤나인 [B05] Ocean Artisan', en: 'Penton Nine [B05] Ocean Artisan', zh: 'Penton Nine [B05] Ocean Artisan', cn: 'Penton Nine [B05] Ocean Artisan' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9B05Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9b5Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9b5-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9b5-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9b5Photos', PHOTOS);
buildPhotoGrid('p9b5Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9b5-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9b5Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9b5-main' : '';
html += imgOrPh(GALLERY[i], 'p9b5-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9b5Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9b5-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9b5Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9b5-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9b5Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9b5Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9B05Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9b5Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9b5-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9b5-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9b5-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9b5-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9b5Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9b5-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9b5Modal');
var frame = document.getElementById('p9b5ModalFrame');
if (!m || !frame) return;
document.getElementById('p9b5ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9b5ModalNew');
var fallLink = document.getElementById('p9b5ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9b5Modal');
var frame = document.getElementById('p9b5ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[B05] Ocean Artisan
기본 6명 / 최대 15명
방 4개
침대 7개
화장실 2개
오션뷰
자쿠지
<!-- 펜톤나인 [C02] Beach Rail 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9C02Page {
--p9c2-ink: #222222;
--p9c2-sub: #717171;
--p9c2-line: #ebebeb;
--p9c2-accent: #FF385C;
--p9c2-bg-soft: #f7f7f7;
}
#p9C02Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c2-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9C02Page * { box-sizing: border-box; }
#p9C02Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9C02Page .p9c2-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9c2-sub);
}
#p9C02Page .p9c2-crumb { min-width: 0; }
#p9C02Page .p9c2-crumb b { color: var(--p9c2-ink); font-weight: 600; }
#p9C02Page .p9c2-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9C02Page .p9c2-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9c2-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9C02Page .p9c2-share:hover { background: var(--p9c2-bg-soft); }
#p9C02Page .p9c2-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9c2-line); border-radius: 999px; padding: 3px;
}
#p9C02Page .p9c2-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9c2-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9C02Page .p9c2-lang button.on { background: var(--p9c2-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9C02Page .p9c2-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9C02Page .p9c2-gallery .p9c2-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9C02Page .p9c2-gallery .p9c2-main { grid-row: 1 / 3; }
#p9C02Page .p9c2-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9C02Page .p9c2-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9C02Page .p9c2-stats { font-size: 15px; color: var(--p9c2-ink); margin: 0 0 4px; font-weight: 500; }
#p9C02Page .p9c2-stats2 { font-size: 14px; color: var(--p9c2-sub); margin: 0; }
#p9C02Page .p9c2-divider { border: none; border-top: 1px solid var(--p9c2-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9C02Page .p9c2-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9C02Page .p9c2-feat + .p9c2-feat { border-top: 1px solid var(--p9c2-line); }
#p9C02Page .p9c2-feat svg { margin-top: 2px; }
#p9C02Page .p9c2-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9C02Page .p9c2-feat p { margin: 0; font-size: 14px; color: var(--p9c2-sub); }
/* ── 섹션 제목 ── */
#p9C02Page .p9c2-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9C02Page .p9c2-h2sub { font-size: 14px; color: var(--p9c2-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9C02Page .p9c2-info { border: 1px solid var(--p9c2-line); border-radius: 14px; padding: 24px; }
#p9C02Page .p9c2-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9C02Page .p9c2-infoitem + .p9c2-infoitem { border-top: 1px solid var(--p9c2-line); }
#p9C02Page .p9c2-infoitem svg { margin-top: 2px; }
#p9C02Page .p9c2-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9C02Page .p9c2-infoitem span { font-size: 13px; color: var(--p9c2-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9C02Page .p9c2-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9C02Page .p9c2-layout .cell {
border: 1px solid var(--p9c2-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9C02Page .p9c2-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9C02Page .p9c2-layout .cell svg { margin-bottom: 0; }
#p9C02Page .p9c2-layout .cell .txt { width: 100%; }
#p9C02Page .p9c2-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9c2-sub); align-self: center; margin-left: 1px; }
#p9C02Page .p9c2-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9C02Page .p9c2-layout .beds { font-size: 13.5px; color: var(--p9c2-sub); }
#p9C02Page .p9c2-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9c2-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9C02Page .p9c2-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9c2-sub);
}
/* ── 편의시설 ── */
#p9C02Page .p9c2-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9C02Page .p9c2-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9c2-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9C02Page .p9c2-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9C02Page .p9c2-fac .cell {
border: 1px solid var(--p9c2-line); border-radius: 14px; padding: 22px 20px;
}
#p9C02Page .p9c2-fac .cell svg { margin-bottom: 14px; }
#p9C02Page .p9c2-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9C02Page .p9c2-fac .fdesc { font-size: 13.5px; color: var(--p9c2-sub); }
#p9C02Page .p9c2-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9c2-line);
}
#p9C02Page .p9c2-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9C02Page .p9c2-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9C02Page .p9c2-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9C02Page .p9c2-fac a.cell:hover { background: var(--p9c2-bg-soft); }
#p9C02Page .p9c2-fac b { display: flex; align-items: center; gap: 6px; }
#p9C02Page .p9c2-fac .farrow { transition: transform .15s; }
#p9C02Page .p9c2-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9C02Page .p9c2-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9C02Page .p9c2-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9c2-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9C02Page .p9c2-deal:hover { background: var(--p9c2-bg-soft); }
#p9C02Page .p9c2-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9c2-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9C02Page .p9c2-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9C02Page .p9c2-deal p { margin: 0; font-size: 13.5px; color: var(--p9c2-sub); }
#p9C02Page .p9c2-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9c2-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9C02Page .p9c2-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9C02Page .p9c2-photos .cell:first-child { grid-column: 1 / -1; }
#p9C02Page .p9c2-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9C02Page .p9c2-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9c2Modal {
--p9c2-ink: #222222;
--p9c2-sub: #717171;
--p9c2-line: #ebebeb;
--p9c2-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c2-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9c2Modal * { box-sizing: border-box; }
#p9c2Modal svg { display: block; flex: none; }
#p9c2Modal.on { display: flex; }
#p9c2Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9c2Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9c2Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9c2-line); flex: none;
}
#p9c2Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9c2Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9c2-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9c2Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9c2-ink); line-height: 0;
}
#p9c2Modal .mclose:hover { background: var(--p9c2-bg-soft); }
#p9c2Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9c2Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9c2Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9c2-sub);
}
#p9c2Modal.fallback .mfall { display: flex; }
#p9c2Modal.fallback iframe { visibility: hidden; }
#p9c2Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9c2-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9c2-ink); text-decoration: none;
}
#p9C02Page .p9c2-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9c2-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9C02Page .p9c2-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9C02Page { padding: 8px 16px 56px; }
#p9C02Page .p9c2-gallery { grid-template-rows: 112px 112px; }
#p9C02Page .p9c2-h1 { font-size: 22px; }
#p9C02Page .p9c2-amen { grid-template-columns: 1fr; }
#p9C02Page .p9c2-layout { grid-template-columns: 1fr; gap: 10px; }
#p9C02Page .p9c2-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9C02Page .p9c2-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9C02Page .p9c2-layout .cell .txt { flex: 1; min-width: 0; }
#p9C02Page .p9c2-cap { margin-top: 8px; }
#p9C02Page .p9c2-fac { grid-template-columns: 1fr; }
#p9c2Modal { padding: 0; }
#p9c2Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9C02Page .p9c2-photos img { height: 145px; }
#p9C02Page .p9c2-photos .cell:first-child img { height: 215px; }
#p9C02Page .p9c2-topbar { flex-wrap: wrap; }
#p9C02Page .p9c2-crumb { order: 2; width: 100%; }
#p9C02Page .p9c2-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9C02Page">
<div class="p9c2-topbar">
<div class="p9c2-crumb" data-t="crumb"></div>
<div class="p9c2-actions">
<div class="p9c2-lang" role="group" aria-label="Language">
<button type="button" data-p9c2-lang="ko" class="on">한국어</button>
<button type="button" data-p9c2-lang="en">EN</button>
<button type="button" data-p9c2-lang="zh">繁中</button>
<button type="button" data-p9c2-lang="cn">简中</button>
</div>
<button class="p9c2-share" type="button" data-p9c2-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9c2-gallery" id="p9c2Gallery"></div>
<h1 class="p9c2-h1">[C02] Beach Rail</h1>
<p class="p9c2-stats" data-t="stats"></p>
<p class="p9c2-stats2" data-t="stats2"></p>
<hr class="p9c2-divider">
<div class="p9c2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9c2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9c2-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9c2-divider">
<h2 class="p9c2-h2" data-t="infoT"></h2>
<p class="p9c2-h2sub" data-t="infoS"></p>
<div class="p9c2-info">
<div class="p9c2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9c2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9c2-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9c2-divider">
<h2 class="p9c2-h2" data-t="layoutT"></h2>
<p class="p9c2-h2sub" data-t="layoutS"></p>
<div class="p9c2-layout" id="p9c2Layout"></div>
<div class="p9c2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9c2-divider">
<h2 class="p9c2-h2" data-t="amenT"></h2>
<p class="p9c2-h2sub" data-t="amenS"></p>
<div class="p9c2-amen" id="p9c2Amen"></div>
<hr class="p9c2-divider">
<h2 class="p9c2-h2" data-t="addonT"></h2>
<p class="p9c2-h2sub" data-t="addonS"></p>
<div class="p9c2-fac" id="p9c2Fac"></div>
<div class="p9c2-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9c2-divider">
<a class="p9c2-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9c2-divider">
<h2 class="p9c2-h2" data-t="photoT"></h2>
<p class="p9c2-h2sub" data-t="photoS"></p>
<div class="p9c2-photos" id="p9c2Photos"></div>
<div class="p9c2-modal" id="p9c2Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9c2-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9c2ModalTitle"></div>
<a class="mnew" id="p9c2ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9c2-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9c2ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9c2ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9c2-toast" id="p9c2Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 메인샷 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcd8ed4f1-0870-4bba-91f8-819dd0bb0b90%2FC02_%25EB%25A9%2594%25EC%259D%25B8%25EC%2583%25B7.jpg&blockId=139855f1-e498-807d-9d46-f8148ffa3820',
/* 오른쪽 위 — 거실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1a6e63df-1abb-41bf-825d-18d427b637bf%2FC02_%25EA%25B1%25B0%25EC%258B%25A4.jpg&blockId=139855f1-e498-8064-be34-ec553ecce28a',
/* 오른쪽 아래 — 객실 내 온수욕조 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F11d51b6c-972e-4aa5-ae5e-77456b12d2a4%2FC03_%25EC%259A%2595%25EC%25A1%25B01.jpg&blockId=139855f1-e498-800b-9526-e71ba2f35f7f'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: 'family',
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '패밀리 침대', en: 'Family bed', zh: '家庭床', cn: '家庭床' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } },
{ icon: [{ t: 'mattress', n: 3 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 3개', en: '3 floor mattresses', zh: '床墊 3組', cn: '床垫 3组' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '프라이빗 숯불바베큐', en: 'Private charcoal BBQ', zh: '私人炭火燒烤', cn: '私人炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '선착순 예약 필수', en: 'First-come reservation', zh: '需先預約(先到先得)', cn: '需先预约(先到先得)' } },
{ icon: 'jacuzzi', price: '무료',
name: { ko: '객실 내 온수욕조', en: 'In-room hot tub', zh: '客房內溫水浴缸', cn: '客房内温水浴缸' },
desc: { ko: '객실 안에 온수욕조가 있어요. 예약 없이 언제든, 온수도 무료로 사용하세요.',
en: 'A hot tub right inside your room — use it anytime, hot water included at no extra charge.',
zh: '客房內附設溫水浴缸,無需預約隨時可用,熱水免費。',
cn: '客房内附设温水浴缸,无需预约随时可用,热水免费。' },
tag: { ko: '온수 무료 · 예약 불필요', en: 'Hot water free · no booking', zh: '熱水免費 · 免預約', cn: '热水免费 · 免预约' } },
{ icon: 'pool', price: '무료', link: 'https://www.penton9.com/pool',
name: { ko: '루프탑 야외 풀', en: 'Rooftop outdoor pool', zh: '頂樓戶外泳池', cn: '顶楼户外泳池' },
desc: { ko: '시간대별 예약제로 운영되는 루프탑 풀이에요. 이용료는 무료.',
en: 'A rooftop pool run on hourly reservations — free to use.',
zh: '採時段預約制的頂樓泳池,免費使用。',
cn: '采用时段预约制的顶楼泳池,免费使用。' },
tag: { ko: '5~9월 시즌 · 예약 필요', en: 'May–Sep season · booking required', zh: '5~9月開放 · 需預約', cn: '5~9月开放 · 需预约' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: '객실 내 온수욕조', en: 'In-room hot tub', zh: '客房內溫水浴缸', cn: '客房内温水浴缸' },
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '냄비 · 프라이팬', en: 'Pots & frying pans', zh: '鍋具 · 平底鍋', cn: '锅具 · 平底锅' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '화장대 · 드라이기', en: 'Vanity & hair dryer', zh: '化妝台 · 吹風機', cn: '化妆台 · 吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 메인샷 (대표) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 온수욕조 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3bec79ce-4720-4d88-b23d-19b37e4ce3cb%2FC02_%25EB%25A9%2594%25EC%259D%25B8%25EC%2583%25B7.jpg&blockId=139855f1-e498-80d7-8b8b-c1c3e6b47028',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F84924499-1a3e-4f24-9882-6b62f209fc4c%2FC02_%25EC%258B%259D%25ED%2583%2581.jpg&blockId=139855f1-e498-80af-8acc-cc989af0990e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6a179c70-66e5-40a7-aa40-74be22b2ede5%2FC02_%25EC%25A3%25BC%25EB%25B0%25A9.jpg&blockId=139855f1-e498-8099-8195-fe46b473e369',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1805d9fe-9358-44e9-9fdd-f27bc0d0bce9%2FC03_%25EA%25B0%259D%25EC%258B%25A41.png&blockId=139855f1-e498-805e-a9cc-ff2ed5b0457e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc2d7a354-36ae-4f60-969e-28c711035dd3%2FC03_%25EA%25B0%259D%25EC%258B%25A42.png&blockId=139855f1-e498-80e7-b3ed-cd5ed47cd265',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3808347c-64d4-4468-95bd-de8f0cb895be%2FC03_%25EA%25B1%25B0%25EC%258B%25A43.jpg&blockId=139855f1-e498-8037-9ac9-d3e7ccce5122',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F10a99dcd-4d7f-46e1-9f5d-a9a7131e082a%2FC03_%25EA%25B1%25B0%25EC%258B%25A44.jpg&blockId=139855f1-e498-8022-b474-df759aaeae7b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F52fc6736-740f-4456-bd5e-062509d39022%2FC03_%25EA%25B1%25B0%25EC%258B%25A45.jpg&blockId=139855f1-e498-80f0-b7ab-c1686dd4d544',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F52dab889-416e-4edf-84f0-9cb518174d06%2FC03_%25EA%25B1%25B0%25EC%258B%25A46.jpg&blockId=139855f1-e498-8027-8a63-fcbb40bf3063',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1ee55f7a-05e8-4311-841e-b06df51e3196%2Froom1.png&blockId=139855f1-e498-803e-a92f-de62e1ca6770',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F32ff4e6b-58c7-468b-b987-b151de7ccd67%2Froom2.png&blockId=139855f1-e498-809f-b65b-d300d4acdf47',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F03ddc4f1-8892-4f39-a22d-e862ced9fa5c%2Froom3.png&blockId=139855f1-e498-8093-9da3-c81c772552c2',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6a47b02f-328d-4a25-bf0c-dc29423314af%2FC04_%25EA%25B0%259D%25EC%258B%25A42.png&blockId=139855f1-e498-8027-b074-f09dc70a4d6d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F023476cc-6298-4976-b665-b3fe48268c08%2FC03_%25EC%258B%259D%25ED%2583%25811.jpg&blockId=139855f1-e498-80ae-aa02-d4ea7cfe8d17',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe9348560-2bcd-477a-9182-d3c18947818f%2FC03_%25EC%258B%259D%25ED%2583%25812.jpg&blockId=139855f1-e498-80f5-87d6-d89783040f37',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb242dc9e-1a4c-4cdf-b8bb-4dd2af64508c%2FC03_%25EC%258B%259D%25ED%2583%25813.jpg&blockId=139855f1-e498-8012-9f6b-e570017b7cf6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fed44d40f-4128-4b10-9004-318d85294341%2FC03_%25EC%258B%259D%25ED%2583%25814.jpg&blockId=139855f1-e498-8020-9a00-e437cdce3654',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F56aec29c-f76f-4a90-863a-6800efae9233%2FC03_%25EC%258B%259D%25ED%2583%25815.jpg&blockId=139855f1-e498-800e-b267-eb599eab1f4d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1512b719-b74b-41ec-9313-df18d3ca5b61%2FC03_%25EC%259A%2595%25EC%25A1%25B02.jpg&blockId=139855f1-e498-8057-bb0f-ee3bfd185490',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F91a726ae-33d5-43cf-98c4-da3620740161%2FC03_%25EC%259A%2595%25EC%25A1%25B03.jpg&blockId=139855f1-e498-80e0-87ec-edc184304fd9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5c944f9a-270a-48d7-a6c9-68cf99ee73e9%2FC03_%25EC%259A%2595%25EC%25A1%25B04.jpg&blockId=139855f1-e498-8026-a12a-c0c13a3e5c6b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fce7b679e-0f31-443c-b8bc-fee7f177612c%2FC03_%25EC%259A%2595%25EC%25A1%25B05.jpg&blockId=139855f1-e498-8037-9f30-e2cad4d9ecaf',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fde233611-722b-4e40-9293-7c00acd3a033%2FC03_%25EC%259A%2595%25EC%25A1%25B06.jpg&blockId=139855f1-e498-8058-a420-d53945928b13',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5f5550a0-cb1a-4ae3-9629-5f84d6d3f549%2FC03_%25EC%25A3%25BC%25EB%25B0%25A91.jpg&blockId=139855f1-e498-80e4-9022-f397cfa93ca7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ffa70b754-ac88-4012-ab93-7817d57c8e4d%2FC03_%25EC%25A3%25BC%25EB%25B0%25A92.jpg&blockId=139855f1-e498-809c-824b-f5615f4661fb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc3639483-12e6-4253-8c9b-d3fa0f89d3c2%2F20241103_130747.jpg&blockId=13e855f1-e498-80a9-a429-cb37a0ca07fc',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbfd12ffc-4f98-4c16-b087-67e3e5251c8b%2F20241103_192446.jpg&blockId=13e855f1-e498-80d0-866e-c7b80135dbf2',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F69de815a-b147-477e-a176-39cc3084d9ac%2F20241103_192538.jpg&blockId=13e855f1-e498-80fb-80bc-d88330b9f440',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff4d410b2-9a2a-442f-83e1-f02594fe8a7f%2F20241103_193353%280%29.jpg&blockId=13e855f1-e498-8036-a13c-c1236a2d51ba',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fabec9e74-8910-4a88-889a-d72366947ad6%2F20241104_095016.jpg&blockId=13e855f1-e498-807e-a978-fc3fcc521f66',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc7c58c1f-fc44-427a-9259-2f1df693bead%2F20241104_095155.jpg&blockId=13e855f1-e498-8057-9df1-d53c14daf5dd',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe75477eb-2f16-4e97-9c8b-b8c8011e2e21%2FDAT1.png&blockId=13e855f1-e498-8054-a9d5-ce893cee9f3a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6d8f2b8e-91bc-40ca-a35f-0b5d31adfb4c%2FNIGHT1.png&blockId=13e855f1-e498-8075-8d4e-c1aa6b09be0c',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3f92f590-4b3d-4793-b8c2-f84dcb8c509a%2FNIGHT3.jpg&blockId=13e855f1-e498-80b1-bc4b-f92730394e86',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2c1c6a83-aab4-4066-9d3a-d2317b56f1bb%2F20241103_130249.jpg&blockId=13e855f1-e498-807a-a847-c33d3b3b3c2a'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/c02';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[C02] Beach Rail</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[C02] Beach Rail</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[C02] Beach Rail</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[C02] Beach Rail</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 14명',
en: '6 guests standard · up to 14',
zh: '基準6人 · 最多14人',
cn: '基准6人 · 最多14人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 3개 · 화장실 2개 · 40평',
en: '3 bedrooms · 6 beds · 3 mattresses · 2 bathrooms · approx. 132㎡',
zh: '3房 · 6床 · 床墊3組 · 2衛浴 · 約132㎡',
cn: '3房 · 6床 · 床垫3组 · 2卫浴 · 约132㎡' });
I18N.set('feat1t', { ko: '객실 안에 온수욕조', en: 'A hot tub inside your room', zh: '客房內設溫水浴缸', cn: '客房内设温水浴缸' });
I18N.set('feat1d', {
ko: '따로 예약할 필요 없이, 우리 객실 안에서 언제든 온수욕조를 즐길 수 있어요. 온수도 무료!',
en: 'No booking needed — soak in the hot tub inside your own unit anytime. Hot water is free, too.',
zh: '無需另外預約,在自己的客房內隨時享受溫水浴缸,熱水也免費!',
cn: '无需另外预约,在自己的客房内随时享受温水浴缸,热水也免费!' });
I18N.set('feat2t', { ko: '루프탑 야외 풀 (무료)', en: 'Rooftop outdoor pool (free)', zh: '頂樓戶外泳池(免費)', cn: '顶楼户外泳池(免费)' });
I18N.set('feat2d', {
ko: '5~9월 시즌 동안 시간대별 예약제로 무료 이용할 수 있어요.',
en: 'Free to use during the May–September season, by hourly reservation.',
zh: '5~9月開放期間,採時段預約制免費使用。',
cn: '5~9月开放期间,采用时段预约制免费使用。' });
I18N.set('feat3t', { ko: '프라이빗 숯불바베큐', en: 'Private charcoal BBQ', zh: '私人炭火燒烤', cn: '私人炭火烧烤' });
I18N.set('feat3d', {
ko: '우리 팀만 쓰는 독립 공간에서 국산 참숯 바베큐를. 선착순이라 예약이 필요해요. (5만원)',
en: 'Korean charcoal BBQ in a space just for your group. First-come, so booking is required. (₩50,000)',
zh: '在專屬獨立空間享受韓國木炭燒烤。先到先得,需先預約。(5萬韓元)',
cn: '在专属独立空间享受韩国木炭烧烤。先到先得,需先预约。(5万韩元)' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 14명', en: '6 guests standard · up to 14', zh: '基準6人 · 最多14人', cn: '基准6人 · 最多14人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '40평 · 방 3 · 화장실 2 · 거실 · 주방', en: '~132㎡ · 3BR · 2BA · living room · kitchen', zh: '約132㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约132㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '객실 안에 온수욕조가 있고, 거실을 중심으로 방 3개가 이어져요.',
en: 'A hot tub sits inside the unit, with three bedrooms off the living room.',
zh: '客房內附設溫水浴缸,以客廳為中心連接3間臥室。',
cn: '客房内附设温水浴缸,以客厅为中心连接3间卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '퀸 침대는 2명, 패밀리 침대는 3명, 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two, the family bed sleeps three, and each floor mattress sleeps one.',
zh: 'Queen床可睡2人,家庭床可睡3人,加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,家庭床可睡3人,加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 4개 · 패밀리 침대 · 매트리스 3개 = 최대 14명 (기준 6명)',
en: '4 queens · 1 family bed · 3 mattresses = up to 14 guests (6 standard)',
zh: 'Queen床4張 · 家庭床 · 床墊3組 = 最多14人(基準6人)',
cn: 'Queen床4张 · 家庭床 · 床垫3组 = 最多14人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐와 루프탑 풀은 예약이 필요해요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'The BBQ and the rooftop pool require a reservation. Laundry can be requested anytime during your stay.',
zh: '燒烤與頂樓泳池需預約;洗衣服務住宿期間隨時可申請。',
cn: '烧烤与顶楼泳池需预约;洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '거실, 침실, 주방, 온수욕조, 그리고 루프탑 풀까지.',
en: 'Living room, bedrooms, kitchen, the hot tub, and the rooftop pool.',
zh: '客廳、臥室、廚房、溫水浴缸,以及頂樓泳池。',
cn: '客厅、卧室、厨房、温水浴缸,以及顶楼泳池。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 C02 Beach Rail', en: 'Penton Nine C02 Beach Rail', zh: 'Penton Nine C02 Beach Rail', cn: 'Penton Nine C02 Beach Rail' });
I18N.set('shareTitle', { ko: '펜톤나인 [C02] Beach Rail', en: 'Penton Nine [C02] Beach Rail', zh: 'Penton Nine [C02] Beach Rail', cn: 'Penton Nine [C02] Beach Rail' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9C02Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9c2Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9c2-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9c2-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9c2Photos', PHOTOS);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9c2-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9c2Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9c2-main' : '';
html += imgOrPh(GALLERY[i], 'p9c2-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9c2Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9c2-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9c2Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9c2-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9c2Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9c2Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9C02Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9c2Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9c2-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9c2-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9c2-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9c2-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9c2Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9c2-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9c2Modal');
var frame = document.getElementById('p9c2ModalFrame');
if (!m || !frame) return;
document.getElementById('p9c2ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9c2ModalNew');
var fallLink = document.getElementById('p9c2ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9c2Modal');
var frame = document.getElementById('p9c2ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[C02] Beach Rail
기본 6명 / 최대 14명
방 3개
침대 6개
화장실 2개
시티뷰
숯불바베큐
온수욕조
야외POOL
<!-- 펜톤나인 [C03] Wave Line 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9C03Page {
--p9c3-ink: #222222;
--p9c3-sub: #717171;
--p9c3-line: #ebebeb;
--p9c3-accent: #FF385C;
--p9c3-bg-soft: #f7f7f7;
}
#p9C03Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c3-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9C03Page * { box-sizing: border-box; }
#p9C03Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9C03Page .p9c3-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9c3-sub);
}
#p9C03Page .p9c3-crumb { min-width: 0; }
#p9C03Page .p9c3-crumb b { color: var(--p9c3-ink); font-weight: 600; }
#p9C03Page .p9c3-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9C03Page .p9c3-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9c3-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9C03Page .p9c3-share:hover { background: var(--p9c3-bg-soft); }
#p9C03Page .p9c3-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9c3-line); border-radius: 999px; padding: 3px;
}
#p9C03Page .p9c3-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9c3-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9C03Page .p9c3-lang button.on { background: var(--p9c3-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9C03Page .p9c3-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9C03Page .p9c3-gallery .p9c3-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9C03Page .p9c3-gallery .p9c3-main { grid-row: 1 / 3; }
#p9C03Page .p9c3-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9C03Page .p9c3-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9C03Page .p9c3-stats { font-size: 15px; color: var(--p9c3-ink); margin: 0 0 4px; font-weight: 500; }
#p9C03Page .p9c3-stats2 { font-size: 14px; color: var(--p9c3-sub); margin: 0; }
#p9C03Page .p9c3-divider { border: none; border-top: 1px solid var(--p9c3-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9C03Page .p9c3-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9C03Page .p9c3-feat + .p9c3-feat { border-top: 1px solid var(--p9c3-line); }
#p9C03Page .p9c3-feat svg { margin-top: 2px; }
#p9C03Page .p9c3-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9C03Page .p9c3-feat p { margin: 0; font-size: 14px; color: var(--p9c3-sub); }
/* ── 섹션 제목 ── */
#p9C03Page .p9c3-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9C03Page .p9c3-h2sub { font-size: 14px; color: var(--p9c3-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9C03Page .p9c3-info { border: 1px solid var(--p9c3-line); border-radius: 14px; padding: 24px; }
#p9C03Page .p9c3-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9C03Page .p9c3-infoitem + .p9c3-infoitem { border-top: 1px solid var(--p9c3-line); }
#p9C03Page .p9c3-infoitem svg { margin-top: 2px; }
#p9C03Page .p9c3-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9C03Page .p9c3-infoitem span { font-size: 13px; color: var(--p9c3-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9C03Page .p9c3-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9C03Page .p9c3-layout .cell {
border: 1px solid var(--p9c3-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9C03Page .p9c3-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9C03Page .p9c3-layout .cell svg { margin-bottom: 0; }
#p9C03Page .p9c3-layout .cell .txt { width: 100%; }
#p9C03Page .p9c3-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9c3-sub); align-self: center; margin-left: 1px; }
#p9C03Page .p9c3-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9C03Page .p9c3-layout .beds { font-size: 13.5px; color: var(--p9c3-sub); }
#p9C03Page .p9c3-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9c3-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9C03Page .p9c3-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9c3-sub);
}
/* ── 편의시설 ── */
#p9C03Page .p9c3-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9C03Page .p9c3-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9c3-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9C03Page .p9c3-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9C03Page .p9c3-fac .cell {
border: 1px solid var(--p9c3-line); border-radius: 14px; padding: 22px 20px;
}
#p9C03Page .p9c3-fac .cell svg { margin-bottom: 14px; }
#p9C03Page .p9c3-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9C03Page .p9c3-fac .fdesc { font-size: 13.5px; color: var(--p9c3-sub); }
#p9C03Page .p9c3-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9c3-line);
}
#p9C03Page .p9c3-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9C03Page .p9c3-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9C03Page .p9c3-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9C03Page .p9c3-fac a.cell:hover { background: var(--p9c3-bg-soft); }
#p9C03Page .p9c3-fac b { display: flex; align-items: center; gap: 6px; }
#p9C03Page .p9c3-fac .farrow { transition: transform .15s; }
#p9C03Page .p9c3-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9C03Page .p9c3-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9C03Page .p9c3-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9c3-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9C03Page .p9c3-deal:hover { background: var(--p9c3-bg-soft); }
#p9C03Page .p9c3-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9c3-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9C03Page .p9c3-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9C03Page .p9c3-deal p { margin: 0; font-size: 13.5px; color: var(--p9c3-sub); }
#p9C03Page .p9c3-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9c3-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9C03Page .p9c3-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9C03Page .p9c3-photos .cell:first-child { grid-column: 1 / -1; }
#p9C03Page .p9c3-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9C03Page .p9c3-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9c3Modal {
--p9c3-ink: #222222;
--p9c3-sub: #717171;
--p9c3-line: #ebebeb;
--p9c3-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c3-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9c3Modal * { box-sizing: border-box; }
#p9c3Modal svg { display: block; flex: none; }
#p9c3Modal.on { display: flex; }
#p9c3Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9c3Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9c3Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9c3-line); flex: none;
}
#p9c3Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9c3Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9c3-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9c3Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9c3-ink); line-height: 0;
}
#p9c3Modal .mclose:hover { background: var(--p9c3-bg-soft); }
#p9c3Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9c3Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9c3Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9c3-sub);
}
#p9c3Modal.fallback .mfall { display: flex; }
#p9c3Modal.fallback iframe { visibility: hidden; }
#p9c3Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9c3-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9c3-ink); text-decoration: none;
}
#p9C03Page .p9c3-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9c3-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9C03Page .p9c3-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9C03Page { padding: 8px 16px 56px; }
#p9C03Page .p9c3-gallery { grid-template-rows: 112px 112px; }
#p9C03Page .p9c3-h1 { font-size: 22px; }
#p9C03Page .p9c3-amen { grid-template-columns: 1fr; }
#p9C03Page .p9c3-layout { grid-template-columns: 1fr; gap: 10px; }
#p9C03Page .p9c3-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9C03Page .p9c3-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9C03Page .p9c3-layout .cell .txt { flex: 1; min-width: 0; }
#p9C03Page .p9c3-cap { margin-top: 8px; }
#p9C03Page .p9c3-fac { grid-template-columns: 1fr; }
#p9c3Modal { padding: 0; }
#p9c3Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9C03Page .p9c3-photos img { height: 145px; }
#p9C03Page .p9c3-photos .cell:first-child img { height: 215px; }
#p9C03Page .p9c3-topbar { flex-wrap: wrap; }
#p9C03Page .p9c3-crumb { order: 2; width: 100%; }
#p9C03Page .p9c3-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9C03Page">
<div class="p9c3-topbar">
<div class="p9c3-crumb" data-t="crumb"></div>
<div class="p9c3-actions">
<div class="p9c3-lang" role="group" aria-label="Language">
<button type="button" data-p9c3-lang="ko" class="on">한국어</button>
<button type="button" data-p9c3-lang="en">EN</button>
<button type="button" data-p9c3-lang="zh">繁中</button>
<button type="button" data-p9c3-lang="cn">简中</button>
</div>
<button class="p9c3-share" type="button" data-p9c3-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9c3-gallery" id="p9c3Gallery"></div>
<h1 class="p9c3-h1">[C03] Wave Line</h1>
<p class="p9c3-stats" data-t="stats"></p>
<p class="p9c3-stats2" data-t="stats2"></p>
<hr class="p9c3-divider">
<div class="p9c3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9c3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9c3-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9c3-divider">
<h2 class="p9c3-h2" data-t="infoT"></h2>
<p class="p9c3-h2sub" data-t="infoS"></p>
<div class="p9c3-info">
<div class="p9c3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9c3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9c3-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9c3-divider">
<h2 class="p9c3-h2" data-t="layoutT"></h2>
<p class="p9c3-h2sub" data-t="layoutS"></p>
<div class="p9c3-layout" id="p9c3Layout"></div>
<div class="p9c3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9c3-divider">
<h2 class="p9c3-h2" data-t="amenT"></h2>
<p class="p9c3-h2sub" data-t="amenS"></p>
<div class="p9c3-amen" id="p9c3Amen"></div>
<hr class="p9c3-divider">
<h2 class="p9c3-h2" data-t="addonT"></h2>
<p class="p9c3-h2sub" data-t="addonS"></p>
<div class="p9c3-fac" id="p9c3Fac"></div>
<div class="p9c3-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9c3-divider">
<a class="p9c3-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9c3-divider">
<h2 class="p9c3-h2" data-t="photoT"></h2>
<p class="p9c3-h2sub" data-t="photoS"></p>
<div class="p9c3-photos" id="p9c3Photos"></div>
<div class="p9c3-modal" id="p9c3Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9c3-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9c3ModalTitle"></div>
<a class="mnew" id="p9c3ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9c3-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9c3ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9c3ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9c3-toast" id="p9c3Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — 메인 (오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F721011ad-8510-4a16-becd-6fd96e32f8e2%2FC03_%25EB%25A9%2594%25EC%259D%25B8%25EC%259D%25B4%25EB%25AF%25B8%25EC%25A7%2580.jpg&blockId=137855f1-e498-803d-90d5-d8c470570483',
/* 오른쪽 위 — 거실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F14474176-c2d9-4e0a-9b5c-d8be18727896%2FC03_%25EA%25B1%25B0%25EC%258B%25A41.jpg&blockId=139855f1-e498-80a0-afd2-f75ea49f479f',
/* 오른쪽 아래 — 객실 내 온수욕조 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe0995991-2f49-4073-af03-21f3bf1bed02%2FC03_%25EC%259A%2595%25EC%25A1%25B01.jpg&blockId=139855f1-e498-80c4-b9fb-d7b26539ce6f'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: 'family',
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '패밀리 침대', en: 'Family bed', zh: '家庭床', cn: '家庭床' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } },
{ icon: [{ t: 'mattress', n: 3 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 3개', en: '3 floor mattresses', zh: '床墊 3組', cn: '床垫 3组' },
guest: { ko: '3명', en: '3 guests', zh: '3人', cn: '3人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '프라이빗 숯불바베큐', en: 'Private charcoal BBQ', zh: '私人炭火燒烤', cn: '私人炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '선착순 예약 필수', en: 'First-come reservation', zh: '需先預約(先到先得)', cn: '需先预约(先到先得)' } },
{ icon: 'jacuzzi', price: '무료',
name: { ko: '객실 내 온수욕조', en: 'In-room hot tub', zh: '客房內溫水浴缸', cn: '客房内温水浴缸' },
desc: { ko: '객실 안에 온수욕조가 있어요. 예약 없이 언제든, 온수도 무료로 사용하세요.',
en: 'A hot tub right inside your room — use it anytime, hot water included at no extra charge.',
zh: '客房內附設溫水浴缸,無需預約隨時可用,熱水免費。',
cn: '客房内附设温水浴缸,无需预约随时可用,热水免费。' },
tag: { ko: '온수 무료 · 예약 불필요', en: 'Hot water free · no booking', zh: '熱水免費 · 免預約', cn: '热水免费 · 免预约' } },
{ icon: 'pool', price: '무료', link: 'https://www.penton9.com/pool',
name: { ko: '루프탑 야외 풀', en: 'Rooftop outdoor pool', zh: '頂樓戶外泳池', cn: '顶楼户外泳池' },
desc: { ko: '시간대별 예약제로 운영되는 루프탑 풀이에요. 이용료는 무료.',
en: 'A rooftop pool run on hourly reservations — free to use.',
zh: '採時段預約制的頂樓泳池,免費使用。',
cn: '采用时段预约制的顶楼泳池,免费使用。' },
tag: { ko: '5~9월 시즌 · 예약 필요', en: 'May–Sep season · booking required', zh: '5~9月開放 · 需預約', cn: '5~9月开放 · 需预约' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: '객실 내 온수욕조', en: 'In-room hot tub', zh: '客房內溫水浴缸', cn: '客房内温水浴缸' },
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '냄비 · 프라이팬', en: 'Pots & frying pans', zh: '鍋具 · 平底鍋', cn: '锅具 · 平底锅' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '화장대 · 드라이기', en: 'Vanity & hair dryer', zh: '化妝台 · 吹風機', cn: '化妆台 · 吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* 메인 오션뷰 (대표) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 온수욕조 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F337c311d-b192-44ab-b299-00497d3d6153%2FC03_%25EB%25A9%2594%25EC%259D%25B8%25EC%259D%25B4%25EB%25AF%25B8%25EC%25A7%2580.jpg&blockId=139855f1-e498-80e5-9494-c433e4783d85',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Faf5f2436-1907-44fd-8298-649b3046b207%2FC03_%25EA%25B0%259D%25EC%258B%25A41.png&blockId=139855f1-e498-806a-9789-e4c9a03cab7e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F38e6ae64-ed1b-4861-a28e-cd58b122357d%2FC03_%25EA%25B0%259D%25EC%258B%25A42.png&blockId=139855f1-e498-800f-8308-e67c82e967d1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc32b66b7-692d-4a6c-a830-17c01bebff35%2FC03_%25EA%25B1%25B0%25EC%258B%25A42.jpg&blockId=139855f1-e498-80b5-a8d7-c5d5aa009bff',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6f04604c-d666-4684-95c4-90deb0339c18%2FC03_%25EA%25B1%25B0%25EC%258B%25A43.jpg&blockId=139855f1-e498-8072-979f-e1ba972006fb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fdb13583d-4f2b-4a50-8181-a1b78c8f4815%2FC03_%25EA%25B1%25B0%25EC%258B%25A44.jpg&blockId=139855f1-e498-8066-8483-cb79028fde08',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F4d0f5164-a1d0-4721-8c54-5f298f1f6ca3%2FC03_%25EA%25B1%25B0%25EC%258B%25A45.jpg&blockId=139855f1-e498-8017-a162-fe3558c77565',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3b23689d-9534-4cbd-adab-98aa5fca2a3a%2FC03_%25EA%25B1%25B0%25EC%258B%25A46.jpg&blockId=139855f1-e498-80f4-8f0b-f65c7ce6b562',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F99e1f66c-f5df-40ac-9b7d-60f8c16ce35d%2Froom1.png&blockId=139855f1-e498-80a0-8668-d7b786e2a7a0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5c047f1e-40f4-4f26-8619-e60b73c895f1%2Froom2.png&blockId=139855f1-e498-80c7-a54a-cd1d6a3a0ec3',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2d378e93-cc4d-4029-8f8b-26f5dd951843%2Froom3.png&blockId=139855f1-e498-8027-ad71-f284866fb57e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc2759158-bae7-4530-ac93-fb3577973ff2%2FC04_%25EA%25B0%259D%25EC%258B%25A42.png&blockId=139855f1-e498-8059-adbe-fd9015aefc65',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9cd6e29d-143f-44fa-9add-2b8aa1ffcb7a%2FC03_%25EC%258B%259D%25ED%2583%25811.jpg&blockId=139855f1-e498-80f6-b1d3-d7dbacbb974e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcf03c728-19e3-46a2-a445-2369efb828ac%2FC03_%25EC%258B%259D%25ED%2583%25812.jpg&blockId=139855f1-e498-800b-86dd-c80a5fc5f99b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3d9394a9-9554-494c-b71a-beaadb8dcd15%2FC03_%25EC%258B%259D%25ED%2583%25813.jpg&blockId=139855f1-e498-804f-9003-f4d545f04148',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0908a5aa-8d4c-40e6-a698-211bb7afa01f%2FC03_%25EC%258B%259D%25ED%2583%25814.jpg&blockId=139855f1-e498-8094-9deb-c45e2db7bb01',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd2e1a2bb-83cc-419e-a627-684aff12cd32%2FC03_%25EC%258B%259D%25ED%2583%25815.jpg&blockId=139855f1-e498-80a8-9a47-d9e10b3ab58e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F03b28036-a7b0-45a9-bd5d-62e6a8258967%2FC03_%25EC%259A%2595%25EC%25A1%25B02.jpg&blockId=139855f1-e498-8053-b5eb-dcd7d9dbd5bd',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0b20b55e-26d8-4547-a56b-cf44dd5ec142%2FC03_%25EC%259A%2595%25EC%25A1%25B03.jpg&blockId=139855f1-e498-807e-aaf6-f93179cdb854',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6ca5b29d-a001-4f25-8ddc-0cd550e665e8%2FC03_%25EC%259A%2595%25EC%25A1%25B04.jpg&blockId=139855f1-e498-8078-a0ee-ed1c03bb8668',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Feb709296-67fe-489b-8e9e-0166682a8376%2FC03_%25EC%259A%2595%25EC%25A1%25B05.jpg&blockId=139855f1-e498-80d0-a4f1-f9e63f68debb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcbbca958-b52b-4322-903c-16aa90dc4f1e%2FC03_%25EC%259A%2595%25EC%25A1%25B06.jpg&blockId=139855f1-e498-80f6-bc21-cd537b63a197',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fab5737f2-d12b-4fdc-acd3-abb6bd6fc76e%2FC03_%25EC%25A3%25BC%25EB%25B0%25A91.jpg&blockId=139855f1-e498-80aa-aa82-ebd835e63b21',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1e0a93e2-f629-472a-a3c0-80942e682c16%2FC03_%25EC%25A3%25BC%25EB%25B0%25A92.jpg&blockId=139855f1-e498-8004-8f60-e523e7f1c106',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc3639483-12e6-4253-8c9b-d3fa0f89d3c2%2F20241103_130747.jpg&blockId=13e855f1-e498-808d-bc77-db13d5768568',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbfd12ffc-4f98-4c16-b087-67e3e5251c8b%2F20241103_192446.jpg&blockId=13e855f1-e498-8054-8ee1-f84f088162a0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F69de815a-b147-477e-a176-39cc3084d9ac%2F20241103_192538.jpg&blockId=13e855f1-e498-8083-a890-e86b531dafe7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff4d410b2-9a2a-442f-83e1-f02594fe8a7f%2F20241103_193353%280%29.jpg&blockId=13e855f1-e498-800d-a256-d54f3b28cbfd',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fabec9e74-8910-4a88-889a-d72366947ad6%2F20241104_095016.jpg&blockId=13e855f1-e498-8022-8a42-c136e262667c',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc7c58c1f-fc44-427a-9259-2f1df693bead%2F20241104_095155.jpg&blockId=13e855f1-e498-8077-99e1-eaa11a316833',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe75477eb-2f16-4e97-9c8b-b8c8011e2e21%2FDAT1.png&blockId=13e855f1-e498-80a3-93f3-c466622c0a57',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6d8f2b8e-91bc-40ca-a35f-0b5d31adfb4c%2FNIGHT1.png&blockId=13e855f1-e498-8054-b783-f2dc6f7af32a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3f92f590-4b3d-4793-b8c2-f84dcb8c509a%2FNIGHT3.jpg&blockId=13e855f1-e498-8076-b290-dccc38c40fb7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2c1c6a83-aab4-4066-9d3a-d2317b56f1bb%2F20241103_130249.jpg&blockId=13e855f1-e498-8091-87ab-e04750349c0e'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/c03';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[C03] Wave Line</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[C03] Wave Line</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[C03] Wave Line</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[C03] Wave Line</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 14명',
en: '6 guests standard · up to 14',
zh: '基準6人 · 最多14人',
cn: '基准6人 · 最多14人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 6개 · 매트리스 3개 · 화장실 2개 · 40평',
en: '3 bedrooms · 6 beds · 3 mattresses · 2 bathrooms · approx. 132㎡',
zh: '3房 · 6床 · 床墊3組 · 2衛浴 · 約132㎡',
cn: '3房 · 6床 · 床垫3组 · 2卫浴 · 约132㎡' });
I18N.set('feat1t', { ko: '창밖으로 펼쳐지는 오션뷰', en: 'An ocean view out the window', zh: '窗外一望無際的海景', cn: '窗外一望无际的海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Wave Line — 거실 창 너머로 송정 바다가 보여요.',
en: 'True to its name, Wave Line — the Songjeong sea is right there beyond the living-room windows.',
zh: '如其名 Wave Line——客廳窗外就是松亭海。',
cn: '如其名 Wave Line——客厅窗外就是松亭海。' });
I18N.set('feat2t', { ko: '객실 안에 온수욕조', en: 'A hot tub inside your room', zh: '客房內設溫水浴缸', cn: '客房内设温水浴缸' });
I18N.set('feat2d', {
ko: '따로 예약할 필요 없이, 우리 객실 안에서 언제든 온수욕조를 즐길 수 있어요. 온수도 무료!',
en: 'No booking needed — soak in the hot tub inside your own unit anytime. Hot water is free, too.',
zh: '無需另外預約,在自己的客房內隨時享受溫水浴缸,熱水也免費!',
cn: '无需另外预约,在自己的客房内随时享受温水浴缸,热水也免费!' });
I18N.set('feat3t', { ko: '루프탑 야외 풀 (무료)', en: 'Rooftop outdoor pool (free)', zh: '頂樓戶外泳池(免費)', cn: '顶楼户外泳池(免费)' });
I18N.set('feat3d', {
ko: '5~9월 시즌 동안 시간대별 예약제로 무료 이용할 수 있어요.',
en: 'Free to use during the May–September season, by hourly reservation.',
zh: '5~9月開放期間,採時段預約制免費使用。',
cn: '5~9月开放期间,采用时段预约制免费使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 14명', en: '6 guests standard · up to 14', zh: '基準6人 · 最多14人', cn: '基准6人 · 最多14人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '40평 · 방 3 · 화장실 2 · 거실 · 주방', en: '~132㎡ · 3BR · 2BA · living room · kitchen', zh: '約132㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约132㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '바다가 보이는 거실을 중심으로 방 3개가 이어지고, 객실 안에 온수욕조가 있어요.',
en: 'Three bedrooms open off a living room with a sea view, and a hot tub sits inside the unit.',
zh: '以能望見大海的客廳為中心連接3間臥室,客房內另設溫水浴缸。',
cn: '以能望见大海的客厅为中心连接3间卧室,客房内另设温水浴缸。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '퀸 침대는 2명, 패밀리 침대는 3명, 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'Each queen bed sleeps two, the family bed sleeps three, and each floor mattress sleeps one.',
zh: 'Queen床可睡2人,家庭床可睡3人,加鋪床墊各可睡1人。',
cn: 'Queen床可睡2人,家庭床可睡3人,加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 4개 · 패밀리 침대 · 매트리스 3개 = 최대 14명 (기준 6명)',
en: '4 queens · 1 family bed · 3 mattresses = up to 14 guests (6 standard)',
zh: 'Queen床4張 · 家庭床 · 床墊3組 = 最多14人(基準6人)',
cn: 'Queen床4张 · 家庭床 · 床垫3组 = 最多14人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐와 루프탑 풀은 예약이 필요해요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'The BBQ and the rooftop pool require a reservation. Laundry can be requested anytime during your stay.',
zh: '燒烤與頂樓泳池需預約;洗衣服務住宿期間隨時可申請。',
cn: '烧烤与顶楼泳池需预约;洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰 거실, 침실, 주방, 온수욕조, 그리고 루프탑 풀까지.',
en: 'Living room, bedrooms, kitchen, the hot tub, and the rooftop pool.',
zh: '客廳、臥室、廚房、溫水浴缸,以及頂樓泳池。',
cn: '客厅、卧室、厨房、温水浴缸,以及顶楼泳池。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 C03 Wave Line', en: 'Penton Nine C03 Wave Line', zh: 'Penton Nine C03 Wave Line', cn: 'Penton Nine C03 Wave Line' });
I18N.set('shareTitle', { ko: '펜톤나인 [C03] Wave Line', en: 'Penton Nine [C03] Wave Line', zh: 'Penton Nine [C03] Wave Line', cn: 'Penton Nine [C03] Wave Line' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9C03Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9c3Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9c3-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9c3-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9c3Photos', PHOTOS);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9c3-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9c3Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9c3-main' : '';
html += imgOrPh(GALLERY[i], 'p9c3-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9c3Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9c3-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9c3Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9c3-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9c3Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9c3Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9C03Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9c3Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9c3-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9c3-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9c3-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9c3-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9c3Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9c3-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9c3Modal');
var frame = document.getElementById('p9c3ModalFrame');
if (!m || !frame) return;
document.getElementById('p9c3ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9c3ModalNew');
var fallLink = document.getElementById('p9c3ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9c3Modal');
var frame = document.getElementById('p9c3ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[C03] Wave Line
기본 6명 / 최대 14명
방 3개
침대 6개
화장실 2개
오션뷰
숯불바베큐
온수욕조
야외POOL
<!-- 펜톤나인 [C04] Coastal Wood 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9C04Page {
--p9c4-ink: #222222;
--p9c4-sub: #717171;
--p9c4-line: #ebebeb;
--p9c4-accent: #FF385C;
--p9c4-bg-soft: #f7f7f7;
}
#p9C04Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c4-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9C04Page * { box-sizing: border-box; }
#p9C04Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9C04Page .p9c4-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9c4-sub);
}
#p9C04Page .p9c4-crumb { min-width: 0; }
#p9C04Page .p9c4-crumb b { color: var(--p9c4-ink); font-weight: 600; }
#p9C04Page .p9c4-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9C04Page .p9c4-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9c4-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9C04Page .p9c4-share:hover { background: var(--p9c4-bg-soft); }
#p9C04Page .p9c4-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9c4-line); border-radius: 999px; padding: 3px;
}
#p9C04Page .p9c4-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9c4-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9C04Page .p9c4-lang button.on { background: var(--p9c4-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9C04Page .p9c4-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9C04Page .p9c4-gallery .p9c4-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9C04Page .p9c4-gallery .p9c4-main { grid-row: 1 / 3; }
#p9C04Page .p9c4-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9C04Page .p9c4-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9C04Page .p9c4-stats { font-size: 15px; color: var(--p9c4-ink); margin: 0 0 4px; font-weight: 500; }
#p9C04Page .p9c4-stats2 { font-size: 14px; color: var(--p9c4-sub); margin: 0; }
#p9C04Page .p9c4-divider { border: none; border-top: 1px solid var(--p9c4-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9C04Page .p9c4-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9C04Page .p9c4-feat + .p9c4-feat { border-top: 1px solid var(--p9c4-line); }
#p9C04Page .p9c4-feat svg { margin-top: 2px; }
#p9C04Page .p9c4-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9C04Page .p9c4-feat p { margin: 0; font-size: 14px; color: var(--p9c4-sub); }
/* ── 섹션 제목 ── */
#p9C04Page .p9c4-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9C04Page .p9c4-h2sub { font-size: 14px; color: var(--p9c4-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9C04Page .p9c4-info { border: 1px solid var(--p9c4-line); border-radius: 14px; padding: 24px; }
#p9C04Page .p9c4-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9C04Page .p9c4-infoitem + .p9c4-infoitem { border-top: 1px solid var(--p9c4-line); }
#p9C04Page .p9c4-infoitem svg { margin-top: 2px; }
#p9C04Page .p9c4-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9C04Page .p9c4-infoitem span { font-size: 13px; color: var(--p9c4-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9C04Page .p9c4-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9C04Page .p9c4-layout .cell {
border: 1px solid var(--p9c4-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9C04Page .p9c4-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9C04Page .p9c4-layout .cell svg { margin-bottom: 0; }
#p9C04Page .p9c4-layout .cell .txt { width: 100%; }
#p9C04Page .p9c4-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9c4-sub); align-self: center; margin-left: 1px; }
#p9C04Page .p9c4-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9C04Page .p9c4-layout .beds { font-size: 13.5px; color: var(--p9c4-sub); }
#p9C04Page .p9c4-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9c4-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9C04Page .p9c4-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9c4-sub);
}
/* ── 편의시설 ── */
#p9C04Page .p9c4-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9C04Page .p9c4-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9c4-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9C04Page .p9c4-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9C04Page .p9c4-fac .cell {
border: 1px solid var(--p9c4-line); border-radius: 14px; padding: 22px 20px;
}
#p9C04Page .p9c4-fac .cell svg { margin-bottom: 14px; }
#p9C04Page .p9c4-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9C04Page .p9c4-fac .fdesc { font-size: 13.5px; color: var(--p9c4-sub); }
#p9C04Page .p9c4-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9c4-line);
}
#p9C04Page .p9c4-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9C04Page .p9c4-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9C04Page .p9c4-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9C04Page .p9c4-fac a.cell:hover { background: var(--p9c4-bg-soft); }
#p9C04Page .p9c4-fac b { display: flex; align-items: center; gap: 6px; }
#p9C04Page .p9c4-fac .farrow { transition: transform .15s; }
#p9C04Page .p9c4-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9C04Page .p9c4-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9C04Page .p9c4-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9c4-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9C04Page .p9c4-deal:hover { background: var(--p9c4-bg-soft); }
#p9C04Page .p9c4-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9c4-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9C04Page .p9c4-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9C04Page .p9c4-deal p { margin: 0; font-size: 13.5px; color: var(--p9c4-sub); }
#p9C04Page .p9c4-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9c4-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9C04Page .p9c4-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9C04Page .p9c4-photos .cell:first-child { grid-column: 1 / -1; }
#p9C04Page .p9c4-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9C04Page .p9c4-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9c4Modal {
--p9c4-ink: #222222;
--p9c4-sub: #717171;
--p9c4-line: #ebebeb;
--p9c4-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c4-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9c4Modal * { box-sizing: border-box; }
#p9c4Modal svg { display: block; flex: none; }
#p9c4Modal.on { display: flex; }
#p9c4Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9c4Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9c4Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9c4-line); flex: none;
}
#p9c4Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9c4Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9c4-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9c4Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9c4-ink); line-height: 0;
}
#p9c4Modal .mclose:hover { background: var(--p9c4-bg-soft); }
#p9c4Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9c4Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9c4Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9c4-sub);
}
#p9c4Modal.fallback .mfall { display: flex; }
#p9c4Modal.fallback iframe { visibility: hidden; }
#p9c4Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9c4-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9c4-ink); text-decoration: none;
}
#p9C04Page .p9c4-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9c4-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9C04Page .p9c4-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9C04Page { padding: 8px 16px 56px; }
#p9C04Page .p9c4-gallery { grid-template-rows: 112px 112px; }
#p9C04Page .p9c4-h1 { font-size: 22px; }
#p9C04Page .p9c4-amen { grid-template-columns: 1fr; }
#p9C04Page .p9c4-layout { grid-template-columns: 1fr; gap: 10px; }
#p9C04Page .p9c4-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9C04Page .p9c4-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9C04Page .p9c4-layout .cell .txt { flex: 1; min-width: 0; }
#p9C04Page .p9c4-cap { margin-top: 8px; }
#p9C04Page .p9c4-fac { grid-template-columns: 1fr; }
#p9c4Modal { padding: 0; }
#p9c4Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9C04Page .p9c4-photos img { height: 145px; }
#p9C04Page .p9c4-photos .cell:first-child img { height: 215px; }
#p9C04Page .p9c4-topbar { flex-wrap: wrap; }
#p9C04Page .p9c4-crumb { order: 2; width: 100%; }
#p9C04Page .p9c4-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9C04Page">
<div class="p9c4-topbar">
<div class="p9c4-crumb" data-t="crumb"></div>
<div class="p9c4-actions">
<div class="p9c4-lang" role="group" aria-label="Language">
<button type="button" data-p9c4-lang="ko" class="on">한국어</button>
<button type="button" data-p9c4-lang="en">EN</button>
<button type="button" data-p9c4-lang="zh">繁中</button>
<button type="button" data-p9c4-lang="cn">简中</button>
</div>
<button class="p9c4-share" type="button" data-p9c4-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9c4-gallery" id="p9c4Gallery"></div>
<h1 class="p9c4-h1">[C04] Coastal Wood</h1>
<p class="p9c4-stats" data-t="stats"></p>
<p class="p9c4-stats2" data-t="stats2"></p>
<hr class="p9c4-divider">
<div class="p9c4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9c4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9c4-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="infoT"></h2>
<p class="p9c4-h2sub" data-t="infoS"></p>
<div class="p9c4-info">
<div class="p9c4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9c4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9c4-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="layoutT"></h2>
<p class="p9c4-h2sub" data-t="layoutS"></p>
<div class="p9c4-layout" id="p9c4Layout"></div>
<div class="p9c4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="amenT"></h2>
<p class="p9c4-h2sub" data-t="amenS"></p>
<div class="p9c4-amen" id="p9c4Amen"></div>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="addonT"></h2>
<p class="p9c4-h2sub" data-t="addonS"></p>
<div class="p9c4-fac" id="p9c4Fac"></div>
<div class="p9c4-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9c4-divider">
<a class="p9c4-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="photoT"></h2>
<p class="p9c4-h2sub" data-t="photoS"></p>
<div class="p9c4-photos" id="p9c4Photos"></div>
<hr class="p9c4-divider">
<h2 class="p9c4-h2" data-t="ryoT"></h2>
<p class="p9c4-h2sub" data-t="ryoS"></p>
<div class="p9c4-photos" id="p9c4Ryokan"></div>
<div class="p9c4-modal" id="p9c4Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9c4-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9c4ModalTitle"></div>
<a class="mnew" id="p9c4ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9c4-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9c4ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9c4ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9c4-toast" id="p9c4Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — C04 대표 (오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fec47c663-dbaf-4bf2-8fd3-8a5b4895fc50%2FC04_%25EB%25A9%2594%25EC%259D%25B8%25EC%2582%25AC%25EC%25A7%2584.jpg&blockId=137855f1-e498-80f5-96dd-e2a95bde4d14',
/* 오른쪽 위 — 거실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F957b7ead-2140-484b-bcd2-e1688431827b%2FC04_%25EA%25B1%25B0%25EC%258B%25A41.jpg&blockId=137855f1-e498-803d-96c9-e1683a71df88',
/* 오른쪽 아래 — 객실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe14c1d23-480c-4cf6-a102-6550a064a159%2FC04_%25EA%25B0%259D%25EC%258B%25A41.png&blockId=137855f1-e498-8047-879e-f9bcec65df1d'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: 'queen',
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '퀸 침대 1개', en: '1 queen bed', zh: 'Queen床 1張', cn: 'Queen床 1张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'mattress', n: 4 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 4개', en: '4 floor mattresses', zh: '床墊 4組', cn: '床垫 4组' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '프라이빗 숯불바베큐', en: 'Private charcoal BBQ', zh: '私人炭火燒烤', cn: '私人炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '선착순 예약 필수', en: 'First-come reservation', zh: '需先預約(先到先得)', cn: '需先预约(先到先得)' } },
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'pool', price: '무료', link: 'https://www.penton9.com/pool',
name: { ko: '루프탑 야외 풀', en: 'Rooftop outdoor pool', zh: '頂樓戶外泳池', cn: '顶楼户外泳池' },
desc: { ko: '시간대별 예약제로 운영되는 루프탑 풀이에요. 이용료는 무료.',
en: 'A rooftop pool run on hourly reservations — free to use.',
zh: '採時段預約制的頂樓泳池,免費使用。',
cn: '采用时段预约制的顶楼泳池,免费使用。' },
tag: { ko: '5~9월 시즌 · 예약 필요', en: 'May–Sep season · booking required', zh: '5~9月開放 · 需預約', cn: '5~9月开放 · 需预约' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '냄비 · 프라이팬', en: 'Pots & frying pans', zh: '鍋具 · 平底鍋', cn: '锅具 · 平底锅' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '화장대 · 드라이기', en: 'Vanity & hair dryer', zh: '化妝台 · 吹風機', cn: '化妆台 · 吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* C04 대표 (오션뷰) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 객실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5afc9959-21bc-49e6-a923-b61e7890affc%2FC04_%25EA%25B1%25B0%25EC%258B%25A42.jpg&blockId=137855f1-e498-80a2-a6ee-fdc6c65416f5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F023efc76-4d3c-4f45-96a4-a6b55ed38c7d%2FC04_%25EA%25B1%25B0%25EC%258B%25A43.jpg&blockId=137855f1-e498-8094-9424-c92172466e2e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F81672baf-dbf3-4902-9df8-24c591d79c5f%2FC04_%25EA%25B1%25B0%25EC%258B%25A44.jpg&blockId=137855f1-e498-801f-a52c-fec32196a5a7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff637ba74-c2ff-48f0-9eba-ac2010e03f45%2FC04_%25EA%25B1%25B0%25EC%258B%25A45.jpg&blockId=137855f1-e498-801a-a1a5-c58c8f449cfc',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9e6bf8a8-ca06-4c1f-b160-4154bc11b77a%2FC04_%25EA%25B1%25B0%25EC%258B%25A46.jpg&blockId=137855f1-e498-80fa-8df0-f21926da4a39',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F021e7311-7ca1-41a3-9abb-5be1ca957838%2FC04_%25EC%258B%259D%25ED%2583%2581.jpg&blockId=137855f1-e498-8068-86b4-dcf8b09d7769',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9cef1e4b-e923-4e78-b2ca-bcda2b3c5a86%2FC04_%25EC%258B%259D%25ED%2583%25812.png&blockId=137855f1-e498-803e-a777-c14d86fd8e68',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff47e97bf-f2e4-4117-ba23-0c0df444d7e8%2FC04_%25EC%258B%259D%25ED%2583%25813.png&blockId=137855f1-e498-8015-ae7b-c75595ed8edf',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F65c8b31d-e203-4a84-9beb-d9911998df0e%2FC04_%25EC%258B%259D%25ED%2583%25814.jpg&blockId=137855f1-e498-8066-ba74-f43f18fb9cbe',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8ea9b10a-eda4-452f-b015-57fad244f73f%2FC04_%25EC%25A3%25BC%25EB%25B0%25A91.jpg&blockId=137855f1-e498-80bb-9e19-c827be82840d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fa462a789-f245-41a1-b08d-5a26506ebc01%2FC04_%25EC%25A3%25BC%25EB%25B0%25A92.jpg&blockId=137855f1-e498-8050-accf-e8a49462a0b1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe128b9f6-872e-41d2-9d78-5537dc51dffa%2FC04_%25EC%25A3%25BC%25EB%25B0%25A93.jpg&blockId=137855f1-e498-80f1-9e29-eb27c32f12df',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F878f7469-93bf-4775-b31e-b1a1b31d0a2a%2FC04_%25EC%25A3%25BC%25EB%25B0%25A94.jpg&blockId=137855f1-e498-8088-a0d5-fc9f048fac84',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F405ab42d-8830-4b49-aa74-ccd3be946ee4%2FC04_%25EC%25A3%25BC%25EB%25B0%25A95.jpg&blockId=137855f1-e498-80b7-bda6-fda4a5754a9e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F0c9fb93a-a1df-4182-8c60-c2429b275f37%2FC04_%25EC%2588%2598%25EB%2582%25A9.jpg&blockId=137855f1-e498-8044-9d25-c76e127ffef6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ffbd8d0ad-a4b3-457b-91e9-6ed05aef39b3%2FC04_%25EA%25B0%259D%25EC%258B%25A42.png&blockId=137855f1-e498-801c-9b4f-cbcb354c8b23',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F20a07004-5a4c-4e09-80ff-185d2be0a0c2%2Froom1.png&blockId=137855f1-e498-8001-b605-cd98cafe4af4',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb2fdca73-1672-4a6d-9067-52f08cf60d1a%2Froom2.png&blockId=137855f1-e498-80d1-9318-cf34d52eb9fb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F06e3f14d-da5f-4f78-a360-48032a954c19%2Froom3.png&blockId=137855f1-e498-80f2-b3e0-e3f3d67aa0ae',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F97931d70-5bf4-4494-a387-fc6aab9fcb83%2FC04_%25ED%2599%2594%25EC%259E%25A5%25EB%258C%2580.jpg&blockId=137855f1-e498-8036-9d4c-c3daf61fb06b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc9e02065-657b-4a61-8e8e-92cca6a5796a%2FC04_%25ED%2599%2594%25EC%259E%25A5%25EB%258C%25802.jpg&blockId=137855f1-e498-80b7-bf58-c1bc4dd91daa',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fac3f478a-9067-495d-98ae-38fbfc5e3db6%2FC04_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A41.png&blockId=137855f1-e498-80bd-844f-f55528c52f08',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3c0b1b27-ff91-4e41-85f6-cccd6f2b0b65%2FC04_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A42.jpg&blockId=137855f1-e498-80e5-9161-c1e45071b08a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fde1980f2-d0b4-41b3-8829-37d459828d89%2FC04_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A43.jpg&blockId=137855f1-e498-8070-9e41-dce6edc5a922',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F72970b58-3b3c-423e-921f-ed51a6fd7650%2F20241103_130249.jpg&blockId=137855f1-e498-801e-9478-c4eb29655ddf',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9f3e769c-968b-46ae-943c-c1031657cbd4%2F20241103_130747.jpg&blockId=137855f1-e498-805d-b9bd-d5ff174d2259',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F585190ab-b24d-4ee9-b8bf-37c1ff6128f9%2F20241103_192446.jpg&blockId=137855f1-e498-8022-bdfc-fbcce0638841',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb35adfb9-d12e-4f42-a7d2-7de91a06c523%2F20241103_192538.jpg&blockId=137855f1-e498-8019-bc2a-d7e1a81975df',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6e1b87a3-7de3-4df0-ae2a-8ddacc45fb5c%2F20241104_095016.jpg&blockId=137855f1-e498-80d9-9d17-d5e594fd52de',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1070b61c-3826-4989-99eb-a9b5e07898b8%2F20241104_095155.jpg&blockId=137855f1-e498-80b7-a43f-ef9c972b0b9b',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fee82b1ab-c12d-47aa-9988-3fbfce6cf508%2FDAT1.png&blockId=137855f1-e498-803f-a159-e0c2bbfdf7a3',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F27ba0dce-6429-48c9-9fa5-2d094b606cdf%2FNIGHT1.png&blockId=137855f1-e498-8081-b4a8-c21153f39a78',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F4f6856b7-7595-4c60-b535-5da9c4cc854c%2FNIGHT3.jpg&blockId=137855f1-e498-80a9-a034-e02c99cfa29e'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/c04';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[C04] Coastal Wood</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[C04] Coastal Wood</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[C04] Coastal Wood</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[C04] Coastal Wood</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 14명',
en: '6 guests standard · up to 14',
zh: '基準6人 · 最多14人',
cn: '基准6人 · 最多14人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 5개 · 매트리스 4개 · 화장실 2개 · 40평',
en: '3 bedrooms · 5 beds · 4 mattresses · 2 bathrooms · approx. 132㎡',
zh: '3房 · 5床 · 床墊4組 · 2衛浴 · 約132㎡',
cn: '3房 · 5床 · 床垫4组 · 2卫浴 · 约132㎡' });
I18N.set('feat1t', { ko: '창밖으로 펼쳐지는 오션뷰', en: 'An ocean view out the window', zh: '窗外一望無際的海景', cn: '窗外一望无际的海景' });
I18N.set('feat1d', {
ko: '이름 그대로 Coastal Wood — 우드 톤 인테리어와 함께 거실 창 너머로 송정 바다가 보여요.',
en: 'True to its name, Coastal Wood — warm wood interiors with the Songjeong sea beyond the living-room windows.',
zh: '如其名 Coastal Wood——木質調空間,客廳窗外就是松亭海。',
cn: '如其名 Coastal Wood——木质调空间,客厅窗外就是松亭海。' });
I18N.set('feat2t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat2d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('feat3t', { ko: '루프탑 야외 풀 (무료)', en: 'Rooftop outdoor pool (free)', zh: '頂樓戶外泳池(免費)', cn: '顶楼户外泳池(免费)' });
I18N.set('feat3d', {
ko: '5~9월 시즌 동안 시간대별 예약제로 무료 이용할 수 있어요.',
en: 'Free to use during the May–September season, by hourly reservation.',
zh: '5~9月開放期間,採時段預約制免費使用。',
cn: '5~9月开放期间,采用时段预约制免费使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 14명', en: '6 guests standard · up to 14', zh: '基準6人 · 最多14人', cn: '基准6人 · 最多14人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '40평 · 방 3 · 화장실 2 · 거실 · 주방', en: '~132㎡ · 3BR · 2BA · living room · kitchen', zh: '約132㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约132㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '바다가 보이는 거실을 중심으로 퀸 침대 방 3개가 이어져요.',
en: 'Three queen-bed rooms open off a living room with a sea view.',
zh: '以能望見大海的客廳為中心,連接3間Queen床臥室。',
cn: '以能望见大海的客厅为中心,连接3间Queen床卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '전 객실 퀸 침대 구성이에요. 퀸은 2명, 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'All bedrooms have queen beds — each sleeps two, and each floor mattress sleeps one.',
zh: '所有臥室皆為Queen床,每張可睡2人,加鋪床墊各可睡1人。',
cn: '所有卧室均为Queen床,每张可睡2人,加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 5개 · 매트리스 4개 = 최대 14명 (기준 6명)',
en: '5 queen beds · 4 mattresses = up to 14 guests (6 standard)',
zh: 'Queen床5張 · 床墊4組 = 最多14人(基準6人)',
cn: 'Queen床5张 · 床垫4组 = 最多14人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐 · 자쿠지 · 루프탑 풀은 예약이 필요해요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'The BBQ, jacuzzi and rooftop pool require a reservation. Laundry can be requested anytime during your stay.',
zh: '燒烤、湯屋與頂樓泳池需預約;洗衣服務住宿期間隨時可申請。',
cn: '烧烤、汤屋与顶楼泳池需预约;洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '오션뷰 거실과 침실, 그리고 2호점 루프탑 풀까지.',
en: 'The ocean-view living room, the bedrooms, and the rooftop pool.',
zh: '海景客廳、臥室,以及頂樓泳池。',
cn: '海景客厅、卧室,以及顶楼泳池。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 C04 Coastal Wood', en: 'Penton Nine C04 Coastal Wood', zh: 'Penton Nine C04 Coastal Wood', cn: 'Penton Nine C04 Coastal Wood' });
I18N.set('shareTitle', { ko: '펜톤나인 [C04] Coastal Wood', en: 'Penton Nine [C04] Coastal Wood', zh: 'Penton Nine [C04] Coastal Wood', cn: 'Penton Nine [C04] Coastal Wood' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9C04Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9c4Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9c4-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9c4-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9c4Photos', PHOTOS);
buildPhotoGrid('p9c4Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9c4-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9c4Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9c4-main' : '';
html += imgOrPh(GALLERY[i], 'p9c4-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9c4Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9c4-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9c4Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9c4-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9c4Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9c4Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9C04Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9c4Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9c4-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9c4-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9c4-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9c4-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9c4Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9c4-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9c4Modal');
var frame = document.getElementById('p9c4ModalFrame');
if (!m || !frame) return;
document.getElementById('p9c4ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9c4ModalNew');
var fallLink = document.getElementById('p9c4ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9c4Modal');
var frame = document.getElementById('p9c4ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[C04] Coastal Wood
기본 6명 / 최대 14명
방 3개
침대 5개
화장실 2개
오션뷰
숯불바베큐
야외POOL
자쿠지
<!-- 펜톤나인 [C05] White Shore 객실 페이지 (한/영/번체/간체) — oopy 코드블럭용 HTML 조각 (html/head/body 태그 없음) -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
#p9C05Page {
--p9c5-ink: #222222;
--p9c5-sub: #717171;
--p9c5-line: #ebebeb;
--p9c5-accent: #FF385C;
--p9c5-bg-soft: #f7f7f7;
}
#p9C05Page {
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c5-ink);
max-width: 720px;
margin: 0 auto;
padding: 8px 20px 64px;
line-height: 1.65;
word-break: keep-all;
-webkit-font-smoothing: antialiased;
}
#p9C05Page * { box-sizing: border-box; }
#p9C05Page svg { display: block; flex: none; }
/* ── 상단 경로 / 언어 / 공유 ── */
#p9C05Page .p9c5-topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 6px 0 16px; font-size: 13px; color: var(--p9c5-sub);
}
#p9C05Page .p9c5-crumb { min-width: 0; }
#p9C05Page .p9c5-crumb b { color: var(--p9c5-ink); font-weight: 600; }
#p9C05Page .p9c5-actions { display: flex; align-items: center; gap: 6px; flex: none; }
#p9C05Page .p9c5-share {
display: inline-flex; align-items: center; gap: 7px;
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--p9c5-ink);
text-decoration: underline; text-underline-offset: 3px;
padding: 8px 10px; border-radius: 8px;
}
#p9C05Page .p9c5-share:hover { background: var(--p9c5-bg-soft); }
#p9C05Page .p9c5-lang {
display: inline-flex; align-items: center;
border: 1px solid var(--p9c5-line); border-radius: 999px; padding: 3px;
}
#p9C05Page .p9c5-lang button {
border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--p9c5-sub);
padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
#p9C05Page .p9c5-lang button.on { background: var(--p9c5-ink); color: #fff; }
/* ── 히어로 갤러리 ── */
#p9C05Page .p9c5-gallery {
display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 158px 158px;
gap: 8px; border-radius: 14px; overflow: hidden; margin-bottom: 32px;
}
#p9C05Page .p9c5-gallery .p9c5-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
#p9C05Page .p9c5-gallery .p9c5-main { grid-row: 1 / 3; }
#p9C05Page .p9c5-noimg {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 100%;
background: #f2f2f2; color: #c4c4c4; font-size: 12px; font-weight: 500;
}
/* ── 타이틀 ── */
#p9C05Page .p9c5-h1 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; }
#p9C05Page .p9c5-stats { font-size: 15px; color: var(--p9c5-ink); margin: 0 0 4px; font-weight: 500; }
#p9C05Page .p9c5-stats2 { font-size: 14px; color: var(--p9c5-sub); margin: 0; }
#p9C05Page .p9c5-divider { border: none; border-top: 1px solid var(--p9c5-line); margin: 32px 0; }
/* ── 하이라이트 행 ── */
#p9C05Page .p9c5-feat { display: flex; gap: 18px; padding: 15px 0; align-items: flex-start; }
#p9C05Page .p9c5-feat + .p9c5-feat { border-top: 1px solid var(--p9c5-line); }
#p9C05Page .p9c5-feat svg { margin-top: 2px; }
#p9C05Page .p9c5-feat h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
#p9C05Page .p9c5-feat p { margin: 0; font-size: 14px; color: var(--p9c5-sub); }
/* ── 섹션 제목 ── */
#p9C05Page .p9c5-h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
#p9C05Page .p9c5-h2sub { font-size: 14px; color: var(--p9c5-sub); margin: 0 0 20px; }
/* ── 객실 정보 카드 ── */
#p9C05Page .p9c5-info { border: 1px solid var(--p9c5-line); border-radius: 14px; padding: 24px; }
#p9C05Page .p9c5-infoitem { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; }
#p9C05Page .p9c5-infoitem + .p9c5-infoitem { border-top: 1px solid var(--p9c5-line); }
#p9C05Page .p9c5-infoitem svg { margin-top: 2px; }
#p9C05Page .p9c5-infoitem b { display: block; font-size: 14px; font-weight: 600; }
#p9C05Page .p9c5-infoitem span { font-size: 13px; color: var(--p9c5-sub); }
/* ── 잠자리 구성 카드 (에어비앤비 "Where you'll sleep" 스타일) ── */
#p9C05Page .p9c5-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#p9C05Page .p9c5-layout .cell {
border: 1px solid var(--p9c5-line); border-radius: 12px;
padding: 20px 18px; display: flex; flex-direction: column;
}
#p9C05Page .p9c5-layout .icons { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
#p9C05Page .p9c5-layout .cell svg { margin-bottom: 0; }
#p9C05Page .p9c5-layout .cell .txt { width: 100%; }
#p9C05Page .p9c5-layout .xn { font-size: 13px; font-weight: 700; color: var(--p9c5-sub); align-self: center; margin-left: 1px; }
#p9C05Page .p9c5-layout .cap { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
#p9C05Page .p9c5-layout .beds { font-size: 13.5px; color: var(--p9c5-sub); }
#p9C05Page .p9c5-cap {
display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
margin-top: 12px; font-size: 12px; font-weight: 600;
background: var(--p9c5-bg-soft); border-radius: 999px; padding: 4px 10px;
}
#p9C05Page .p9c5-total {
display: flex; gap: 10px; align-items: center;
margin-top: 14px; font-size: 13.5px; color: var(--p9c5-sub);
}
/* ── 편의시설 ── */
#p9C05Page .p9c5-amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#p9C05Page .p9c5-amen .item {
display: flex; align-items: center; gap: 14px;
font-size: 14.5px; padding: 13px 0; border-bottom: 1px solid var(--p9c5-line);
}
/* ── 부대시설 / 추가 서비스 카드 ── */
#p9C05Page .p9c5-fac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#p9C05Page .p9c5-fac .cell {
border: 1px solid var(--p9c5-line); border-radius: 14px; padding: 22px 20px;
}
#p9C05Page .p9c5-fac .cell svg { margin-bottom: 14px; }
#p9C05Page .p9c5-fac b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
#p9C05Page .p9c5-fac .fdesc { font-size: 13.5px; color: var(--p9c5-sub); }
#p9C05Page .p9c5-fac .frow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--p9c5-line);
}
#p9C05Page .p9c5-fac .fprice { font-size: 15px; font-weight: 700; white-space: nowrap; }
#p9C05Page .p9c5-fac .cell:nth-child(odd):last-child { grid-column: 1 / -1; }
#p9C05Page .p9c5-fac a.cell { display: block; text-decoration: none; color: inherit; transition: background .15s; }
#p9C05Page .p9c5-fac a.cell:hover { background: var(--p9c5-bg-soft); }
#p9C05Page .p9c5-fac b { display: flex; align-items: center; gap: 6px; }
#p9C05Page .p9c5-fac .farrow { transition: transform .15s; }
#p9C05Page .p9c5-fac a.cell:hover .farrow { transform: translateX(3px); }
#p9C05Page .p9c5-fac .fmore {
display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── 스페셜딜 배너 ── */
#p9C05Page .p9c5-deal {
display: block; text-decoration: none; color: inherit;
border: 1.5px solid var(--p9c5-ink); border-radius: 14px;
padding: 20px 22px; transition: background .15s;
}
#p9C05Page .p9c5-deal:hover { background: var(--p9c5-bg-soft); }
#p9C05Page .p9c5-deal .dtag {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
color: #fff; background: var(--p9c5-accent); border-radius: 4px;
padding: 3px 9px; margin-bottom: 8px;
}
#p9C05Page .p9c5-deal b { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 2px; }
#p9C05Page .p9c5-deal p { margin: 0; font-size: 13.5px; color: var(--p9c5-sub); }
#p9C05Page .p9c5-deal .cta { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--p9c5-ink); }
/* ── 평면도 / 사진 그리드 ── */
#p9C05Page .p9c5-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 14px; overflow: hidden; }
#p9C05Page .p9c5-photos .cell:first-child { grid-column: 1 / -1; }
#p9C05Page .p9c5-photos img { width: 100%; height: 200px; object-fit: cover; display: block; }
#p9C05Page .p9c5-photos .cell:first-child img { height: 300px; }
/* ── 페이지 안에서 열리는 모달 ── */
#p9c5Modal {
--p9c5-ink: #222222;
--p9c5-sub: #717171;
--p9c5-line: #ebebeb;
--p9c5-bg-soft: #f7f7f7;
font-family: 'Noto Sans KR', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
color: var(--p9c5-ink);
box-sizing: border-box;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 2147483000;
display: none; align-items: center; justify-content: center;
padding: 24px;
}
#p9c5Modal * { box-sizing: border-box; }
#p9c5Modal svg { display: block; flex: none; }
#p9c5Modal.on { display: flex; }
#p9c5Modal .bg { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#p9c5Modal .panel {
position: relative; z-index: 1;
width: 100%; max-width: 900px; height: 88vh;
background: #fff; border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
#p9c5Modal .mhead {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--p9c5-line); flex: none;
}
#p9c5Modal .mtitle { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; }
#p9c5Modal .mnew {
font-size: 12.5px; font-weight: 600; color: var(--p9c5-sub);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
#p9c5Modal .mclose {
border: none; background: transparent; cursor: pointer; padding: 6px;
border-radius: 50%; color: var(--p9c5-ink); line-height: 0;
}
#p9c5Modal .mclose:hover { background: var(--p9c5-bg-soft); }
#p9c5Modal .mbody { flex: 1; position: relative; background: #fff; }
#p9c5Modal iframe { width: 100%; height: 100%; border: 0; display: block; }
#p9c5Modal .mfall {
position: absolute; inset: 0; display: none;
flex-direction: column; align-items: center; justify-content: center;
gap: 12px; text-align: center; padding: 24px; font-size: 14px; color: var(--p9c5-sub);
}
#p9c5Modal.fallback .mfall { display: flex; }
#p9c5Modal.fallback iframe { visibility: hidden; }
#p9c5Modal .mfall a {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--p9c5-ink); border-radius: 8px; padding: 10px 16px;
font-size: 13.5px; font-weight: 600; color: var(--p9c5-ink); text-decoration: none;
}
#p9C05Page .p9c5-toast {
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(16px);
background: var(--p9c5-ink); color: #fff; font-size: 13px; font-weight: 500;
padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: all .25s ease; z-index: 9999;
}
#p9C05Page .p9c5-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 560px) {
#p9C05Page { padding: 8px 16px 56px; }
#p9C05Page .p9c5-gallery { grid-template-rows: 112px 112px; }
#p9C05Page .p9c5-h1 { font-size: 22px; }
#p9C05Page .p9c5-amen { grid-template-columns: 1fr; }
#p9C05Page .p9c5-layout { grid-template-columns: 1fr; gap: 10px; }
#p9C05Page .p9c5-layout .cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px; }
#p9C05Page .p9c5-layout .icons { margin-bottom: 0; margin-top: 2px; flex: none; }
#p9C05Page .p9c5-layout .cell .txt { flex: 1; min-width: 0; }
#p9C05Page .p9c5-cap { margin-top: 8px; }
#p9C05Page .p9c5-fac { grid-template-columns: 1fr; }
#p9c5Modal { padding: 0; }
#p9c5Modal .panel { height: 100%; max-width: none; border-radius: 0; }
#p9C05Page .p9c5-photos img { height: 145px; }
#p9C05Page .p9c5-photos .cell:first-child img { height: 215px; }
#p9C05Page .p9c5-topbar { flex-wrap: wrap; }
#p9C05Page .p9c5-crumb { order: 2; width: 100%; }
#p9C05Page .p9c5-actions { order: 1; margin-left: auto; }
}
</style>
<div id="p9C05Page">
<div class="p9c5-topbar">
<div class="p9c5-crumb" data-t="crumb"></div>
<div class="p9c5-actions">
<div class="p9c5-lang" role="group" aria-label="Language">
<button type="button" data-p9c5-lang="ko" class="on">한국어</button>
<button type="button" data-p9c5-lang="en">EN</button>
<button type="button" data-p9c5-lang="zh">繁中</button>
<button type="button" data-p9c5-lang="cn">简中</button>
</div>
<button class="p9c5-share" type="button" data-p9c5-share>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
<span data-t="share"></span>
</button>
</div>
</div>
<div class="p9c5-gallery" id="p9c5Gallery"></div>
<h1 class="p9c5-h1">[C05] White Shore</h1>
<p class="p9c5-stats" data-t="stats"></p>
<p class="p9c5-stats2" data-t="stats2"></p>
<hr class="p9c5-divider">
<div class="p9c5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M2 17c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/><path d="M2 7c2 1.5 4 1.5 6 0s4-1.5 6 0 4 1.5 6 0"/></svg>
<div><h4 data-t="feat1t"></h4><p data-t="feat1d"></p></div>
</div>
<div class="p9c5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>
<div><h4 data-t="feat2t"></h4><p data-t="feat2d"></p></div>
</div>
<div class="p9c5-feat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16a1 1 0 0 1 1 1v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5v-2a1 1 0 0 1 1-1z"/><path d="M6 12V6a3 3 0 0 1 6 0"/><line x1="8" y1="22" x2="8" y2="20"/><line x1="16" y1="22" x2="16" y2="20"/></svg>
<div><h4 data-t="feat3t"></h4><p data-t="feat3d"></p></div>
</div>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="infoT"></h2>
<p class="p9c5-h2sub" data-t="infoS"></p>
<div class="p9c5-info">
<div class="p9c5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<div><b data-t="info1t"></b><span data-t="info1d"></span></div>
</div>
<div class="p9c5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div><b data-t="info2t"></b><span data-t="info2d"></span></div>
</div>
<div class="p9c5-infoitem">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<div><b data-t="info3t"></b><span data-t="info3d"></span></div>
</div>
</div>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="layoutT"></h2>
<p class="p9c5-h2sub" data-t="layoutS"></p>
<div class="p9c5-layout" id="p9c5Layout"></div>
<div class="p9c5-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span data-t="totalBeds"></span>
</div>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="amenT"></h2>
<p class="p9c5-h2sub" data-t="amenS"></p>
<div class="p9c5-amen" id="p9c5Amen"></div>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="addonT"></h2>
<p class="p9c5-h2sub" data-t="addonS"></p>
<div class="p9c5-fac" id="p9c5Fac"></div>
<div class="p9c5-total">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
<span data-t="addonNote"></span>
</div>
<hr class="p9c5-divider">
<a class="p9c5-deal" href="https://www.penton9.com/deal">
<span class="dtag">SPECIAL DEAL</span>
<b data-t="dealT"></b>
<p data-t="dealD"></p>
<span class="cta" data-t="dealC"></span>
</a>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="photoT"></h2>
<p class="p9c5-h2sub" data-t="photoS"></p>
<div class="p9c5-photos" id="p9c5Photos"></div>
<hr class="p9c5-divider">
<h2 class="p9c5-h2" data-t="ryoT"></h2>
<p class="p9c5-h2sub" data-t="ryoS"></p>
<div class="p9c5-photos" id="p9c5Ryokan"></div>
<div class="p9c5-modal" id="p9c5Modal" role="dialog" aria-modal="true">
<div class="bg" data-p9c5-close></div>
<div class="panel">
<div class="mhead">
<div class="mtitle" id="p9c5ModalTitle"></div>
<a class="mnew" id="p9c5ModalNew" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
<button class="mclose" type="button" data-p9c5-close aria-label="close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="mbody">
<iframe id="p9c5ModalFrame" title="" loading="lazy"></iframe>
<div class="mfall">
<span data-t="fallbackMsg"></span>
<a id="p9c5ModalFallLink" href="#" target="_blank" rel="noopener" data-t="openNewTab"></a>
</div>
</div>
</div>
</div>
<div class="p9c5-toast" id="p9c5Toast"></div>
</div>
<script>
(function() {
/* =============================================
✅ 콘텐츠 데이터 — 여기서만 수정하세요
============================================= */
var IMG = 'https://oopy.lazyrockets.com/api/v2/notion/image?src=';
/* 히어로 갤러리 3장 (거실 오션뷰 / 식탁 / 침실) */
var GALLERY = [
/* 왼쪽 큰 사진 — C05 대표 (오션뷰) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F857ad05f-6b6e-4352-8b96-e686e6062ac7%2FC05_%25EB%25A9%2594%25EC%259D%25B8%25EC%2582%25AC%25EC%25A7%2584.png&blockId=137855f1-e498-80ef-921b-da8775ff3f5a',
/* 오른쪽 위 — 거실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8b2784e6-973d-40ad-bbd4-6dd2b85c3c43%2FC05_%25EA%25B1%25B0%25EC%258B%25A4_1.jpg&blockId=137855f1-e498-807f-bd05-c764a4f590d8',
/* 오른쪽 아래 — 객실 */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F21133beb-d800-4e95-ad2a-68ea51381907%2FC05_Room1.png&blockId=137855f1-e498-8086-915c-ee1b1c9b4b14'
];
/* ── 잠자리 구성 ──
icon: 'queen'(퀸·2인) | 'single'(슈퍼싱글·1인) | 'family'(패밀리·3인) | 'mattress'(매트리스·1인)
개수 지정: [{ t: 'queen', n: 2 }] / 침대가 섞인 방: ['queen','single'] */
var LAYOUT = [
{ icon: [{ t: 'queen', n: 2 }],
cap: { ko: '침실 1', en: 'Bedroom 1', zh: '臥室 1', cn: '卧室 1' },
beds: { ko: '퀸 침대 2개', en: '2 queen beds', zh: 'Queen床 2張', cn: 'Queen床 2张' },
guest: { ko: '4명', en: '4 guests', zh: '4人', cn: '4人' } },
{ icon: 'queen',
cap: { ko: '침실 2', en: 'Bedroom 2', zh: '臥室 2', cn: '卧室 2' },
beds: { ko: '퀸 침대 1개', en: '1 queen bed', zh: 'Queen床 1張', cn: 'Queen床 1张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: 'queen',
cap: { ko: '침실 3', en: 'Bedroom 3', zh: '臥室 3', cn: '卧室 3' },
beds: { ko: '퀸 침대 1개', en: '1 queen bed', zh: 'Queen床 1張', cn: 'Queen床 1张' },
guest: { ko: '2명', en: '2 guests', zh: '2人', cn: '2人' } },
{ icon: [{ t: 'mattress', n: 6 }],
cap: { ko: '엑스트라', en: 'Extra bedding', zh: '加鋪', cn: '加铺' },
beds: { ko: '매트리스 6개', en: '6 floor mattresses', zh: '床墊 6組', cn: '床垫 6组' },
guest: { ko: '6명', en: '6 guests', zh: '6人', cn: '6人' } }
];
/* ── 부대시설 / 추가 서비스 ──
icon: 'bbq' | 'jacuzzi' | 'pool' / link 를 넣으면 카드 전체가 모달로 열려요 */
var FACILITY = [
{ icon: 'bbq', price: '₩50,000', link: 'https://www.penton9.com/bbq',
name: { ko: '프라이빗 숯불바베큐', en: 'Private charcoal BBQ', zh: '私人炭火燒烤', cn: '私人炭火烧烤' },
desc: { ko: '가스가 아닌 국산 참숯 · 훈연 그릴을 사용해요. 우리 팀만 쓰는 독립 공간.',
en: 'Real Korean charcoal and a smoker grill — not gas. In a space just for your group.',
zh: '使用韓國木炭與煙燻烤爐,而非瓦斯。專屬您們一組的獨立空間。',
cn: '使用韩国木炭与烟熏烤炉,而非燃气。专属您们一组的独立空间。' },
tag: { ko: '선착순 예약 필수', en: 'First-come reservation', zh: '需先預約(先到先得)', cn: '需先预约(先到先得)' } },
{ icon: 'jacuzzi', price: '₩50,000', link: 'https://www.penton9.com/spa',
name: { ko: '프라이빗 자쿠지 (료칸)', en: 'Private jacuzzi (ryokan)', zh: '私人按摩浴缸(湯屋)', cn: '私人按摩浴缸(汤屋)' },
desc: { ko: '일상의 소음이 닿지 않는 별채 온수 스파예요. 한 팀만 단독으로 사용해요.',
en: 'A hot-water spa in the annex, away from everyday noise — reserved for one group at a time.',
zh: '設於別館、遠離日常喧囂的溫水SPA,一組客人專屬使用。',
cn: '设于别馆、远离日常喧嚣的温水SPA,一组客人专属使用。' },
tag: { ko: '예약제 · 한 팀 단독', en: 'By reservation · one group', zh: '預約制 · 一組專屬', cn: '预约制 · 一组专属' } },
{ icon: 'pool', price: '무료', link: 'https://www.penton9.com/pool',
name: { ko: '루프탑 야외 풀', en: 'Rooftop outdoor pool', zh: '頂樓戶外泳池', cn: '顶楼户外泳池' },
desc: { ko: '시간대별 예약제로 운영되는 루프탑 풀이에요. 이용료는 무료.',
en: 'A rooftop pool run on hourly reservations — free to use.',
zh: '採時段預約制的頂樓泳池,免費使用。',
cn: '采用时段预约制的顶楼泳池,免费使用。' },
tag: { ko: '5~9월 시즌 · 예약 필요', en: 'May–Sep season · booking required', zh: '5~9月開放 · 需預約', cn: '5~9月开放 · 需预约' } },
{ icon: 'laundry', price: '₩30,000', link: 'https://www.penton9.com/laundry',
name: { ko: '단체 세탁 서비스', en: 'Group laundry service', zh: '團體洗衣服務', cn: '团体洗衣服务' },
desc: { ko: '인원이 많으면 빨랫감도 금방 쌓이죠. 문 앞에 내놓기만 하면 세탁해서 문 앞으로 다시 가져다드려요.',
en: 'With a big group, laundry piles up fast. Leave it at the door — we wash it and bring it back to your door.',
zh: '人一多,待洗衣物很快就堆起來。只要放在門口,我們洗好後再送回您的門口。',
cn: '人一多,待洗衣物很快就堆起来。只要放在门口,我们洗好后再送回您的门口。' },
tag: { ko: '마대 1개 · 최대 20kg', en: 'One bag · up to 20kg', zh: '每袋 · 最多20kg', cn: '每袋 · 最多20kg' } }
];
/* 편의시설 목록 (4개 언어) */
var AMEN = [
{ ko: 'TV', en: 'TV', zh: '電視', cn: '电视' },
{ ko: '소파', en: 'Sofa', zh: '沙發', cn: '沙发' },
{ ko: '냉장고', en: 'Refrigerator', zh: '冰箱', cn: '冰箱' },
{ ko: '전자렌지 · 전기포트', en: 'Microwave & electric kettle', zh: '微波爐 · 快煮壺', cn: '微波炉 · 电热水壶' },
{ ko: '인덕션 (2구)', en: 'Induction cooktop (2 burners)', zh: '電磁爐(雙口)', cn: '电磁炉(双口)' },
{ ko: '냄비 · 프라이팬', en: 'Pots & frying pans', zh: '鍋具 · 平底鍋', cn: '锅具 · 平底锅' },
{ ko: '식탁 · 의자', en: 'Dining table & chairs', zh: '餐桌 · 椅子', cn: '餐桌 · 椅子' },
{ ko: '조리도구 (칼 · 가위 · 도마 · 국자 · 집게)', en: 'Cookware (knife, scissors, board, ladle, tongs)', zh: '烹調用具(刀·剪刀·砧板·湯勺·夾子)', cn: '烹调用具(刀·剪刀·砧板·汤勺·夹子)' },
{ ko: '식기 (머그컵 · 그릇 · 접시 · 수저)', en: 'Tableware (mugs, bowls, plates, cutlery)', zh: '餐具(馬克杯·碗·盤·筷匙)', cn: '餐具(马克杯·碗·盘·筷勺)' },
{ ko: '와인잔 · 와인오프너', en: 'Wine glasses & opener', zh: '紅酒杯 · 開瓶器', cn: '红酒杯 · 开瓶器' },
{ ko: '아기의자', en: 'High chair', zh: '兒童餐椅', cn: '儿童餐椅' },
{ ko: '화장대 · 드라이기', en: 'Vanity & hair dryer', zh: '化妝台 · 吹風機', cn: '化妆台 · 吹风机' },
{ ko: '샴푸 · 린스 · 바디워시 · 비누', en: 'Shampoo, conditioner, body wash & soap', zh: '洗髮精 · 潤髮乳 · 沐浴乳 · 香皂', cn: '洗发水 · 护发素 · 沐浴露 · 香皂' }
];
/* 객실사진 (첫 장 가로 전체 + 2열)
※ 앞의 3장은 상단 히어로에 쓴 대표 사진과 동일 — 갤러리에서도 다시 보여줍니다. */
var PHOTOS = [
GALLERY[0], /* C05 대표 (오션뷰) */
GALLERY[1], /* 거실 (대표) */
GALLERY[2], /* 객실 (대표) */
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F855f0748-bd12-4f0e-b7ec-f504c9afb235%2FC05_%25EA%25B1%25B0%25EC%258B%25A4_2.jpg&blockId=137855f1-e498-80b4-807c-ebdc9319ca4d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff1d0d4b3-5e35-4ba1-ac2d-d612b4bb4aff%2FC05_%25EA%25B1%25B0%25EC%258B%25A4_3.jpg&blockId=137855f1-e498-8074-9507-e129f57d91d5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F8abf5bc7-833e-4d8b-a856-b041a7c077bb%2FC05_%25EA%25B1%25B0%25EC%258B%25A4_4.jpg&blockId=137855f1-e498-8070-bce3-fae2822838c1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6406436c-aa15-4fde-b1d4-d1ab588a7cae%2FC05_%25EA%25B1%25B0%25EC%258B%25A45.jpg&blockId=137855f1-e498-8006-a427-fc187a434241',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fdd82fec2-21d3-4bcc-9224-8f1010d19c96%2FC05_%25EA%25B1%25B0%25EC%258B%25A46.jpg&blockId=137855f1-e498-8082-93d7-c9125ee276d9',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff928b7a4-e223-4a21-aaf9-d238a9ef1104%2FC05_%25EA%25B1%25B0%25EC%258B%25A47.jpg&blockId=137855f1-e498-8062-bf40-c8d03ca597ed',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff4f39469-4a67-4cfd-872d-b811e33d05da%2FC05_%25EC%258B%259D%25ED%2583%2581_1.jpg&blockId=137855f1-e498-80e5-a6eb-c4ab2500b32d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbefa2f02-3b66-46d3-a589-ceb733a2ef43%2FC05_%25EC%258B%259D%25ED%2583%2581_2.jpg&blockId=137855f1-e498-8001-817a-cf7ea6e76708',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F04def6c5-8a32-48ea-be7f-f89cdfa07fa9%2FC05_%25EC%258B%259D%25ED%2583%2581_3.jpg&blockId=137855f1-e498-8093-bb3a-e24e6ae88a1e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fb4251768-2534-44b1-a1aa-7be2d591f460%2FC05_%25EC%25A3%25BC%25EB%25B0%25A9_1.jpg&blockId=137855f1-e498-8002-b90a-d1ec634c319d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc5aba358-dbbc-4eb3-ae60-d3a0ee970de9%2FC05_%25EC%25A3%25BC%25EB%25B0%25A92.jpg&blockId=137855f1-e498-80b9-b9c4-e1117f3fcfd6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6261beff-91ff-4e10-9dac-61ead5420b1d%2FC05_%25EC%25A3%25BC%25EB%25B0%25A93.jpg&blockId=137855f1-e498-8089-accf-c88ee9c077b5',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F5c933bb3-34eb-4992-b29a-ac557a869922%2FC05_%25EC%25A3%25BC%25EB%25B0%25A9_4.jpg&blockId=137855f1-e498-80d7-8b8a-cfb90fb768c8',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ffa504a68-4573-4280-a521-ad390f91b17a%2FC05_%25EC%25A3%25BC%25EB%25B0%25A95.jpg&blockId=137855f1-e498-8034-95d3-fcb56304666e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F1fa89e6a-b52c-46d0-978d-e3baea0aab9f%2Froom1.png&blockId=137855f1-e498-80ba-aff3-c8e313a07ffb',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff9a5d137-0bfa-432f-baa5-2b8c72b1627c%2Froom2.png&blockId=137855f1-e498-808d-97a3-e1c2c513121f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6c31d3d4-ab4a-45f5-bc0d-902d490a418d%2Froom3.png&blockId=137855f1-e498-80e8-a369-d42c3a283b49',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fee8206bf-3dd8-4723-98c1-318556d33e8b%2FC04_%25EA%25B0%259D%25EC%258B%25A41.png&blockId=137855f1-e498-8025-8fa2-e65438929101',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe3b04093-98d9-4776-9fdb-40c258c76a52%2FC05_%25ED%2594%258C%25EB%259E%259C%25ED%2585%258C%25EB%25A6%25AC%25EC%2596%25B41.jpg&blockId=137855f1-e498-80fa-aeb3-c18d5a62e6d7',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F103ed3cd-9035-4112-ac26-a29b905a37b4%2FC05_%25ED%2594%258C%25EB%259E%259C%25ED%2585%258C%25EB%25A6%25AC%25EC%2596%25B42.jpg&blockId=137855f1-e498-80ac-901c-cd8afd0dca00',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6fbee54c-c513-42b0-a997-641da3587944%2FC05_%25ED%2594%258C%25EB%259E%259C%25ED%2585%258C%25EB%25A6%25AC%25EC%2596%25B43.jpg&blockId=137855f1-e498-80d7-bef8-df7494f607de',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F96ee32f3-a0eb-4118-afb5-91027a21031a%2FC05_%25ED%2599%2594%25EC%259E%25A5%25EB%258C%2580.jpg&blockId=137855f1-e498-806f-8327-ef8db1e21eb0',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F9430a254-725d-4a77-8b4f-350bd0b98d91%2FC05_%25ED%2599%2594%25EC%259E%25A5%25EB%258C%25802.jpg&blockId=137855f1-e498-80f9-90f0-d873b5980409',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fcfd2710a-2561-428a-ac80-2266d8f6f2ae%2FC05_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A41.png&blockId=137855f1-e498-80bd-98c4-ebc4007ff75a',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2d0054c0-a41f-45ca-b72a-1cc120612e38%2FC05_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A42.jpg&blockId=137855f1-e498-804b-8426-f4e624ed479f',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fd3cb19bd-f4a3-4d60-bc2c-08baaebf4f7b%2FC05_%25ED%2599%2594%25EC%259E%25A5%25EC%258B%25A43.jpg&blockId=137855f1-e498-80ba-8b44-efdab966b633',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc3639483-12e6-4253-8c9b-d3fa0f89d3c2%2F20241103_130747.jpg&blockId=137855f1-e498-80d8-8a37-fe6bf81ea07d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fbfd12ffc-4f98-4c16-b087-67e3e5251c8b%2F20241103_192446.jpg&blockId=137855f1-e498-802b-932d-ebd6e07bd2f1',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F69de815a-b147-477e-a176-39cc3084d9ac%2F20241103_192538.jpg&blockId=137855f1-e498-803a-9cd6-da3281ebc794',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Ff4d410b2-9a2a-442f-83e1-f02594fe8a7f%2F20241103_193353%280%29.jpg&blockId=137855f1-e498-80fc-a038-fc15de81e5ef',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fabec9e74-8910-4a88-889a-d72366947ad6%2F20241104_095016.jpg&blockId=137855f1-e498-80e1-8fe9-d8a7c03b1ae6',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fc7c58c1f-fc44-427a-9259-2f1df693bead%2F20241104_095155.jpg&blockId=137855f1-e498-80e1-86ba-c9cd2bbe2b56',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2Fe75477eb-2f16-4e97-9c8b-b8c8011e2e21%2FDAT1.png&blockId=137855f1-e498-8050-8cbe-e4ef95a23d72',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F6d8f2b8e-91bc-40ca-a35f-0b5d31adfb4c%2FNIGHT1.png&blockId=137855f1-e498-80d9-99e8-ccac9642501e',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F3f92f590-4b3d-4793-b8c2-f84dcb8c509a%2FNIGHT3.jpg&blockId=137855f1-e498-8092-add5-ee67627de57d',
IMG + 'https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F31e91f60-5c1e-4754-96eb-9498bca2381b%2F2c1c6a83-aab4-4066-9d3a-d2317b56f1bb%2F20241103_130249.jpg&blockId=137855f1-e498-80ad-8208-ee6cd80d99e6'
];
/* 프라이빗 료칸(자쿠지) 사진 — 첫 장 가로 전체 + 2열
※ 료칸은 전 객실 공용 별채 시설이라 다른 객실과 동일한 사진을 사용해요. */
var RYOKAN = [
IMG + 'attachment%3A9866536f-c785-4da5-9ded-2d4adea2f03b%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%A0%84%EC%B2%B4%EC%83%B7.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8048-9e19-f214b9b96ecc',
IMG + 'attachment%3A24454625-f661-412e-9fb6-eb802905a678%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B03.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8005-b28d-c251dce8630c',
IMG + 'attachment%3Ae4c2597a-d8ac-43cb-abcd-53bd958c0985%3A%EB%B3%84%EC%B1%84%ED%83%95_%ED%99%94%EC%9E%A5%EB%8C%80.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-809a-8c00-c6e91d6f0bc4',
IMG + 'attachment%3A1d7e4ef7-e4bf-44c9-91f1-2baeda9e52da%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B01.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-8003-b8d0-cff9276115c7',
IMG + 'attachment%3Adbe94166-84f1-46ce-bcd5-1b26a5118793%3A%EB%B3%84%EC%B1%84%ED%83%95_%EC%9A%95%EC%A1%B02.png%EC%9D%98_%EC%82%AC%EB%B3%B8.png&blockId=2a8855f1-e498-80c8-b70f-c82e7a145dea'
];
/* 공유 버튼이 복사할 페이지 주소 */
var SHARE_URL = 'https://www.penton9.com/c05';
/* 기본 언어: 'ko'(한국어), 'en'(영어), 'zh'(번체), 'cn'(간체) */
var DEFAULT_LANG = 'ko';
/* ── 4개 언어 문구 — ko/en/zh/cn 짝으로 수정하세요 ── */
var I18N = new Map();
I18N.set('crumb', {
ko: '부산 송정 오션뷰 단체 펜션, 펜톤나인 › 객실 › <b>[C05] White Shore</b>',
en: 'Penton Nine, Songjeong, Busan › Rooms › <b>[C05] White Shore</b>',
zh: '釜山松亭 Penton Nine › 客房 › <b>[C05] White Shore</b>',
cn: '釜山松亭 Penton Nine › 客房 › <b>[C05] White Shore</b>' });
I18N.set('share', { ko: '공유', en: 'Share', zh: '分享', cn: '分享' });
I18N.set('stats', {
ko: '기준 6명 · 최대 14명',
en: '6 guests standard · up to 14',
zh: '基準6人 · 最多14人',
cn: '基准6人 · 最多14人' });
I18N.set('stats2', {
ko: '방 3개 · 침대 4개 · 매트리스 6개 · 화장실 2개 · 40평',
en: '3 bedrooms · 4 beds · 6 mattresses · 2 bathrooms · approx. 132㎡',
zh: '3房 · 4床 · 床墊6組 · 2衛浴 · 約132㎡',
cn: '3房 · 4床 · 床垫6组 · 2卫浴 · 约132㎡' });
I18N.set('feat1t', { ko: '창밖으로 펼쳐지는 오션뷰', en: 'An ocean view out the window', zh: '窗外一望無際的海景', cn: '窗外一望无际的海景' });
I18N.set('feat1d', {
ko: '이름 그대로 White Shore — 화이트 톤의 밝은 공간에서 송정 바다가 보여요. 2호점 꼭대기 층이에요.',
en: 'True to its name, White Shore — a bright, white-toned space on the top floor, looking out to the Songjeong sea.',
zh: '如其名 White Shore——白色調的明亮空間,位於2號館頂層,可望見松亭海。',
cn: '如其名 White Shore——白色调的明亮空间,位于2号馆顶层,可望见松亭海。' });
I18N.set('feat2t', { ko: '프라이빗 자쿠지 (예약제)', en: 'Private jacuzzi (by reservation)', zh: '私人按摩浴缸(預約制)', cn: '私人按摩浴缸(预约制)' });
I18N.set('feat2d', {
ko: '별채에 마련된 온수 스파를 예약제로 이용할 수 있어요. 한 팀만 단독 사용해요.',
en: 'A hot-water spa in the annex, available by reservation — one group at a time.',
zh: '可預約使用設於別館的溫水SPA,一組客人專屬使用。',
cn: '可预约使用设于别馆的温水SPA,一组客人专属使用。' });
I18N.set('feat3t', { ko: '루프탑 야외 풀 (무료)', en: 'Rooftop outdoor pool (free)', zh: '頂樓戶外泳池(免費)', cn: '顶楼户外泳池(免费)' });
I18N.set('feat3d', {
ko: '5~9월 시즌 동안 시간대별 예약제로 무료 이용할 수 있어요.',
en: 'Free to use during the May–September season, by hourly reservation.',
zh: '5~9月開放期間,採時段預約制免費使用。',
cn: '5~9月开放期间,采用时段预约制免费使用。' });
I18N.set('infoT', { ko: '객실 정보', en: 'Room details', zh: '客房資訊', cn: '客房信息' });
I18N.set('infoS', { ko: '체크인 전에 확인해주세요.', en: 'Please check before your stay.', zh: '入住前請先確認。', cn: '入住前请先确认。' });
I18N.set('info1t', { ko: '체크인 15:00 · 체크아웃 11:00', en: 'Check-in 3:00 PM · Check-out 11:00 AM', zh: '入住 15:00 · 退房 11:00', cn: '入住 15:00 · 退房 11:00' });
I18N.set('info1d', {
ko: '얼리 체크인·레이트 체크아웃은 사전에 문의해주세요.',
en: 'Please contact us in advance for early check-in or late check-out.',
zh: '提前入住或延遲退房請事先洽詢。',
cn: '提前入住或延迟退房请事先咨询。' });
I18N.set('info2t', { ko: '기준 6명 · 최대 14명', en: '6 guests standard · up to 14', zh: '基準6人 · 最多14人', cn: '基准6人 · 最多14人' });
I18N.set('info2d', {
ko: '가족 모임, 워크샵 등 단체 여행에 넉넉한 사이즈예요.',
en: 'Roomy enough for family gatherings, retreats, and group trips.',
zh: '家族聚會、團體旅行都綽綽有餘。',
cn: '家族聚会、团体旅行都绰绰有余。' });
I18N.set('info3t', { ko: '40평 · 방 3 · 화장실 2 · 거실 · 주방', en: '~132㎡ · 3BR · 2BA · living room · kitchen', zh: '約132㎡ · 3房 · 2衛浴 · 客廳 · 廚房', cn: '约132㎡ · 3房 · 2卫浴 · 客厅 · 厨房' });
I18N.set('info3d', {
ko: '2호점 꼭대기 층. 바다가 보이는 거실을 중심으로 퀸 침대 방 3개가 이어져요.',
en: 'The top floor of Building C — three queen-bed rooms open off a living room with a sea view.',
zh: '位於2號館頂層,以能望見大海的客廳為中心,連接3間Queen床臥室。',
cn: '位于2号馆顶层,以能望见大海的客厅为中心,连接3间Queen床卧室。' });
I18N.set('layoutT', { ko: '잠자리 구성', en: 'Where you\'ll sleep', zh: '睡寢配置', cn: '睡寝配置' });
I18N.set('layoutS', {
ko: '전 객실 퀸 침대 구성이에요. 퀸은 2명, 엑스트라 매트리스는 각 1명이 잘 수 있어요.',
en: 'All bedrooms have queen beds — each sleeps two, and each floor mattress sleeps one.',
zh: '所有臥室皆為Queen床,每張可睡2人,加鋪床墊各可睡1人。',
cn: '所有卧室均为Queen床,每张可睡2人,加铺床垫各可睡1人。' });
I18N.set('totalBeds', {
ko: '퀸 4개 · 매트리스 6개 = 최대 14명 (기준 6명)',
en: '4 queen beds · 6 mattresses = up to 14 guests (6 standard)',
zh: 'Queen床4張 · 床墊6組 = 最多14人(基準6人)',
cn: 'Queen床4张 · 床垫6组 = 最多14人(基准6人)' });
I18N.set('amenT', { ko: '편의시설', en: 'Amenities', zh: '設施與備品', cn: '设施与备品' });
I18N.set('amenS', {
ko: '단체 여행에 필요한 것들을 갖췄어요.',
en: 'Everything a group trip needs.',
zh: '團體旅行所需一應俱全。',
cn: '团体旅行所需一应俱全。' });
I18N.set('addonT', { ko: '추가 서비스', en: 'Add-on services', zh: '加購服務', cn: '加购服务' });
I18N.set('addonS', {
ko: '예약 시 함께 신청할 수 있어요.',
en: 'Can be added when you book.',
zh: '預約時可一併申請。',
cn: '预约时可一并申请。' });
I18N.set('openNewTab', { ko: '새 탭에서 열기 ↗', en: 'Open in new tab ↗', zh: '在新分頁開啟 ↗', cn: '在新标签页打开 ↗' });
I18N.set('fallbackMsg', {
ko: '이 페이지는 창 안에서 바로 열 수 없어요.',
en: 'This page can\'t be displayed inside the window.',
zh: '此頁面無法在視窗內直接開啟。',
cn: '此页面无法在窗口内直接打开。' });
I18N.set('seeMore', { ko: '자세히 보기', en: 'Learn more', zh: '查看詳情', cn: '查看详情' });
I18N.set('addonNote', {
ko: '바베큐 · 자쿠지 · 루프탑 풀은 예약이 필요해요. 세탁은 머무는 동안 언제든 신청할 수 있어요.',
en: 'The BBQ, jacuzzi and rooftop pool require a reservation. Laundry can be requested anytime during your stay.',
zh: '燒烤、湯屋與頂樓泳池需預約;洗衣服務住宿期間隨時可申請。',
cn: '烧烤、汤屋与顶楼泳池需预约;洗衣服务住宿期间随时可申请。' });
I18N.set('dealT', {
ko: '공식 홈페이지 단독 특가',
en: 'Official-site exclusive deal',
zh: '官網獨家特價',
cn: '官网独家特价' });
I18N.set('dealD', {
ko: '예약사이트보다 더 저렴한 공홈 전용 시크릿 가격이 준비돼 있어요.',
en: 'Secret prices lower than booking platforms — only on our official site.',
zh: '比訂房網站更便宜的官網專屬秘密價格。',
cn: '比订房网站更便宜的官网专属秘密价格。' });
I18N.set('dealC', { ko: '특가 보러가기 →', en: 'See the deals →', zh: '查看特價 →', cn: '查看特价 →' });
I18N.set('photoT', { ko: '객실 사진', en: 'Photos', zh: '客房照片', cn: '客房照片' });
I18N.set('photoS', {
ko: '화이트 톤 거실과 침실, 플랜테리어 공간, 그리고 바로 위 루프탑 풀까지.',
en: 'The ocean-view living room, the bedrooms, and the rooftop pool.',
zh: '海景客廳、臥室,以及頂樓泳池。',
cn: '海景客厅、卧室,以及顶楼泳池。' });
I18N.set('ryoT', { ko: '프라이빗 료칸 (자쿠지)', en: 'Private ryokan bath', zh: '私人湯屋', cn: '私人汤屋' });
I18N.set('ryoS', {
ko: '별채에 마련된 프라이빗 온수 스파. 예약제로 한 팀만 단독 이용해요.',
en: 'A private hot-water spa in the annex — reserved for one group at a time.',
zh: '設於別館的私密溫水SPA,採預約制,一組客人專屬使用。',
cn: '设于别馆的私密温水SPA,采用预约制,一组客人专属使用。' });
I18N.set('noPhoto', { ko: '사진 준비 중', en: 'Photos coming soon', zh: '照片準備中', cn: '照片准备中' });
I18N.set('imgAlt', { ko: '펜톤나인 C05 White Shore', en: 'Penton Nine C05 White Shore', zh: 'Penton Nine C05 White Shore', cn: 'Penton Nine C05 White Shore' });
I18N.set('shareTitle', { ko: '펜톤나인 [C05] White Shore', en: 'Penton Nine [C05] White Shore', zh: 'Penton Nine [C05] White Shore', cn: 'Penton Nine [C05] White Shore' });
I18N.set('toastCopied', { ko: '링크가 복사되었어요', en: 'Link copied', zh: '已複製連結', cn: '已复制链接' });
I18N.set('toastFail', { ko: '복사에 실패했어요', en: 'Copy failed', zh: '複製失敗', cn: '复制失败' });
/* =============================================
이하 로직 — 수정 불필요
============================================= */
var currentLang = DEFAULT_LANG;
var ICON_CHECK = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
var ICON_CAM = '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
var SVG_HEAD = '<svg width="58" height="44" viewBox="0 0 48 36" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">';
/* 퀸 침대: 위에서 본 넓은 침대 + 나란히 누운 2명 (2인용임을 명확히) */
var ICON_QUEEN = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<line x1="24" y1="19" x2="24" y2="33.5"/>'
+ '<circle cx="14" cy="10" r="3.4"/>'
+ '<path d="M8 19v-1.6a6 6 0 0 1 12 0V19"/>'
+ '<circle cx="34" cy="10" r="3.4"/>'
+ '<path d="M28 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 슈퍼싱글: 위에서 본 좁은 침대 + 누운 1명 */
var ICON_SINGLE = SVG_HEAD
+ '<rect x="14.5" y="2.5" width="19" height="31" rx="3.5"/>'
+ '<line x1="14.5" y1="19" x2="33.5" y2="19"/>'
+ '<circle cx="24" cy="10" r="3.4"/>'
+ '<path d="M18 19v-1.6a6 6 0 0 1 12 0V19"/></svg>';
/* 엑스트라 매트리스: 프레임 없이 바닥에 깐 매트리스 + 누운 1명 */
var ICON_MATTRESS = SVG_HEAD
+ '<rect x="15" y="3" width="18" height="27" rx="7"/>'
+ '<line x1="15" y1="18" x2="33" y2="18"/>'
+ '<circle cx="24" cy="9.5" r="3.2"/>'
+ '<path d="M18.5 18v-1.4a5.5 5.5 0 0 1 11 0V18"/>'
+ '<line x1="9" y1="33.5" x2="39" y2="33.5" stroke-dasharray="3 3"/></svg>';
/* 숯불그릴: 그릴 위로 피어오르는 불꽃 */
var ICON_BBQ = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="2.5" y1="11" x2="21.5" y2="11"/>'
+ '<path d="M4.5 11a7.5 7.5 0 0 0 15 0"/>'
+ '<line x1="7.5" y1="17" x2="6" y2="21"/><line x1="16.5" y1="17" x2="18" y2="21"/>'
+ '<path d="M10.6 8c-.9-.8-1.2-1.9-.6-3 .1 .8 .7 1.2 1.3 1.5 1 .5 1.7 1 1.7 1.5"/>'
+ '<path d="M14 8c.6-.6.7-1.4.3-2.2"/></svg>';
/* 자쿠지: 욕조 + 물방울(버블) */
var ICON_JACUZZI = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M3 12h18v2.5a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V12z"/>'
+ '<path d="M6 12V6.5a2 2 0 0 1 4 0"/>'
+ '<circle cx="14.5" cy="7" r=".9"/><circle cx="17.5" cy="5.2" r=".7"/><circle cx="17" cy="9" r=".6"/>'
+ '<line x1="7.5" y1="22" x2="8" y2="20"/><line x1="16.5" y1="22" x2="16" y2="20"/></svg>';
var ICON_ARROW = '<svg class="farrow" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
/* 패밀리 침대: 위에서 본 넓은 침대 + 어른 2 + 아이 1 */
var ICON_FAMILY = SVG_HEAD
+ '<rect x="2.5" y="2.5" width="43" height="31" rx="3.5"/>'
+ '<line x1="2.5" y1="19" x2="45.5" y2="19"/>'
+ '<circle cx="11" cy="10" r="3.1"/>'
+ '<path d="M5.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="23" cy="10" r="3.1"/>'
+ '<path d="M17.5 19v-1.5a5.5 5.5 0 0 1 11 0V19"/>'
+ '<circle cx="35" cy="11.5" r="2.5"/>'
+ '<path d="M31 19v-1a4 4 0 0 1 8 0v1"/></svg>';
/* 루프탑 야외 풀: 물결 + 다이빙보드 */
var ICON_POOL = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<path d="M2 15c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M2 20c1.8 1.4 3.6 1.4 5.4 0s3.6-1.4 5.4 0 3.6 1.4 5.4 0 2.1-.9 3.8-.9"/>'
+ '<path d="M7 15V5.5a2 2 0 0 1 2-2h3"/>'
+ '<path d="M13 15V8"/>'
+ '<circle cx="16.5" cy="5" r="1.4"/></svg>';
/* 세탁 서비스: 세탁기 + 물결(빨래) */
var ICON_LAUNDRY = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">'
+ '<rect x="4" y="2.5" width="16" height="19" rx="2.5"/>'
+ '<line x1="4" y1="7" x2="20" y2="7"/>'
+ '<circle cx="7.5" cy="4.8" r=".8"/><circle cx="10.5" cy="4.8" r=".8"/>'
+ '<circle cx="12" cy="14" r="5"/>'
+ '<path d="M7.6 12.6c1.1.9 2.2.9 3.3 0s2.2-.9 3.3 0 1.3.8 2.2.2"/></svg>';
var ICON_PERSON = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
var BED_ICONS = new Map();
BED_ICONS.set('queen', ICON_QUEEN);
BED_ICONS.set('single', ICON_SINGLE);
BED_ICONS.set('mattress', ICON_MATTRESS);
BED_ICONS.set('laundry', ICON_LAUNDRY);
BED_ICONS.set('family', ICON_FAMILY);
BED_ICONS.set('pool', ICON_POOL);
BED_ICONS.set('bbq', ICON_BBQ);
BED_ICONS.set('jacuzzi', ICON_JACUZZI);
function pick(pair) {
if (!pair) return '';
return currentLang === 'en' ? pair.en : (currentLang === 'zh' ? pair.zh : (currentLang === 'cn' ? pair.cn : pair.ko));
}
function t(key) {
return pick(I18N.get(key));
}
function applyLang() {
var root = document.getElementById('p9C05Page');
if (!root) return;
var scopes = [root];
var modalEl = document.getElementById('p9c5Modal');
if (modalEl && modalEl.parentNode !== root) scopes.push(modalEl);
for (var s = 0; s < scopes.length; s++) {
var nodes = scopes[s].querySelectorAll('[data-t]');
for (var i = 0; i < nodes.length; i++) {
var item = I18N.get(nodes[i].getAttribute('data-t'));
if (item) nodes[i].innerHTML = pick(item);
}
}
var btns = root.querySelectorAll('[data-p9c5-lang]');
for (var j = 0; j < btns.length; j++) {
btns[j].classList.toggle('on', btns[j].getAttribute('data-p9c5-lang') === currentLang);
}
buildGallery();
buildLayout();
buildFacility();
buildAmen();
buildPhotoGrid('p9c5Photos', PHOTOS);
buildPhotoGrid('p9c5Ryokan', RYOKAN);
}
function imgOrPh(url, extraClass) {
if (url) {
return '<img class="' + (extraClass || '') + '" src="' + url + '" alt="' + t('imgAlt') + '" loading="lazy">';
}
return '<div class="p9c5-noimg ' + (extraClass || '') + '">' + ICON_CAM + '<span>' + t('noPhoto') + '</span></div>';
}
function buildGallery() {
var box = document.getElementById('p9c5Gallery');
if (!box) return;
var html = '';
for (var i = 0; i < GALLERY.length; i++) {
var pos = (i === 0) ? ' p9c5-main' : '';
html += imgOrPh(GALLERY[i], 'p9c5-ph' + pos);
}
box.innerHTML = html;
}
function normIcons(icon) {
if (typeof icon === 'string') return [{ t: icon, n: 1 }];
var out = [];
for (var i = 0; i < icon.length; i++) {
var it = icon[i];
if (typeof it === 'string') out.push({ t: it, n: 1 });
else out.push({ t: it.t, n: it.n || 1 });
}
return out;
}
function buildLayout() {
var box = document.getElementById('p9c5Layout');
if (!box) return;
var html = '';
for (var i = 0; i < LAYOUT.length; i++) {
var b = LAYOUT[i];
/* 침대 개수만큼 아이콘을 반복 표시. 4개 이상이면 아이콘 1개 + ×N 으로 축약 */
var groups = normIcons(b.icon);
var iconHtml = '';
for (var g = 0; g < groups.length; g++) {
var svg = BED_ICONS.get(groups[g].t) || '';
var n = groups[g].n;
if (n <= 3) {
for (var k = 0; k < n; k++) iconHtml += svg;
} else {
iconHtml += svg + '<span class="xn">\u00d7' + n + '</span>';
}
}
html += '<div class="cell">'
+ '<div class="icons">' + iconHtml + '</div>'
+ '<div class="txt">'
+ '<div class="cap">' + pick(b.cap) + '</div>'
+ '<div class="beds">' + pick(b.beds) + '</div>'
+ '<span class="p9c5-cap">' + ICON_PERSON + pick(b.guest) + '</span>'
+ '</div></div>';
}
box.innerHTML = html;
}
function buildFacility() {
var box = document.getElementById('p9c5Fac');
if (!box) return;
var html = '';
for (var i = 0; i < FACILITY.length; i++) {
var f = FACILITY[i];
var tag = f.link ? 'a' : 'div';
var attr = f.link ? ' href="' + f.link + '"' : '';
html += '<' + tag + ' class="cell" data-idx="' + i + '"' + attr + '>'
+ (BED_ICONS.get(f.icon) || '')
+ '<b>' + pick(f.name) + (f.link ? ICON_ARROW : '') + '</b>'
+ '<div class="fdesc">' + pick(f.desc) + '</div>'
+ '<div class="frow">'
+ '<span class="p9c5-cap">' + pick(f.tag) + '</span>'
+ '<span class="fprice">' + f.price + '</span>'
+ '</div>'
+ (f.link ? '<span class="fmore">' + t('seeMore') + '</span>' : '')
+ '</' + tag + '>';
}
box.innerHTML = html;
}
function buildAmen() {
var box = document.getElementById('p9c5Amen');
if (!box) return;
var html = '';
for (var i = 0; i < AMEN.length; i++) {
html += '<div class="item">' + ICON_CHECK + '<span>' + pick(AMEN[i]) + '</span></div>';
}
box.innerHTML = html;
}
function buildPhotoGrid(elId, urls) {
var box = document.getElementById(elId);
if (!box) return;
var html = '';
for (var i = 0; i < urls.length; i++) {
html += '<div class="cell">' + imgOrPh(urls[i]) + '</div>';
}
box.innerHTML = html;
}
function showToast(msg) {
var el = document.getElementById('p9c5Toast');
if (!el) return;
el.textContent = msg;
el.classList.add('on');
setTimeout(function() { el.classList.remove('on'); }, 1800);
}
function doShare() {
var url = SHARE_URL || (window.location ? window.location.href : '');
if (navigator.share) {
navigator.share({ title: t('shareTitle'), url: url }).catch(function() {});
} else if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showToast(t('toastCopied'));
}).catch(function() { showToast(t('toastFail')); });
}
}
function init() {
var root = document.getElementById('p9C05Page');
if (!root) return;
/* 모달을 body 직속으로 옮겨, 조상 요소의 transform 영향 없이
항상 '지금 보고 있는 화면' 정중앙에 뜨도록 함 */
var modal = document.getElementById('p9c5Modal');
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
if (modal) {
modal.addEventListener('click', function(e) {
if (e.target.closest('[data-p9c5-close]')) closeModal();
});
}
applyLang();
root.addEventListener('click', function(e) {
var langBtn = e.target.closest('[data-p9c5-lang]');
if (langBtn) {
var lang = langBtn.getAttribute('data-p9c5-lang');
if (lang !== currentLang) {
currentLang = lang;
applyLang();
}
return;
}
var closeBtn = e.target.closest('[data-p9c5-close]');
if (closeBtn) { closeModal(); return; }
var facLink = e.target.closest('#p9c5Fac a.cell');
if (facLink) {
e.preventDefault();
var idx = facLink.getAttribute('data-idx');
var f = FACILITY[idx ? Number(idx) : 0];
if (f && f.link) openModal(f.link, pick(f.name));
return;
}
var shareBtn = e.target.closest('[data-p9c5-share]');
if (shareBtn) doShare();
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeModal();
});
}
var modalTimer = null;
var savedScroll = 0;
function openModal(url, title) {
var m = document.getElementById('p9c5Modal');
var frame = document.getElementById('p9c5ModalFrame');
if (!m || !frame) return;
document.getElementById('p9c5ModalTitle').textContent = title || '';
var newLink = document.getElementById('p9c5ModalNew');
var fallLink = document.getElementById('p9c5ModalFallLink');
if (newLink) newLink.href = url;
if (fallLink) fallLink.href = url;
m.classList.remove('fallback');
frame.src = url;
m.classList.add('on');
savedScroll = window.pageYOffset || document.documentElement.scrollTop || 0;
document.body.style.overflow = 'hidden';
/* 외부에서 iframe 표시를 막는 경우를 대비한 대체 안내 */
var loaded = false;
frame.onload = function() { loaded = true; };
if (modalTimer) clearTimeout(modalTimer);
modalTimer = setTimeout(function() {
if (!loaded) m.classList.add('fallback');
}, 4000);
}
function closeModal() {
var m = document.getElementById('p9c5Modal');
var frame = document.getElementById('p9c5ModalFrame');
if (!m || !m.classList.contains('on')) return;
if (modalTimer) { clearTimeout(modalTimer); modalTimer = null; }
m.classList.remove('on');
m.classList.remove('fallback');
if (frame) frame.src = 'about:blank';
document.body.style.overflow = '';
if (savedScroll) window.scrollTo(0, savedScroll);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
[C05] White Shore
기본 6명 / 최대 14명
방 3개
침대 4개
화장실 2개
오션뷰
숯불바베큐
야외POOL
자쿠지

