#calendarSpaPage { height:100vh; min-height:0; --pink:#b64e73; --line:#dedde1; --hour-height:28px; font-family:Pretendard,"Noto Sans KR",sans-serif; color:#171725; background:#fbf4f5; }
@scope (#calendarSpaPage) {
* { box-sizing:border-box; }
body { margin:0; background:#fbf4f5; }
.side-rail { position:fixed; inset:0 auto 0 0; z-index:20; width:48px; display:flex; flex-direction:column; align-items:center; background:#261b21; }
.side-rail a { width:48px; height:50px; display:grid; place-items:center; color:white; text-decoration:none; font-size:20px; }
main { width:100%; height:100%; min-height:0; margin-left:0; padding:18px 38px; display:flex; flex-direction:column; overflow:hidden; background:transparent; }
body.embedded-calendar .side-rail { display:none; }
body.embedded-calendar main { margin-left:0; }
.page-header { width:100%; max-width:1500px; margin:0 auto; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.page-header p { margin:0 0 5px; color:var(--pink); font-size:10px; font-weight:800; letter-spacing:.16em; }
.page-header h1 { margin:0; font-size:28px; }
.page-header h1 span { margin-left:7px; font-size:16px; font-weight:500; }
.header-actions { display:flex; align-items:center; gap:9px; }
.header-actions button { height:40px; padding:0 15px; color:#8d5268; background:white; border:1px solid #e7d4dc; border-radius:9px; font-weight:700; cursor:pointer; }
.header-actions .instagram-share-button { display:flex; align-items:center; gap:7px; color:#fff; background:linear-gradient(135deg,#833ab4,#c13584 46%,#e1306c 72%,#f77737); border:0; box-shadow:0 7px 18px rgba(193,53,132,.2); }
.instagram-share-button span { font-size:18px; font-weight:900; }
.header-actions .instagram-share-button:hover { filter:brightness(1.05); transform:translateY(-1px); }
.header-actions button:disabled { opacity:.3; cursor:default; }
.calendar-frame-shell { position:relative; width:100%; max-width:1500px; min-height:0; margin:12px auto 0; flex:1 1 auto; }
.calendar-frame { width:100%; height:100%; min-height:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x; background:white; border:1px solid #e3dfe2; border-radius:16px; box-shadow:0 12px 35px rgba(48,27,36,.08); }
.calendar-page-arrow { position:absolute; top:45px; z-index:15; width:42px; height:42px; display:grid; place-items:center; padding:0 0 4px; color:#a94268; background:rgba(255,255,255,.96); border:1px solid #e6cbd4; border-radius:50%; box-shadow:0 7px 20px rgba(74,34,49,.17); transform:translateY(-50%); font-size:30px; line-height:1; cursor:pointer; transition:opacity 160ms ease,transform 160ms ease,background 160ms ease; }
.calendar-page-arrow:hover:not(:disabled) { color:white; background:#b64e73; transform:translateY(-50%) scale(1.06); }
.calendar-page-arrow:disabled { opacity:0; pointer-events:none; }
.calendar-page-arrow.previous { left:-17px; }
.calendar-page-arrow.next { right:-17px; }
.calendar-grid { position:relative; min-width:900px; display:grid; grid-template-columns:76px repeat(var(--visible-days),minmax(150px,1fr)); grid-template-rows:90px calc(var(--hours) * var(--hour-height)); }
.corner { position:sticky; top:0; left:0; z-index:8; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.day-header { position:sticky; top:0; z-index:7; height:90px; padding:10px 8px 8px; text-align:center; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.day-header span,.day-header strong,.day-header small { display:block; }
.day-header span { color:#8c858a; font-size:14px; font-weight:700; }
.day-header strong { width:34px; height:34px; margin:2px auto 1px; display:grid; place-items:center; background:#f1edef; border-radius:50%; font-size:17px; }
.day-header small { color:#80787c; font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; }
.time-axis { position:sticky; left:0; z-index:6; background:#fff; border-right:1px solid var(--line); }
.hour-label { position:absolute; right:9px; color:#6e696c; font-size:13px; font-weight:700; transform:translateY(-8px); }
.hour-label.first { transform:translateY(7px); }
.day-column { position:relative; border-right:1px solid var(--line); background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour-height) - 1px),var(--line) calc(var(--hour-height) - 1px),var(--line) var(--hour-height)); }
.event { position:absolute; z-index:2; min-height:12px; padding:5px 9px; display:flex; flex-direction:column; overflow:hidden; color:#642d42; background:#f8dfe8; border-left:5px solid var(--pink); border-radius:6px; box-shadow:0 2px 6px rgba(90,45,61,.1); transition:height 220ms ease, min-height 220ms ease, box-shadow 180ms ease, transform 180ms ease; }
.event.restaurant { color:#7c481f; background:#fff0de; border-left-color:#ed8a37; }
.event.travel { z-index:3; display:flex; align-items:center; color:#496678; background:#eaf3f8; border-left-color:#6a9db9; }
.event.travel strong { font-size:10px; }
.event.travel span { margin:0 0 0 auto; font-size:8px; }
.event.travel.compact { padding:0 5px; border-left-width:3px; border-radius:3px; line-height:1; }
.event.travel.compact strong { font-size:8px; line-height:1; }
.event.travel.compact span { display:none; }
.event strong,.event span { display:block; }
.event strong { overflow:hidden; font-size:15px; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.event span { margin-top:3px; font-size:12px; font-weight:600; opacity:.84; }
.event > .event-badge,.event > strong,.event > .event-korean,.event > span { flex:0 0 auto; }
.event-korean { display:block; margin-top:2px; overflow:hidden; color:#76676e; font-size:11px; font-style:normal; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.event-badge { margin:0 0 5px; display:flex; align-items:center; gap:5px; color:#9b4264; line-height:1; }
.event-badge i { font-size:15px; font-style:normal; }
.event-badge b { font-size:11px; font-weight:900; letter-spacing:.07em; }
.event.category-food,.event.category-cafe { background:#fff0de; border-left-color:#ed8a37; }
.event.category-food .event-badge,.event.category-cafe .event-badge { color:#b55e1f; }
.event.category-palace { background:#f2e9ff; border-left-color:#8a4fd1; }
.event.category-palace .event-badge { color:#7440b4; }
.event.category-park { background:#e7f6eb; border-left-color:#4e9a61; }
.event.category-park .event-badge { color:#397c4a; }
.event.category-popup { background:#fce8f7; border-left-color:#d44aa7; }
.event.category-popup .event-badge { color:#b52d8c; }
.event.category-shopping { background:#e8f2ff; border-left-color:#4d83c5; }
.event.category-shopping .event-badge { color:#386eaf; }
.event.category-spot .event-badge { color:#9b4264; }
.event.category-history_culture { background:#f2e9ff; border-left-color:#8a4fd1; }
.event.category-history_culture .event-badge { color:#7440b4; }
.event.category-art_culture { background:#fdeaf2; border-left-color:#c75582; }
.event.category-art_culture .event-badge { color:#a43d67; }
.event.category-nature_healing { background:#e7f6eb; border-left-color:#4e9a61; }
.event.category-nature_healing .event-badge { color:#397c4a; }
.event.category-k_culture { background:#fce8f7; border-left-color:#d44aa7; }
.event.category-k_culture .event-badge { color:#b52d8c; }
.event.category-shopping { background:#e8f2ff; border-left-color:#4d83c5; }
.event.category-shopping .event-badge { color:#386eaf; }
.event.category-food_local { background:#fff4d9; border-left-color:#d99b2b; }
.event.category-food_local .event-badge { color:#a86d10; }
.event.category-night_view { background:#e9e9fb; border-left-color:#5d60ba; }
.event.category-night_view .event-badge { color:#494b99; }
.event.category-experience_activity { background:#e5f6f4; border-left-color:#31998e; }
.event.category-experience_activity .event-badge { color:#25796f; }
.event.category-restaurant { background:#fff0de; border-left-color:#ed8a37; }
.event.category-restaurant .event-badge { color:#b55e1f; }
.event.category-cafe { background:#f5eadf; border-left-color:#a96f43; }
.event.category-cafe .event-badge { color:#80502d; }
.note-trigger { align-self:flex-start; margin-top:6px; padding:0; color:#a24b6b; background:none; border:0; font-size:13px; font-weight:900; text-align:left; cursor:pointer; }
.note-preview { position:relative; flex:1 1 0; min-height:0; margin:6px 0 0; display:grid; grid-template-columns:17px minmax(0,1fr); align-items:start; column-gap:3px; overflow:hidden; color:#684f59; font-size:13px; font-weight:700; line-height:1.45; cursor:pointer; scrollbar-width:thin; scrollbar-color:#c9839d transparent; }
.note-icon { display:block; width:17px; line-height:1.45; }
.note-text { display:block; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-preview.viewing-full { overflow-y:auto; }
.note-preview:hover { color:#a13f64; text-decoration:underline; text-underline-offset:2px; }
.note-editor { position:absolute; z-index:40; top:calc(100% - 5px); left:-5px; width:calc(100% + 10px); padding:10px; background:white; border:1px solid #dfbdca; border-radius:0 0 10px 10px; box-shadow:0 14px 25px rgba(73,34,49,.24); animation:noteSlide 180ms ease both; }
.event.note-open-upward .note-editor { top:auto; bottom:calc(100% - 5px); border-radius:10px 10px 0 0; box-shadow:0 -14px 25px rgba(73,34,49,.2); }
.note-editor textarea { width:100%; min-height:68px; padding:8px; resize:vertical; color:#3e3036; background:#fffafb; border:1px solid #ead7de; border-radius:7px; font:12px/1.4 inherit; outline:none; }
.note-editor textarea:focus { border-color:#bc6685; box-shadow:0 0 0 2px #f6dce5; }
.note-editor > div { margin-top:7px; display:flex; justify-content:flex-end; gap:6px; }
.note-editor button { padding:6px 10px; border:1px solid #e2cbd4; border-radius:6px; background:white; color:#80616d; font-size:10px; font-weight:800; cursor:pointer; }
.note-editor .note-save { color:white; background:#b64e73; border-color:#b64e73; }
.event.note-open { z-index:50; overflow:visible; }
@keyframes noteSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.event.compact-card { display:flex; flex-direction:column; justify-content:center; padding-block:3px; cursor:default; }
.event.compact-card .event-badge,.event.compact-card .event-korean,.event.compact-card > span { max-height:0; margin:0; overflow:hidden; opacity:0; transform:translateY(-7px); transition:max-height 220ms ease, opacity 160ms ease, transform 220ms ease, margin 220ms ease; }
.event.compact-card .note-trigger { display:none; }
.event.compact-card .note-preview { position:absolute; right:5px; top:50%; width:24px; height:24px; min-height:24px; margin:0; display:grid; grid-template-columns:1fr; place-items:center; overflow:hidden; transform:translateY(-50%); }
.event.compact-card .note-preview .note-icon { width:auto; font-size:13px; }
.event.compact-card .note-preview .note-text { display:none; }
.event.compact-card strong { flex:none; width:100%; font-size:15px; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.event.compact-card:hover,.event.compact-card.note-open { z-index:30; height:100px !important; min-height:100px; padding-block:6px; justify-content:flex-start; overflow:visible; box-shadow:0 12px 28px rgba(77,38,54,.24); transform:none; }
.event.compact-card:hover .event-badge,.event.compact-card.note-open .event-badge { max-height:24px; margin:0 0 5px; overflow:visible; opacity:1; transform:translateY(0); }
.event.compact-card:hover .event-korean,.event.compact-card.note-open .event-korean { max-height:18px; margin-top:2px; opacity:1; transform:translateY(0); }
.event.compact-card:hover > span,.event.compact-card.note-open > span { max-height:22px; margin-top:4px; overflow:visible; opacity:.84; transform:translateY(0); }
.event.compact-card:hover .note-trigger,.event.compact-card.note-open .note-trigger { display:grid; }
.event.compact-card:hover .note-preview,.event.compact-card.note-open .note-preview { position:relative; right:auto; top:auto; width:auto; height:auto; min-height:38px; max-height:58px; margin:6px 0 0; display:grid; grid-template-columns:17px minmax(0,1fr); place-items:initial; overflow:hidden; transform:none; flex:0 0 auto; }
.event.compact-card:hover .note-preview .note-icon,.event.compact-card.note-open .note-preview .note-icon { width:17px; font-size:inherit; }
.event.compact-card:hover .note-preview .note-text,.event.compact-card.note-open .note-preview .note-text { display:block; }
.event.compact-card.note-open { height:100px !important; min-height:100px; }
.event.compact-card.note-open .note-editor { left:-5px; width:calc(100% + 10px); transform:none; animation:noteSlide 180ms ease both; }
.empty { grid-column:1/-1; padding:80px; text-align:center; color:#8d858a; }
@media(max-width:700px){
  :scope{height:auto;bottom:calc(var(--mobile-nav-height,64px) + env(safe-area-inset-bottom))}
  main{margin-left:0;padding:22px 12px 10px}
  .side-rail,.side-rail a{width:42px}
  .page-header{align-items:flex-start;flex-direction:column}
  .header-actions{width:100%}
  .header-actions .instagram-share-button{margin-right:auto}
  .header-actions button{height:36px;padding:0 11px;font-size:12px}
  .calendar-frame{overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
  .calendar-grid{min-width:calc(76px + var(--visible-days)*150px);margin-bottom:18px}
  .calendar-page-arrow{width:36px;height:36px;font-size:25px}
  .calendar-page-arrow.previous{left:-7px}
  .calendar-page-arrow.next{right:-7px}
}

}