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

@font-face {
    font-family: 'penpen';
    src: url('../fonts/PenPen-Ten.otf') format('opentype');
}

.title {
    font-family: "penpen";
    font-weight: bold;
}

@font-face {
    font-family: 'wildflower';
    src: url('../fonts/Wildflower-Regular.otf') format('opentype');
}

.yunjean {
   font-family: "wildflower";
}


@font-face {
    font-family: 'tikkeul';
    src: url('../fonts/tikkeul-Regular.otf') format('opentype');
}

.min {
    font-family: "tikkeul";
}

@font-face {
    font-family: 'unluckypackage';
    src: url('../fonts/UnluckyPackage-Regular.otf') format('opentype');
}

.hyog {
    font-family: "unluckypackage";
}


@font-face {
    font-family: 'dolce';
    src: url('../fonts/DOLCE-Light.otf') format('opentype');
}

.yeseul {
    font-family: "dolce";
}


@font-face {
    font-family: 'toilettissue';
    src: url('../fonts/ToiletTissue.otf') format('opentype');
}

.eunyoo {
    font-family: "toilettissue";
}

@font-face {
    font-family: 'mystical';
    src: url('../fonts/Mystical-Regular.otf') format('opentype');
}

.juhyun {
    font-family: "mystical";
}

@font-face {
    font-family: 'rokkugo';
    src: url('../fonts/Rokkugo-Regular.otf') format('opentype');
}

.jungeun {
    font-family: "rokkugo";
}

@font-face {
    font-family: 'birdcalling';
    src: url('../fonts/Birdcalling-Regular.otf') format('opentype');
}

.jisu {
    font-family: "birdcalling";
}


body {
    font-family: monospace;
    overflow: hidden;
    background-color: lightyellow;
    word-break: keep-all;
}

nav {
    position: absolute;
    height: 100%;
    width: 200px;
    overflow-y: scroll;
}

.square {
    height: 70px;
    border-right: 1px solid orangered;
    border-bottom: 1px solid orangered;
    padding: 10px;
    font-size: 20pt;
    display: flex;
    align-items: center;
}

.square:hover {
    background-color: orangered;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    background-color: orangered;
    color: lightyellow;
}


.link {
    color: orangered;
    text-decoration: underline;
}

button {
    width: 150px;
    height: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
}

button:hover {
    background-color: orangered;
    border: 1px black solid;
    cursor: pointer;
}

main {
    position: absolute;
    height: 1400px;
    width: calc(100% - 200px);
    margin-left: 200px;
    padding: 20px;
    font-weight: bold;
    overflow-y: auto;
    height: 100vh;
    scroll-padding-top: 20px;
    }

h1, p {
    font-size: 33pt;
}


h1 {
    margin-bottom: 10px;
}

.title {
    font-size: 17pt;
}

small {
    font-family: monospace;
    font-size: 11pt;
    font-weight: lighter;
    position: absolute;
    bottom: 20px;
}

.paragraph {
    font-size: 10pt;
    font-weight: normal;
    line-height: 15pt;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0.5px solid orangered;
}

p[contenteditable="true"]:focus {
  outline: none;
  color: orangered;
}

.content {
    display: none;
    height: 100%;
    overflow-y:auto;
    transition: background-color 0.4s ease;

}

.content:target {
    display: block;
}

.photos {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted orangered;
}

img {
    width: 100px;
    margin-top: 10px;
    border-radius: 50%;
}

@media screen and (max-width: 704px) {
  /* 헤더/오프셋 상수 */
  :root {
    --nav-h: 56px;  /* 상단 탭 높이 */
    --header-offset: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
  }

  /* 상단 가로 네비게이션 */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--nav-h);
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    background: lightyellow;
    border-bottom: 1px solid orangered;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
  }

  /* 네비 아이템 */
  .square {
    flex: 0 0 auto;
    min-width: 90px;
    height: var(--nav-h);
    padding: 0 10px;
    font-size: 14pt;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid orangered;
    border-bottom: none;
  }

  .title { font-size: 10pt; }

  /* 본문: 헤더만큼 내려서 시작 */
  main {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 12px;
    padding-top: var(--header-offset);   /* ← 겹침 방지 핵심 */
    height: 100vh;
    overflow-y: auto;
    scroll-padding-top: 12px;
    box-sizing: border-box;
  }

  /* 앵커(#id)로 점프할 때 가림 방지: 가장 확실한 방식 */
  .content::before {
    content: "";
    display: block;
    height: var(--header-offset);
    margin-top: calc(-1 * var(--header-offset));
    visibility: hidden;
  }

  /* 보조: 브라우저가 지원하면 이것도 함께 적용 */
  .content { scroll-margin-top: var(--header-offset); }

  /* 타이포/버튼 조정 */
  h1, p { font-size: 22pt; }
  small { font-size: 14pt; }
  .paragraph { font-size: 11pt; line-height: 1.5; font-weight: normal; }

  button {
    width: 100%;
    height: 46px;
    font-size: 14pt;
    margin: 12px 0;
  }

  img { width: 80px; margin-top: 10px; border-radius: 50%; }
  hr { margin: 12px 0; }
}



/*@media screen and (max-width: 704px) {

nav {
    width: 100px;
}

.square {
    height: 50px;
    font-size: 15pt;
}

.title {
    font-size: 9pt;
}

main {
    width: calc(100% - 100px);
    margin-left: 100px;
    }

h1, p {
    font-size: 30pt;
}

small {
    font-size: 17pt;
}

}*/