planner.sori.studio/src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Inter", "Pretendard", ui-sans-serif, system-ui, sans-serif;
    color: #111111;
    background: #f3f0ea;
  }

  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at top, rgba(255, 255, 255, 0.9), transparent 32%),
      linear-gradient(180deg, #f6f2ea 0%, #efe8de 100%);
  }

  button {
    @apply outline-none;
  }
}

@media print {
  @page {
    margin: 0;
  }

  html,
  body {
    background: #ffffff !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  body {
    min-height: auto;
    margin: 0;
  }

  main {
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-hidden {
    display: none !important;
  }

  .print-only {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .print-root {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .print-paper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .print-paper:last-child {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  body[data-print-layout='single'] .print-paper {
    width: 210mm;
    height: 297mm;
    align-items: center;
    justify-content: center;
  }

  .print-paper--double {
    display: grid !important;
    grid-template-columns: repeat(2, 139mm);
    justify-content: center;
    align-content: center;
    column-gap: 4mm;
  }

  body[data-print-layout='double'] .print-paper {
    width: 297mm;
    height: 210mm;
  }

  body[data-print-layout='single'] .print-paper--single .print-sheet-frame {
    width: 198mm;
    height: 281mm;
  }

  .print-sheet-frame {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: #ffffff !important;
  }

  .print-sheet-frame--blank {
    background: #ffffff !important;
  }

  body[data-print-layout='double'] .print-paper--double .print-sheet-frame {
    width: 139mm;
    height: 196mm;
  }

  .planner-sheet {
    box-shadow: none !important;
  }

  body[data-print-layout='single'] .print-paper--single .print-sheet-frame .planner-sheet {
    width: 762px !important;
    max-width: none !important;
    transform-origin: top left;
    transform: scale(0.982);
    box-shadow: none !important;
    background: #ffffff !important;
  }

  body[data-print-layout='double'] .print-paper--double .print-sheet-frame .planner-sheet {
    width: 762px !important;
    max-width: none !important;
    transform-origin: top left;
    transform: scale(0.6894);
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .print-sheet-frame .planner-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .planner-sheet__meta-top,
  .planner-sheet__meta-bottom,
  .planner-sheet__body {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
  }

  .planner-sheet__meta {
    gap: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .planner-sheet__meta-top > div,
  .planner-sheet__meta-bottom > div {
    min-height: 78px !important;
    overflow: visible !important;
  }

  .planner-sheet__meta-bottom > div:first-child {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .planner-sheet__meta-bottom > div:last-child {
    width: 210px !important;
    max-width: 210px !important;
    flex: 0 0 210px !important;
  }

  .planner-field__header {
    width: 100% !important;
    min-width: 0 !important;
  }

  .planner-field__header > span:first-child {
    white-space: nowrap !important;
    letter-spacing: 0.16em !important;
  }

  .planner-sheet__meta-bottom > div:last-child > p {
    padding-top: 24px !important;
    white-space: nowrap !important;
  }

  .planner-sheet__lists {
    width: 394px !important;
    flex: 1 1 auto !important;
  }

  .planner-sheet__timetable {
    width: 210px !important;
    flex-shrink: 0 !important;
  }

  .planner-sheet__timetable-scroll {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .planner-sheet__timetable-grid {
    min-width: 210px !important;
  }

  .planner-sheet textarea {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    overflow: hidden !important;
    padding-top: 4px !important;
    line-height: 1.55 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  .print-paper--double .print-sheet-frame {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

@media screen {
  .print-only {
    display: none !important;
  }
}

.panel-fade-enter-active,
.panel-fade-leave-active {
  transition: opacity 220ms ease;
}

.panel-fade-enter-from,
.panel-fade-leave-to {
  opacity: 0;
}

.drawer-left-enter-active,
.drawer-left-leave-active,
.drawer-right-enter-active,
.drawer-right-leave-active {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.drawer-left-enter-from,
.drawer-left-leave-to {
  opacity: 0;
  transform: translateX(-24px) scale(0.985);
}

.drawer-right-enter-from,
.drawer-right-leave-to {
  opacity: 0;
  transform: translateX(24px) scale(0.985);
}