@import "./common/reset.css";
@import "./common/base.css";

@import "./components/taskbar.css";

@import "../modules/viewerWindow/viewerWindow.css";
@import "./components/viewer.css";

@import "./sections/sections.css";
@import "./sections/writings.css";
@import "./sections/lifelog.css";
@import "./sections/archive.css";
@import "./sections/about.css";
@import "./sections/reflection.css";
@import "./sections/photolog.css";
@import "./sections/links.css";

@import "./theme/light.css";
@import "./theme/dark.css";
@import "./theme/theme.css";

#content-primary {
  display: grid;
  grid-template-columns: 1.7fr 1fr 21rem;
  gap: 1.25rem;
  
  align-items: stretch;
  
  margin-bottom: 1.25rem;
}

#content-secondary {
  display: grid;
  grid-template-columns: 1fr 1.7fr 21rem;
  align-items: stretch;

  gap: 1.25rem;

  margin-bottom: 1.25rem;
}

#content-tertiary {
  display: none;
  grid-template-columns: 1fr 1fr 21rem;
  align-items: stretch;

  gap: 1.25rem;
}

#writings, #lifelog-and-archive, #about,
#reflection, #photolog, #links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* 세로 모드 2단 (portrait) */
@media (orientation: portrait), (max-width: 1152px) {
  html {
    font-size: 2.1vw;
  }

  main {
    padding: 3.75rem 0.75rem 0.75rem 0.75rem;
  }

  footer {
    border: none;
  }

  #content-primary {
    grid-template-columns: 1fr 19rem;
    gap: 0.75rem;

    align-items: stretch;

    margin-bottom: 1rem;
  }

  #content-secondary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;

    align-items: stretch;

    margin-bottom: 1rem;
  }

  #content-tertiary {
    display: grid;
    grid-template-columns: 1fr 19rem;
    gap: 0.75rem;

    align-items: stretch;
  }

  #about #photo-zone {
    width: 19rem; 
    height: 15.5rem;
  }

  #about #profile {
    margin-top: var(--base-margin-size-light);
  }

  #about .profile-thumbnail {
    width: 100%;
    height: auto;
  }

  #taskbar {
    grid-template-columns: 1fr 2.5rem 2rem;
    height: 2.6rem;
    border: none;
  }

  #taskbar #task-items {
    display: none;
  }

  #logo {
    width: 6rem;
  }

  .writings-viewer,
  .lifelog-viewer,
  .archive-viewer,
  .photolog-viewer,
  .reflection-viewer { 
    border: none;
  }

  #blog-post-list-all-viewer .writings-viewer-menu,
  #lifelog-post-list-all-viewer .lifelog-viewer-menu,
  #photolog-post-list-all-viewer .photolog-viewer-menu {
    width: 100%;
  }

  #viewer-maximize-button {
    display: none;
  }

  #viewer-minimize-button {
    display: none;
  }

  #screen-shade-button {
    visibility: hidden;
  }
}

/* 세로 모드 1단 (portrait) */
@media (orientation: portrait) and (max-width: 541px) {
  html {
    font-size: 4.3vw;
  }

  main {
    padding-top: 3.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .blog-post-photo-container {
    width: 100%;
    height: auto;
  }

  #content-primary {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 1rem;
    margin-bottom: 0;
}

  #content-secondary, #content-tertiary {
    display: none; /* 세로 모드에서는 보이지 않도록 */
  }

  #task-items {
    display: none;
  }

  #about #photo-zone {
    width: 100%; 
    height: auto;
    box-sizing: border-box;
  }

  #writings .curation-teaser-panel {
    flex-direction: column;
  }

  #writings .main-teaser-thumbnail {
    width: 100%;
    height: auto;
  }

  #writings .curation-teaser-panel .meta {
    margin-top: 1rem;
  }

  #writings .section-item-panel {
    flex-direction: column;
  }

/*@media (orientation: landscape) and (max-width: 768px) {
  html {
    font-size: clamp(14px, 1vw, 18px);
  }*/
}