*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: Noto Sans KR, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='checkbox']:checked {
    appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='radio']:checked {
    appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {

  [type='checkbox']:indeterminate {
    appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-1\/2 {
  left: 50%;
}
.top-0 {
  top: 0px;
}
.z-40 {
  z-index: 40;
}
.z-\[70\] {
  z-index: 70;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-full {
  height: 100%;
}
.max-h-72 {
  max-height: 18rem;
}
.min-h-dvh {
  min-height: 100dvh;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-7 {
  width: 1.75rem;
}
.w-9 {
  width: 2.25rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-12 {
  min-width: 3rem;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[76px\] {
  min-width: 76px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  user-select: none;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-outline-variant\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(190 201 200 / 0.2);
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-outline-variant\/20 {
  border-color: rgb(190 201 200 / 0.2);
}
.border-outline-variant\/30 {
  border-color: rgb(190 201 200 / 0.3);
}
.border-outline-variant\/60 {
  border-color: rgb(190 201 200 / 0.6);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(0 106 106 / var(--tw-border-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-error-container {
  --tw-bg-opacity: 1;
  background-color: rgb(255 218 214 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(0 106 106 / var(--tw-bg-opacity, 1));
}
.bg-primary-fixed {
  --tw-bg-opacity: 1;
  background-color: rgb(160 240 240 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-secondary-container {
  --tw-bg-opacity: 1;
  background-color: rgb(210 229 245 / var(--tw-bg-opacity, 1));
}
.bg-surface-container {
  --tw-bg-opacity: 1;
  background-color: rgb(237 238 239 / var(--tw-bg-opacity, 1));
}
.bg-surface-container-low {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity, 1));
}
.bg-tertiary-fixed {
  --tw-bg-opacity: 1;
  background-color: rgb(255 220 198 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pr-0\.5 {
  padding-right: 0.125rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[21px\] {
  font-size: 21px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[23px\] {
  font-size: 23px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(186 26 26 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-on-background {
  --tw-text-opacity: 1;
  color: rgb(25 28 29 / var(--tw-text-opacity, 1));
}
.text-on-error-container {
  --tw-text-opacity: 1;
  color: rgb(147 0 10 / var(--tw-text-opacity, 1));
}
.text-on-primary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-on-primary-fixed {
  --tw-text-opacity: 1;
  color: rgb(0 32 32 / var(--tw-text-opacity, 1));
}
.text-on-secondary-container {
  --tw-text-opacity: 1;
  color: rgb(55 73 85 / var(--tw-text-opacity, 1));
}
.text-on-surface {
  --tw-text-opacity: 1;
  color: rgb(25 28 29 / var(--tw-text-opacity, 1));
}
.text-on-surface-variant {
  --tw-text-opacity: 1;
  color: rgb(62 73 72 / var(--tw-text-opacity, 1));
}
.text-on-tertiary-fixed {
  --tw-text-opacity: 1;
  color: rgb(49 19 0 / var(--tw-text-opacity, 1));
}
.text-outline {
  --tw-text-opacity: 1;
  color: rgb(110 121 121 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(0 106 106 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(79 97 110 / var(--tw-text-opacity, 1));
}
.text-tertiary {
  --tw-text-opacity: 1;
  color: rgb(150 74 0 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 106 106 / var(--tw-ring-opacity, 1));
}
.ring-primary\/30 {
  --tw-ring-color: rgb(0 106 106 / 0.3);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.hover\:bg-surface-container:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 238 239 / var(--tw-bg-opacity, 1));
}
.active\:bg-surface-container-high:active {
  --tw-bg-opacity: 1;
  background-color: rgb(231 232 233 / var(--tw-bg-opacity, 1));
}
:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
/* 장보기: 상품 가격 / 매장 행사 기간을 서로 다른 정보 위계로 표시한다. */
.shopping-section { --deal-ink: #253d37; --deal-muted: #526260; --deal-accent: #006a6a; --deal-line: #dce5e3; color: var(--deal-ink); background: #fff; border: 1px solid var(--deal-line); border-radius: 16px; padding: 16px; }
.deal-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.deal-heading h3 { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; }
.deal-refresh { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px -8px 0; color: var(--deal-muted); border-radius: 50%; }
.deal-segment { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: #edf3f2; }
.deal-segment button { flex: 1; min-height: 44px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--deal-muted); }
.deal-segment button[aria-pressed="true"] { background: var(--deal-accent); color: #fff; }
.deal-filter-row { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; align-items: center; padding-top: 12px; }
.deal-filter-row p, .deal-note { color: var(--deal-muted); font-size: 12px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.deal-filter-row select { max-width: 100%; min-height: 44px; border: 1px solid #c9d6d3; border-radius: 8px; color: var(--deal-ink); font-size: 12px; padding: 8px 28px 8px 10px; background-color: white; }
.deal-store-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 6px; }
.deal-store-filters button { min-height: 44px; padding: 7px 12px; border-radius: 8px; font-size: 12px; color: var(--deal-muted); }
.deal-store-filters button[aria-pressed="true"] { background: #e4f3f1; color: #005858; font-weight: 800; }
.deal-disclosure { margin: 10px 0 4px; font-size: 11px; line-height: 1.65; color: var(--deal-muted); word-break: keep-all; }
.deal-result-status { min-height: 30px; padding: 10px 0 4px; font-size: 11px; color: var(--deal-muted); }
.deal-item { padding: 19px 0 16px; border-top: 1px solid var(--deal-line); }
.deal-item-head { display: flex; gap: 12px; align-items: flex-start; }
.deal-image-well { display: grid; place-items: center; width: 80px; height: 80px; flex: 0 0 80px; border: 1px solid #e7eeec; border-radius: 10px; background: #fff; padding: 5px; overflow: hidden; }
.deal-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #fff; }
.deal-image-empty { display: grid; justify-items: center; gap: 5px; font-size: 10px; line-height: 1.4; color: var(--deal-muted); }
.deal-product-link { color: inherit; text-decoration: none; border-radius: 8px; min-height: 80px; }
.deal-item-copy { min-width: 0; flex: 1; }
.deal-source { font-size: 11px; color: var(--deal-muted); margin-bottom: 5px; }
.deal-item h4 { font-size: 14px; font-weight: 700; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.deal-product h4 { font-size: 15px; line-height: 1.5; }
.deal-price { font-size: 21px; font-weight: 800; letter-spacing: -.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.deal-price span { font-size: 13px; font-weight: 500; padding-left: 2px; }
.deal-product .deal-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; line-height: 1.45; }
.deal-price strong { font-size: inherit; font-weight: 800; }
.deal-price .deal-discount { font-size: 18px; font-weight: 800; color: var(--deal-accent); padding: 0; }
.deal-price .deal-price-unavailable { font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 0; }
.deal-reference { display: flex; flex-wrap: wrap; gap: 0 5px; margin-top: 7px; color: var(--deal-muted); font-size: 11px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.deal-reference + .deal-price { margin-top: 1px; }
.deal-price-note, .deal-checked { font-size: 11px; line-height: 1.7; color: var(--deal-muted); }
.deal-period { font-size: 16px; font-weight: 800; margin-top: 9px; font-variant-numeric: tabular-nums; }
.deal-period span { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 500; color: var(--deal-accent); }
.deal-conditions { display: grid; gap: 5px; list-style: none; margin: 12px 0 6px; padding: 0; color: #42544f; font-size: 12px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.deal-conditions li { padding-left: 10px; position: relative; }
.deal-conditions li::before { content: "·"; position: absolute; left: 0; }
.deal-item > .deal-note { margin-top: 10px; }
.deal-item-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 10px; }
.deal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.deal-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--deal-accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.deal-delayed { color: #85591b; }
.deal-period-detail { font-size: 12px; line-height: 1.75; color: var(--deal-muted); }
.deal-period-detail summary { min-height: 44px; padding-top: 11px; cursor: pointer; }
.deal-period-detail p { white-space: pre-line; overflow-wrap: anywhere; }
.deal-more { width: 100%; min-height: 48px; border: 1px solid var(--deal-line); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--deal-accent); }
.deal-scroll-sentinel { height: 1px; pointer-events: none; }
.deal-sources { display: grid; gap: 12px; margin-top: 14px; }
.deal-source-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: var(--deal-muted); font-size: 11px; line-height: 1.8; }
.deal-summary { font-size: 13px; line-height: 1.8; margin: 12px 0 5px; word-break: keep-all; overflow-wrap: anywhere; }
.deal-offers { list-style: none; margin: 0; padding: 0; }
.deal-offers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf2f1; }
.deal-offers strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.deal-offer-unit, .deal-offer-condition { display: block; margin-top: 2px; font-size: 11px; line-height: 1.7; color: var(--deal-muted); overflow-wrap: anywhere; }
.deal-offer-condition { color: var(--deal-accent); }
.deal-offers b { white-space: nowrap; font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.deal-offers b span { font-size: 11px; margin-left: 2px; font-weight: 500; }
.deal-offers-more summary { min-height: 44px; padding: 12px 0; font-size: 12px; font-weight: 700; color: var(--deal-accent); cursor: pointer; }

.deal-flyer-preview { display: block; width: 100%; margin: 16px 0; padding: 0; overflow: hidden; border: 1px solid #dbe6e3; border-radius: 12px; background: #f4f8f7; color: #254a42; text-align: left; }
.deal-flyer-preview > img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.deal-flyer-preview > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 10px 12px; font-size: 12px; }
.deal-flyer-preview strong { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.sheet.deal-flyer-sheet { max-width: 1100px; height: 100dvh; max-height: 100dvh; border-radius: 0; padding-top: env(safe-area-inset-top); animation: none; }
.deal-flyer-sheet .sheet-handle { display: none; }
.deal-flyer-sheet .sheet-header { gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e1e8e6; }
.deal-flyer-sheet h2 { font-size: 15px; }
.deal-flyer-sheet .sheet-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.deal-flyer-sheet .sheet-body > * { margin: 0; }
.deal-flyer-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; overflow: hidden; background: #eaf0ee; touch-action: none; overscroll-behavior: contain; user-select: none; }
.deal-flyer-stage.is-zoomed { cursor: grab; }
.deal-flyer-stage.is-zoomed:active { cursor: grabbing; }
.deal-flyer-image { flex: none; max-width: none; max-height: none; object-fit: contain; transform-origin: center; pointer-events: none; }
.deal-flyer-image[hidden], .deal-flyer-state[hidden] { display: none; }
.deal-flyer-state { position: absolute; padding: 24px; max-width: 360px; text-align: center; font-size: 14px; color: #425c55; }
.deal-flyer-controls { display: flex; flex: none; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid #dbe6e3; }
.deal-flyer-paging, .deal-flyer-zoom { display: flex; align-items: center; gap: 4px; }
.deal-flyer-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; background: #f0f5f3; color: #254a42; font-size: 14px; font-weight: 600; }
.deal-flyer-controls button[data-flyer=reset] { min-width: 56px; }
.deal-flyer-controls button:disabled { opacity: .4; cursor: default; }
.deal-flyer-controls button:not(:disabled):active { background: #dceae5; }
.deal-flyer-page { min-width: 44px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.deal-flyer-footer { display: flex; flex: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px 8px; font-size: 12px; color: #526961; }
.deal-flyer-footer .deal-link { display: inline-flex; align-items: center; min-height: 44px; }
.deal-flyer-preview:focus-visible, .deal-flyer-sheet button:focus-visible, .deal-flyer-stage:focus-visible { outline: 2px solid #16735f; outline-offset: -3px; }
@media (max-height: 480px) { .deal-flyer-footer p { display: none; } .deal-flyer-footer { justify-content: flex-end; padding-bottom: 0; } .deal-flyer-controls { padding: 4px 12px; } }
.deal-empty, .deal-error { font-size: 13px; line-height: 1.8; padding: 20px 0; color: var(--deal-muted); word-break: keep-all; }
.deal-error button { min-height: 44px; color: var(--deal-accent); font-weight: 700; text-decoration: underline; }
.shopping-section :is(button,a,select,summary):focus-visible { outline: 2px solid var(--deal-accent); outline-offset: 3px; }
.shopping-section button:disabled { opacity: .5; cursor: wait; }
.shopping-section ::selection { background: #cce6e2; color: var(--deal-ink); }
@media (min-width: 380px) { .deal-image-well { width: 88px; height: 88px; flex-basis: 88px; } }
@media (hover: hover) { .deal-product-link:hover h4, .deal-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 359px) { .shopping-section { padding: 12px; } .deal-product .deal-item-head { gap: 10px; } .deal-store-filters button { padding-inline: 9px; } }
/* 주변 도로: 방향과 지점 이름이 먼저 보이는 목록 */
.traffic-content { overflow: hidden; }
.traffic-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px 4px; }
.traffic-intro > p, .traffic-group-description { font-size: 12px; line-height: 1.7; color: #526260; word-break: keep-all; overflow-wrap: anywhere; }
.traffic-saved, .traffic-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; font-size: 12px; font-weight: 700; color: #006a6a; }
.traffic-saved { border-radius: 8px; padding-inline: 8px; margin-right: -8px; }
.traffic-saved.is-active { background: #e4f3f1; }
.traffic-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 16px; }
.traffic-direction { min-height: 44px; border: 1px solid #c9d6d3; border-radius: 10px; color: #405651; font-size: 13px; font-weight: 600; line-height: 1.5; padding: 8px; }
.traffic-direction.is-active { color: #fff; background: #006a6a; border-color: #006a6a; }
.traffic-group-description { padding: 12px 16px; margin: 0; min-height: 44px; }
.traffic-cameras { list-style: none; padding: 0; margin: 0 16px; }
.traffic-camera { border-top: 1px solid #e0e7e5; }
.traffic-camera-row { display: flex; align-items: center; gap: 8px; }
.traffic-camera-main { display: grid; flex: 1; min-width: 0; gap: 5px; text-align: left; padding: 17px 0; text-decoration: none; }
.traffic-camera-name { font-size: 14px; line-height: 1.55; font-weight: 700; color: #253d37; word-break: keep-all; overflow-wrap: anywhere; }
.traffic-camera-description { font-size: 12px; line-height: 1.65; color: #526260; word-break: keep-all; overflow-wrap: anywhere; }
.traffic-camera-action { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; color: #006a6a; }
.traffic-favorite { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex-shrink: 0; color: #64736f; border-radius: 50%; }
.traffic-favorite[aria-pressed="true"] { color: #006a6a; background: #e4f3f1; }
.traffic-open-map { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 10px; background: #006a6a; color: white; font-size: 13px; font-weight: 700; text-decoration: none; margin-top: 6px; }
.traffic-more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; width: 100%; font-size: 13px; font-weight: 600; color: #006a6a; border-top: 1px solid #e0e7e5; }
.traffic-footnote { padding: 12px 16px; font-size: 11px; line-height: 1.8; color: #526260; background: #f6f9f8; word-break: keep-all; overflow-wrap: anywhere; }
.traffic-message { padding: 24px 16px; font-size: 13px; line-height: 1.7; color: #526260; }
.traffic-refresh-error { margin: 0 16px 12px; font-size: 12px; line-height: 1.7; color: #526260; }
.traffic-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; color: #526260; text-align: center; }
.traffic-empty p { font-size: 14px; font-weight: 600; color: #253d37; }
.traffic-empty > span:not(.material-symbols-outlined) { font-size: 12px; line-height: 1.7; }
.traffic-content :is(button,a):focus-visible { outline: 2px solid #006a6a; outline-offset: 3px; }
.traffic-content ::selection { background: #c1e9e2; color: #173c34; }
#trafficPlayer { padding: 4px 16px 12px; border-bottom: 1px solid #e0e7e5; scroll-margin-top: 84px; }
.traffic-player-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding-block: 8px; }
.traffic-player-heading h4 { font-size: 14px; font-weight: 700; line-height: 1.65; color: #253d37; word-break: keep-all; overflow-wrap: anywhere; }
.traffic-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; color: #526260; }
#trafficVideo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #101d19; border-radius: 8px; }
.traffic-video-status { font-size: 11px; line-height: 1.8; color: #526260; padding-top: 10px; }
.traffic-player-message { padding: 12px 0; font-size: 13px; color: #526260; line-height: 1.8; }
.traffic-player-message button { width: 100%; margin-top: 12px; }
.traffic-player-fallback { font-size: 12px; line-height: 1.8; color: #526260; }
.traffic-player-fallback a, .traffic-player-fallback summary { display: flex; gap: 5px; align-items: center; min-height: 44px; color: #006a6a; font-weight: 600; cursor: pointer; }
.traffic-player-fallback p { word-break: keep-all; overflow-wrap: anywhere; }
.traffic-fallback-actions { display: flex; gap: 20px; }
@media (hover: hover) { .traffic-camera-main:hover .traffic-camera-name { text-decoration: underline; text-underline-offset: 3px; } .traffic-favorite:hover, .traffic-saved:hover, .traffic-direction:not(.is-active):hover { background: #e4f3f1; } }
html { background: #e9ebee; }
body {
    font-family: 'Noto Sans KR', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
}
#app { background: #f3f4f6; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; }
.msf { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.card { background: #fff; border-radius: 16px; border: 1px solid rgba(190, 201, 200, 0.4); }
.pressable { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.pressable:active { transform: scale(0.985); }

/* 칩 */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; color: #3e4948; border: 1px solid rgba(110, 121, 121, 0.35); white-space: nowrap; line-height: 1; }
.chip-on { background: #006a6a; color: #fff; border-color: #006a6a; }

/* 하단 내비 */
#bottomNav { padding-bottom: var(--safe-b); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(190, 201, 200, 0.5); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; font-weight: 600; color: #6e7979; background: none; border: 0; }
.nav-item .ico { width: 56px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.nav-item.active { color: #004f4f; }
.nav-item.active .ico { background: #a0f0f0; }

/* 상단 바 */
#topBar { padding-top: var(--safe-t); background: rgba(243, 244, 246, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* 바텀 시트 */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; animation: fade-in 0.15s ease; }
.sheet { width: 100%; max-width: 520px; background: #fff; border-radius: 22px 22px 0 0; max-height: 88dvh; display: flex; flex-direction: column; padding-bottom: var(--safe-b); animation: slide-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet-handle { flex-shrink: 0; width: 40px; height: 4px; border-radius: 999px; background: #d9dadb; margin: 10px auto 0; }
.sheet-header { flex-shrink: 0; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 32px; }
.sheet-footer { flex-shrink: 0; padding: 12px 20px 16px; border-top: 1px solid #dce3e3; background: #fff; }
.sheet-done { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: #006a6a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }

/* 로딩 */
.skeleton { background: linear-gradient(90deg, #eceff1 25%, #f6f7f8 37%, #eceff1 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* 토스트 */
.toast { background: #2e3132; color: #f0f1f2; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); animation: fade-in 0.15s ease; white-space: nowrap; }

/* 혼잡도 히트맵 */
.heat { display: grid; grid-template-columns: 18px repeat(24, minmax(0, 1fr)); gap: 2px; }
.heat > div { height: 14px; border-radius: 2px; }

/* 배치도 */
#siteMap { touch-action: manipulation; }
#siteMap .poi-pin { cursor: pointer; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .rot { transform: rotate(180deg); }
.rot { transition: transform 0.15s; }

/* Shared scale for the apartment's mobile app. */
:root {
  --lake-accent: #006a6a;
  --lake-ink: #191c1d;
  --lake-muted: #536260;
  --lake-line: #dce3e2;
  --lake-soft: #eef5f4;
}
body { font-size: 14px; line-height: 1.6; color: var(--lake-ink); }
::selection { background: #c3e9e4; color: #003b3b; }
input, textarea { caret-color: var(--lake-accent); }
a { text-underline-offset: 3px; }
button, summary, a, input, select, [role="button"] { -webkit-tap-highlight-color: transparent; }
:is(button, summary, a, input, select, [role="button"]):focus-visible { outline: 2px solid var(--lake-accent); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }
#app button, .sheet button { min-height: 44px; }
#app button[aria-label], .sheet button[aria-label] { min-width: 44px; }
#views { padding-top: 12px; }
#views > .view > * + * { margin-top: 16px; }
#view-town > section + section, #view-outdoor > section + section { margin-top: 28px; }
.card { border-color: var(--lake-line); }
.font-extrabold { font-weight: 700; }
.chip { min-height: 40px; padding: 9px 12px; font-weight: 600; }
#topBar { background: #f3f4f6; backdrop-filter: none; }
#topBar > div { min-height: 68px; height: auto; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
#topTitle { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
#topSub { margin-top: 4px; font-size: 12px; }
#topActions { max-width: 46%; }
#sunPosLabel { text-align: right; font-size: 11px; }
#bottomNav { max-width: 520px; margin-inline: auto; background: #fff; backdrop-filter: none; }
.nav-item { min-height: 64px; padding-block: 9px 7px; gap: 3px; color: var(--lake-muted); }
.nav-item.active .ico { background: #d4eeea; }
.nav-item.active { color: #004f4f; font-weight: 700; }
.home-card > header { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.home-card > header h3 { font-size: 14px; color: var(--lake-ink); }
.home-card { position: relative; }
#app .home-card-link { display: inline-flex; align-items: center; gap: 6px; min-height: 0; text-align: left; }
.home-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; cursor: pointer; }
.home-card-link:focus-visible { outline: none; }
.home-card-link:focus-visible::after { outline: 2px solid var(--lake-accent); outline-offset: 3px; }
.home-card > header > span { margin-left: auto; font-size: 11px; }
.home-card p { overflow-wrap: anywhere; }
.toast { max-width: calc(100vw - 32px); white-space: normal; width: max-content; line-height: 1.6; border-radius: 12px; }
.sheet-body { overscroll-behavior: contain; }
.sheet summary, .source-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

/* The transparent native switch owns interaction; the sibling owns appearance. */
.switch-control { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 44px; flex: 0 0 48px; }
input.switch[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.switch-track { display: block; position: relative; width: 44px; height: 26px; border: 1px solid #849591; border-radius: 999px; background: #d9e1df; pointer-events: none; transition: background-color .18s ease, border-color .18s ease; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .18); transition: transform .18s ease; }
.switch:checked + .switch-track { background: var(--lake-accent); border-color: var(--lake-accent); }
.switch:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch:focus-visible + .switch-track { outline: 2px solid var(--lake-accent); outline-offset: 4px; }
.switch:disabled { cursor: not-allowed; }
.switch:disabled + .switch-track { opacity: .45; }

.settings-heading { display: flex; align-items: center; gap: 10px; }
.settings-title { flex: 1; font-size: 15px; line-height: 1.5; font-weight: 700; }
.settings-icon { font-size: 21px; color: var(--lake-accent); }
.settings-chevron { font-size: 20px; color: var(--lake-muted); transition: transform .15s; }
.settings-description { display: block; font-size: 12px; color: var(--lake-muted); line-height: 1.65; margin-top: 5px; }
.settings-display > h2 { padding: 0 2px; }
.settings-display > .settings-description { margin: 6px 2px 14px; }
.settings-display-body { padding: 0 16px; }
.feature-group { min-width: 0; padding: 4px 0 8px; }
.feature-group + .feature-group { border-top: 1px solid var(--lake-line); }
.feature-group legend { float: left; width: 100%; padding-top: 16px; padding-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--lake-muted); }
.feature-group legend + * { clear: both; }
.feature-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding-block: 10px; cursor: pointer; }
.feature-icon { color: var(--lake-accent); font-size: 22px; flex-shrink: 0; }
.feature-copy { flex: 1; min-width: 0; }
.feature-name { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
.feature-desc { display: block; font-size: 12px; line-height: 1.5; margin-top: 3px; color: var(--lake-muted); word-break: keep-all; overflow-wrap: anywhere; }
.feature-child { padding-left: 12px; }
.feature-child .feature-icon { font-size: 18px; }
.feature-row.is-disabled { cursor: default; }
.feature-row.is-disabled .feature-name, .feature-row.is-disabled .feature-icon { color: #687572; }
#view-settings > .settings-group { margin-top: 28px; }
.settings-group-title { font-size: 14px; font-weight: 700; margin: 0 2px 10px; }
.settings-sections { overflow: hidden; }
.settings-section + .settings-section, .settings-action { border-top: 1px solid var(--lake-line); }
.settings-section > summary { padding: 17px 16px; cursor: pointer; }
.settings-section > summary > .settings-description { margin-left: 31px; margin-top: 3px; }
.settings-section[open] > summary .settings-chevron { transform: rotate(180deg); }
.settings-section[open] > summary { background: #f8fbfa; }
.settings-body { padding: 16px; border-top: 1px solid var(--lake-line); }
.settings-body button { word-break: keep-all; }
.settings-body > details > summary { min-height: 44px; }
.settings-help { font-size: 12px; line-height: 1.7; color: var(--lake-muted); overflow-wrap: anywhere; }
.settings-info { font-size: 13px; line-height: 1.75; }
.settings-info > div + div { margin-top: 16px; }
.settings-info dt { font-weight: 600; margin-bottom: 4px; }
.settings-info dd { color: var(--lake-muted); }
.settings-info a { text-decoration: underline; }
.info-list { list-style: disc; padding-left: 20px; margin: 0 0 12px; overflow-wrap: anywhere; }
.info-list > li + li { margin-top: 8px; }
.info-list strong { color: var(--lake-ink); font-weight: 600; }
.shade-diagnostics section + section { margin-top: 18px; }
.shade-diagnostics h4 { color: var(--lake-ink); font-weight: 600; margin-bottom: 6px; }
.settings-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px; text-align: left; font-size: 14px; }
.settings-action > span:first-child { color: var(--lake-muted); font-size: 21px; }
.settings-action > span:nth-child(2) { flex: 1; }
.settings-action > span:last-child { color: var(--lake-muted); font-size: 20px; }
.app-version { text-align: center; color: var(--lake-muted); font-size: 12px; padding: 20px 0 0; }
.secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 14px; background: var(--lake-soft); color: #005654; border-radius: 10px; font-size: 13px; font-weight: 600; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; min-height: 44px; color: var(--lake-muted); border-radius: 10px; }
.source-details { font-size: 12px; line-height: 1.75; color: var(--lake-muted); }
.source-details > summary { gap: 6px; font-weight: 600; }
.source-details > summary::after { content: "+"; margin-left: auto; font-size: 16px; }
.source-details[open] > summary::after { content: "−"; }
.source-details > p { padding-bottom: 12px; }
.shade-controls input { font-variant-numeric: tabular-nums; min-height: 44px; }
#setHomeZone button, .bus-arrival-status, #shadeList { font-variant-numeric: tabular-nums; }
.timebar-control { position: relative; min-height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: pan-y; border-radius: 6px; }
.timebar-control:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: 3px; }
.timebar-track { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--lake-line); }
.timebar-span { height: 100%; flex-shrink: 0; }
.timebar-now { position: absolute; top: calc(50% - 9px); height: 18px; width: 2px; background: var(--lake-ink); border-radius: 2px; pointer-events: none; }
.timebar-tooltip { position: absolute; bottom: calc(100% - 4px); z-index: 10; width: max-content; max-width: 100%; padding: 8px 10px; border-radius: 8px; background: var(--lake-ink); color: #fff; font-size: 12px; line-height: 1.6; box-shadow: 0 4px 12px rgb(11 31 58 / .16); overflow-wrap: anywhere; }
.timebar-tooltip[hidden] { display: none; }
.timebar-times { display: flex; justify-content: space-between; color: var(--lake-muted); font-size: 12px; line-height: 1.5; margin-top: -7px; font-variant-numeric: tabular-nums; }
.settings-body [data-action="fav-chip"] { width: 44px; height: 44px; }
.charger-dot { width: 44px; height: 44px; flex: 0 0 44px; }
.bg-emerald-500.text-white { background-color: #117d55; }
.bg-amber-500.text-white { background-color: #f1b650; color: #543207; }
.bg-red-500.text-white { background-color: #b93833; }
.bg-gray-300.text-white { color: #374151; }
#chargerZoneChips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
#chargerZoneChips > button:last-child { margin-left: 0; }
@media (hover: hover) {
  .home-card:hover { border-color: #91b8b1; }
  .settings-action:hover, .settings-section > summary:hover, .feature-row:not(.is-disabled):hover { background: #f5f9f8; }
  .secondary-button:hover, .icon-button:hover { background: #deeeeb; }
}
@media (max-width: 359px) {
  #views { padding-inline: 12px; }
  .settings-display-body, .settings-body { padding-inline: 12px; }
  .feature-row { gap: 8px; }
  .feature-child { padding-left: 8px; }
  .feature-icon { font-size: 20px; }
  .bus-arrival { flex-wrap: wrap; }
  .bus-arrival-status { width: 100%; justify-content: flex-end; }
  #topActions { max-width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

#outdoorCard, #playgroundPanel, #town-bus, #town-waste, #town-notice { scroll-margin-top: calc(84px + var(--safe-t)); }

/* Georeferenced site plan: fixed-size labels, quiet terrain, explicit map controls. */
.map-plan-label { pointer-events: none; }
@media (max-width: 360px) { .map-plan-secondary { display: none; } }
.site-map-wrap { isolation: isolate; background: #e9ece5; }
#siteMap { display: block; width: 100%; height: auto; aspect-ratio: 1.06; touch-action: pan-y; font-family: 'Noto Sans KR', system-ui, sans-serif; }
#siteMap:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: -2px; }
#siteMap .poi-pin:focus { outline: none; }
#siteMap .poi-pin:focus-visible .map-pin-disc { stroke: #003e39; stroke-width: 3px; }
#siteMap .poi-pin:hover .map-pin-disc { stroke: #003e39; }
.map-building-label { pointer-events: none; }
.map-compass { position: absolute; left: 12px; top: 12px; width: 32px; pointer-events: none; }
.map-compass svg { width: 32px; height: 40px; }
.map-compass text { font-size: 11px; font-weight: 700; fill: #34584a; }
.map-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 0; }
.map-navigation p { color: var(--lake-muted); font-size: 11px; line-height: 1.6; }
.map-sun { position: absolute; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 4px; padding: 4px 7px; background: rgb(255 254 249 / .92); border-radius: 4px; color: #6f551b; font-size: 11px; pointer-events: none; }
.map-sun svg { width: 17px; height: 17px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px 6px; color: var(--lake-muted); font-size: 11px; }
.map-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.map-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.map-dot-sun { background: #fbbf24; }.map-dot-shade { background: #64748b; }.map-dot-partial { background: #2dd4bf; }.map-dot-cloud { background: repeating-linear-gradient(135deg,#e2e8f0 0 2px,#94a3b8 2px 4px); }
.map-attribution { padding: 0 16px 14px; color: var(--lake-muted); font-size: 10px; line-height: 1.7; }
.map-attribution a { text-decoration: underline; }

/* 지하주차장 충전 지도: 도면 좌표 평면(SVG)은 확대되고, 글자·충전 구역 표시(HTML)는 화면 크기를 유지한다. */
.pk-meta { padding: 0 16px 10px; font-size: 12px; color: var(--lake-muted); font-variant-numeric: tabular-nums; }
.pk-meta b { color: var(--lake-ink); font-weight: 700; }
.pk-map { position: relative; overflow: hidden; background: #eef1ee; border-block: 1px solid var(--lake-line); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pk-map.is-zoomed { touch-action: none; cursor: grab; }
.pk-map.is-zoomed:active { cursor: grabbing; }
.pk-map:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: -2px; }
#parkingMap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pk-floor { fill: #dde3e7; }
.pk-wall { fill: none; stroke: #74838e; stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-rows rect { fill: #fbfcfc; stroke: #b3bdc4; stroke-width: .7px; vector-effect: non-scaling-stroke; }
.pk-stalls { fill: none; stroke: #ccd3d8; stroke-width: .5px; vector-effect: non-scaling-stroke; }
.pk-map.is-detail .pk-stalls { stroke: #a8b3bb; stroke-width: .8px; }
.pk-buildings polygon { fill: #b7a98a; fill-opacity: .3; stroke: #8f8265; stroke-opacity: .8; stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-ramps polygon { fill: url(#pkRampHatch); stroke: #7f8e99; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pk-ramp-arrow { fill: none; stroke: #4a5964; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-gates path { fill: #006a6a; }
.pk-zone-fill { fill: #12a05a; stroke: #0a6e3d; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.pk-zone-bolt { fill: #fff; }
.pk-zone-halo { fill: none; stroke: #12a05a; stroke-width: 3px; vector-effect: non-scaling-stroke; opacity: 0; }
.pk-zone.is-on .pk-zone-halo { opacity: 1; animation: pk-pulse 1.6s ease-in-out infinite; }
.pk-zone.is-filtered { display: none; }
@keyframes pk-pulse { 0%, 100% { opacity: .95; } 50% { opacity: .2; } }
.pk-labels { position: absolute; inset: 0; pointer-events: none; }
.pk-labels > * { position: absolute; left: 0; top: 0; }
.pk-label { padding: 2px 3px; border-radius: 4px; color: #4a4232; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.pk-label.is-hidden, .pk-pin.is-hidden { visibility: hidden; }
.pk-ramp-label { padding: 3px 5px; background: rgb(255 255 255 / .9); color: #384852; font-size: 10.5px; font-weight: 600; text-shadow: none; box-shadow: 0 0 0 1px rgb(127 142 153 / .35); }
.pk-gate-label { padding: 3px 5px; background: rgb(255 255 255 / .92); color: #00504f; text-shadow: none; box-shadow: 0 0 0 1px rgb(0 106 106 / .3); }
.pk-pin { --pin: #0d8a4b; isolation: isolate; pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px 0 3px; border-radius: 999px; background: var(--pin); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgb(0 0 0 / .22), 0 0 0 1.5px #fff; cursor: pointer; }
#app .pk-pin { min-width: 0; min-height: 0; }
/* 보이는 크기는 작게, 누르는 영역은 44px 로 */
.pk-pin::before { content: ""; position: absolute; inset: -11px -2px; }
.pk-pin::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -3px; z-index: -1; width: 8px; height: 8px; margin-left: -4px; background: inherit; border-radius: 0 0 2px 0; transform: rotate(45deg); box-shadow: 1.5px 1.5px 0 #fff; }
.pk-pin.is-below::after { top: -3px; bottom: auto; border-radius: 2px 0 0 0; box-shadow: -1.5px -1.5px 0 #fff; }
.pk-pin svg { width: 12px; height: 12px; fill: currentColor; }
.pk-pin-no { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 1px; border-radius: 50%; background: #fff; color: var(--pin); font-size: 10px; font-weight: 800; }
.pk-pin-live { margin-left: 3px; padding-left: 6px; border-left: 1px solid rgb(255 255 255 / .45); font-weight: 700; }
.pk-pin.is-on { --pin: #064e2b; }
/* 빈 충전기가 없으면 빨강, 상태를 갱신해야 하면 회색 (상태 점과 같은 뜻) */
.pk-pin.is-full { --pin: #b04a52; }
.pk-pin.is-full.is-on { --pin: #7a2a31; }
.pk-pin.is-stale { --pin: #5f6d75; }
.pk-pin.is-stale.is-on { --pin: #3c474e; }
.pk-pin:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.pk-compass { position: absolute; top: 8px; right: 10px; width: 22px; pointer-events: none; }
.pk-compass svg { display: block; width: 22px; height: 28px; }
.pk-compass text { fill: #34584a; font-size: 8px; font-weight: 800; }
.pk-compass path { fill: #34584a; }
.pk-scale { position: absolute; left: 10px; bottom: 8px; padding: 2px 4px 3px; background: rgb(255 255 255 / .85); border-radius: 3px; pointer-events: none; }
#parkingScaleBar { display: block; height: 16px; border: solid #3f554a; border-width: 0 1px 2px; color: #2c3e36; font-size: 10px; line-height: 12px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 0 16px; }
.pk-toolbar p { min-width: 0; color: var(--lake-muted); font-size: 11.5px; line-height: 1.4; }
.pk-controls { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
.pk-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; color: #24423b; font-size: 12px; font-weight: 700; }
.pk-controls button:disabled { color: #a3b0ad; }
.pk-controls button[hidden] { display: none; }
.pk-controls button:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: -2px; }
.pk-zone-list { display: grid; gap: 6px; padding: 4px 12px 4px; }
.pk-zone-list:empty { display: none; }
/* 지도 구역 번호 배지: 목록·즐겨찾기·상세에서 지도 위 번호와 같은 번호 */
.pk-zone-badge { display: inline-grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: #0d8a4b; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.charger-dot-groups { display: grid; }
.charger-dot-group { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.charger-dot-group + .charger-dot-group { border-top: 1px solid var(--lake-line); }
.charger-dot-place { display: flex; flex: 0 0 92px; align-items: center; gap: 5px; min-width: 0; color: var(--lake-ink); font-size: 12px; font-weight: 700; }
.charger-dot-group .charger-dot-list { flex: 1; min-width: 0; }
.charger-row-place { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 0; color: var(--lake-muted); font-size: 12px; font-weight: 600; }
.charger-bay-place { display: flex; align-items: center; gap: 4px; padding-left: 15px; color: var(--lake-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.charger-bay-place .pk-zone-badge { flex-basis: 15px; width: 15px; height: 15px; font-size: 9px; }
/* 상세 시트의 위치: 작은 주차장 지도 */
.charger-place { display: grid; gap: 8px; }
.charger-place-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.charger-place-title b { flex-shrink: 0; color: var(--lake-ink); font-weight: 800; }
.charger-place-title span:last-child { min-width: 0; overflow: hidden; color: var(--lake-muted); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pk-mini { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--lake-line); border-radius: 12px; background: #eef1ee; }
.pk-mini > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pk-mini .pk-ramps polygon { fill: url(#pkRampHatchMini); }
/* 다른 구역은 회색으로 낮춰 이 충전기의 구역만 눈에 띄게 한다 */
.pk-mini .pk-zone:not(.is-on) .pk-zone-fill { fill: #c4cdc9; stroke: #a7b2ad; }
.pk-mini .pk-zone:not(.is-on) .pk-zone-bolt { fill: #eef1ee; }
.pk-mini-labels { position: absolute; inset: 0; pointer-events: none; }
.pk-mini-labels > * { position: absolute; }
.pk-mini-label { transform: translate(-50%, -50%); }
.pk-mini-pin { transform: translate(-50%, calc(-100% - 6px)); cursor: default; pointer-events: none; }
.pk-mini-pin.is-below { transform: translate(-50%, 6px); }
.charger-place-go { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border-radius: 12px; background: #e6f2ec; color: #0b6b3c; font-size: 13px; font-weight: 700; }
.charger-place-go:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: 2px; }
.pk-zone-empty { padding: 14px 10px; border-radius: 12px; background: #f4f6f5; color: var(--lake-muted); font-size: 12.5px; text-align: center; }
.pk-zone-item { border: 1px solid transparent; border-radius: 12px; background: #f4f6f5; }
.pk-zone-item.is-on { border-color: #0d8a4b; background: #fff; box-shadow: inset 0 0 0 1px #0d8a4b; }
.pk-zone-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 12px; text-align: left; }
.pk-zone-row:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: 2px; }
.pk-zone-no { display: inline-grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: #0d8a4b; color: #fff; font-size: 12px; font-weight: 800; }
.pk-zone-text { flex: 1; min-width: 0; }
.pk-zone-text b { display: block; color: var(--lake-ink); font-size: 14px; font-weight: 700; }
.pk-zone-text span { display: block; margin-top: 2px; color: var(--lake-muted); font-size: 11.5px; line-height: 1.45; }
.pk-zone-count { flex-shrink: 0; color: var(--lake-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pk-zone-count b { margin-right: 1px; color: #0d8a4b; font-size: 18px; font-weight: 800; }
.pk-zone-go { color: #7b8a87; }
.pk-zone-item.is-on .pk-zone-go { color: #0d8a4b; }
.pk-zone-chargers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 10px 8px 46px; color: var(--lake-muted); font-size: 11px; }
.pk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; color: var(--lake-muted); font-size: 11px; }
.pk-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pk-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.pk-legend .is-zone { background: #12a05a; }
.pk-legend .is-stall { background: #fbfcfc; box-shadow: inset 0 0 0 1px #b3bdc4; }
.pk-legend .is-building { background: rgb(183 169 138 / .45); box-shadow: inset 0 0 0 1px #8f8265; }
.pk-legend .is-ramp { background: repeating-linear-gradient(135deg, #cfd6dc 0 2px, #9fadb7 2px 3.5px); box-shadow: inset 0 0 0 1px #7f8e99; }
.charger-status-light.is-available { background: #258358; }
.charger-status-light.is-charging, .charger-status-light.is-error { background: #bd5960; }
.charger-status-light.is-unknown { background: #83919a; }
@media (hover: hover) {
  .pk-zone-row:hover { background: rgb(13 138 75 / .05); }
  .pk-controls button:not(:disabled):hover { background: var(--lake-soft); color: #006a6a; }
}
.charger-favorites { padding: 0 2px; }
.charger-favorite-list { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 5px; scrollbar-width: thin; scrollbar-color: #b8c6c2 transparent; }
.charger-bay { flex: 0 0 auto; min-width: 106px; min-height: 62px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--lake-line); border-radius: 12px; background: #fff; color: var(--lake-ink); font-variant-numeric: tabular-nums; }
.charger-bay:hover:not(:disabled), .charger-status-dot:hover:not(:disabled) { background: #f0f5f2; }
.charger-bay:focus-visible, .charger-status-dot:focus-visible { outline: 2px solid var(--lake-accent); outline-offset: 2px; }
.charger-bay:disabled, .charger-status-dot:disabled { cursor: default; }
.charger-bay-number { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; line-height: 1.4; }
.charger-bay-status { padding-left: 15px; font-size: 11px; color: var(--lake-muted); white-space: nowrap; }
.charger-dot-list { display: flex; flex-wrap: wrap; gap: 2px; }
.charger-status-dot { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.charger-status-light { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }
.charger-status-dot .charger-status-light { width: 11px; height: 11px; }
.charger-status-dot.is-favorite .charger-status-light { outline: 1px solid currentColor; outline-offset: 3px; color: #6f8494; }


.developer-support { padding: 18px 16px; margin-top: 24px; }
.developer-support h2 { font-size: 15px; font-weight: 700; line-height: 1.6; }
.developer-support-title { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; white-space: nowrap; }
.developer-support-title > span { color: var(--lake-accent); }
.developer-support h2 small { font-size: 12px; font-weight: 400; color: var(--lake-muted); word-break: keep-all; }
.developer-chat-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px; margin-top: 10px; border-radius: 10px; background: #fee500; color: #29221b; font-size: 14px; font-weight: 700; text-align: center; }
.developer-chat-link:hover { background: #f1d900; }
.developer-mail-link { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 6px; color: var(--lake-muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.developer-mail-link:hover { color: var(--lake-accent); text-decoration: underline; }

/* Distinct station identifiers. */
.charger-dot { min-width: 52px !important; width: auto; padding-inline: 8px; border-radius: 12px; }

/* 행사 피드 */
.event-heading h2 { font-size: 21px; font-weight: 750; margin: 4px 0 6px; }
.event-heading p, .event-help, .event-status { color: #627471; font-size: 12px; line-height: 1.65; }
.event-filters { display: flex; gap: 8px; margin-top: 18px; }
.event-chip { border: 1px solid #c9d9d4; border-radius: 24px; padding: 10px 18px; min-height: 44px; font-size: 14px; background: white; color: #36534c; }
.event-chip[aria-pressed="true"] { background: #004f4f; color: white; border-color: #004f4f; }
.event-chip:focus-visible, .event-more:focus-visible { outline: 3px solid #379786; outline-offset: 3px; }
.event-help { margin: 10px 0 18px; }
.event-results { display: grid; gap: 12px; }
.event-card { padding: 20px; }
.event-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 650; color: #267368; }
.event-card h3 { font-size: 17px; line-height: 1.5; font-weight: 700; margin: 12px 0 8px; overflow-wrap: anywhere; }
.event-place { font-size: 13px; line-height: 1.6; color: #415952; }
.event-target, .event-booking { font-size: 12px; color: #63756f; line-height: 1.6; margin-top: 5px; }
.event-card-footer { border-top: 1px solid #e1e9e5; margin-top: 16px; padding-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #627471; }
.event-card-footer a { color: #005b50; font-size: 12px; font-weight: 650; min-height: 30px; }
.event-more { width: 100%; border: 1px solid #c9d9d4; background: white; color: #004f4f; border-radius: 14px; padding: 14px; margin-top: 16px; font-weight: 700; }
.event-more:disabled { opacity: .5; }
.event-empty { padding: 28px 20px; font-size: 14px; line-height: 1.7; color: #63756f; }
.event-status { margin: 16px 0; text-align: center; }
@media(max-width: 360px) { .nav-item .ico { width: 44px; } .event-chip { padding-inline: 14px; } }

.event-occurrences { font-size: 12px; line-height: 1.8; color: #415952; margin-top: 10px; }
.event-occurrences summary { cursor: pointer; min-height: 36px; padding-block: 6px; }
/* Nearby library search in the other tab. */
.library-form { padding: 16px; }
.library-input-row { display: flex; gap: 8px; }
#app .library-input-row input { min-width: 0; flex: 1; height: 44px; padding: 10px 12px; border: 1px solid #bec9c8; border-radius: 10px; font-size: 16px; background: #fff; color: #191c1d; }
#app .library-input-row input:focus { border-color: #006a6a; outline: 2px solid #006a6a; outline-offset: 1px; box-shadow: none; }
.library-input-row button { display: flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; padding: 0 12px; border-radius: 10px; background: #006a6a; color: #fff; font-size: 13px; font-weight: 700; }
.library-filters { display: flex; gap: 6px; margin-top: 10px; }
.library-filters [aria-pressed="true"] { background: #006a6a; border-color: #006a6a; color: #fff; }
.library-results { display: grid; gap: 10px; }
.library-search-summary { margin: 12px 2px 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.library-result-group { overflow: hidden; }
.library-result-group > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #edeeef; }
.library-result-group h4 { font-size: 13px; font-weight: 800; }
.library-result-group > header > span { flex-shrink: 0; font-size: 12px; color: #3e4948; }
.library-book { padding: 14px 16px; border-bottom: 1px solid #edeeef; overflow-wrap: anywhere; }
.library-book h5 { font-size: 14px; font-weight: 700; line-height: 1.6; }
.library-book h5 a { color: #191c1d; }
.library-book-meta { margin-top: 4px; color: #3e4948; font-size: 12px; line-height: 1.7; }
.library-holdings { margin-top: 8px; }
.library-holdings > div { margin-top: 6px; }
.library-holdings > div > p { margin-top: 4px; font-size: 12px; color: #3e4948; line-height: 1.7; }
.library-status { display: inline-block; padding: 3px 7px; border-radius: 5px; color: #3e4948; background: #edeeef; font-size: 11px; font-weight: 700; }
.library-status.is-available { background: #d5f2ef; color: #006a6a; }
.library-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.library-due { font-size: 12px; color: #3e4948; }
.library-holding-action { margin-top: 8px; }
.library-holding-action button { color: #006a6a; font-size: 12px; font-weight: 700; }
.library-help { margin: 10px 2px; font-size: 11px; line-height: 1.8; color: #3e4948; }
.library-message { padding: 16px; font-size: 13px; color: #3e4948; line-height: 1.8; }
.library-more { display: block; width: 100%; padding: 10px; font-size: 12px; font-weight: 700; color: #006a6a; }
.library-official { display: block; padding: 12px 16px; color: #006a6a; font-size: 11px; text-align: right; }
.library-result-note { padding: 8px 16px 0; font-size: 11px; color: #3e4948; line-height: 1.8; }
.library-holding-action a { color: #006a6a; }
.resident-post-row { display: block; position: relative; width: 100%; padding: 16px 38px 16px 16px; text-align: left; }
.resident-post-row:hover { background: rgba(0, 100, 93, .035); }
.resident-post-meta { display: flex; align-items: center; gap: 9px; color: #687674; font-size: 11px; margin-bottom: 5px; }
.resident-post-meta > span { display: inline-flex; align-items: center; }
.resident-post-title { display: block; font-size: 14px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.resident-post-arrow { position: absolute; right: 12px; top: calc(50% - 10px); color: #89928f; }
.resident-feed-end { padding: 10px 16px; text-align: center; min-height: 54px; }
.resident-body { display: grid; gap: 14px; }
.resident-body p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.resident-body img { display: block; width: 100%; height: auto; border-radius: 8px; background: #f2f5f3; }
.resident-attachment { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 10px; background: #f2f5f3; font-size: 13px; overflow-wrap: anywhere; }
.resident-attachment span:not(.material-symbols-rounded) { flex: 1; min-width: 0; }