* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 20px;
  background: lavenderblush;
  font-size: 11pt;
}

.floating-flower {
  position: fixed;
  left: 0;
  top: 0;

  font-size: 17pt;
  color: mediumslateblue;

  pointer-events: none;
  user-select: none;

  z-index: 9999;

  will-change: transform;
}

h1 {
  font-size: 13pt;
  font-weight: normal;
  color: mediumslateblue;
  margin-bottom: 10px;
}

small {
  font-family: monospace;
}

a {
  color: mediumslateblue;
}

/* ---------- Layout ---------- */

.container-top {
  display: flex;
  gap: 20px;
  height: 35vh;
}

.container-bottom {
  display: flex;
  gap: 20px;
  height: 53vh;
  margin-top: 20px;
}

.container-bottom > div {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 1px dotted rosybrown;
  overflow: hidden;
}

.item {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 10px;
  border: 1px dotted rosybrown;
  overflow-y: auto;
}

.container-bottom iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Cake ---------- */

.cake-container {
  position: fixed;
  right: -20px;
  bottom: -20px;
  z-index: 1000;
}

.cake {
  display: block;
  width: 180px;
  cursor: pointer;
}

  /* 블러 효과 */
body.cake-open > * {
  filter: blur(6px);
  transition: filter .2s;
}

/* 케이크와 메시지창은 블러 제외 */
body.cake-open .cake-container,
body.cake-open .cake-container * {
  filter: none;
}

body.cake-open > *:not(.cake-container) {
  filter: blur(6px);
  transition: filter .2s ease;
}

.cake-container {
  z-index: 9999;
}

.cake-container {
  z-index: 9999;
}

/* 평소에는 숨김 */
.cake-popup {
  display: none;

  position: absolute;
  right: 170px;   /* 케이크 왼쪽 */
  bottom: 50px;

  width: 250px;
  height: 230px;

  padding: 10px;

  background: lavenderblush;
  border: 1px dotted rosybrown;
  overflow-y: auto;

  word-break: keep-all;
}

/* 클릭했을 때만 표시 */
.cake-popup.show {
  display: block;
}

/* ---------- Reading ---------- */

li {
  margin-left: 16px;
  list-style-type: "⊹ ";
  margin-bottom: 7px;
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "→";
  display: inline-block;
  width: 1em;
  margin-right: .4em;
  transition: transform .2s;
}

details[open] summary::before {
  transform: rotate(90deg);
}

/* ---------- Itinerary ---------- */

.itinerary marquee {
  display: block;
  margin-bottom: 12px;
}

.itinerary table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.itinerary thead,
.itinerary tbody,
.itinerary tr {
  width: 100%;
}

.itinerary th,
.itinerary td {
  width: 25%;
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid slateblue;
  word-break: break-word;
}

.itinerary th {
  font-weight: normal;
}

@media (max-width: 700px) {
  body {
    margin: 10px;
    font-size: 10pt;
  }

  h1 {
    font-size: 12pt;
  }

  .container-top,
  .container-bottom {
    display: block;
    height: auto;
  }

  .item,
  .container-bottom > div {
    width: 100%;
    height: 30vh;
    margin-bottom: 10px;
  }

  .container-bottom {
    margin-top: 0;
  }

  .container-bottom iframe {
    width: 100%;
    height: 100%;
  }

  .cake {
    width: 150px;
  }

  .cake-popup {
    width: 180px;
    height: 140px;
    right: 120px;
    bottom: 35px;
  }

  .itinerary table {
    font-size: 9pt;
  }

  .itinerary th,
  .itinerary td {
    padding: 3px;
  }
}