/* 引入字体 */
@font-face {
    font-family: 'Romestone';
    src: url('./assets/ffbf618cfe80c20f97695dc0e1c3bae9.otf');
    font-weight: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('./assets/0c77f032cb17fce4e24be06657b76c83.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'DELIRIUM NCV';
    src: url('./assets/bbae517cc4f8d2e8095b4521eab40329.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('./assets/PlayfairDisplay-Italic-6.ttf');
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
}

/* 浏览器默认把 h1/h2 加粗；Romestone 文件只有常规字重。 */
h1, h2 {
    font-weight: 400;
}
h2 {
    letter-spacing: 0.01em;
}

body {
    background-color: #ddd;
    padding: 20px;
}

/* 海报画布 */
.poster {
    width: 564px;
    height: 846px;
    margin: 0 auto;
    background-color: #e8e8e8;
    overflow: hidden;
    position: relative;
}

/* 大标题 */
.main-title {
    position: absolute;
    top: 13px;
    left: 27px;
    width: 505px;
    height: 121px;
    font-family: 'Romestone',serif;
    font-size: 96px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #3a3436;
}

/* 食物板块 */
.food-title {
    position: absolute;
    top: 150px;
    left: 28px;
    width: 243px;
    height: 122px;
    font-family: 'Romestone',serif;
    font-size: 46.19px;
    line-height: 0.89;
    color: #222;
    letter-spacing: 0.01em;
    color: #3A3436;
}

.food-img {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FFE600;
}

.food-img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
}

.food-img-1 {
    top: 153px;
    left: 161px;
}
.food-img-1 img {
    top: -3px;
    left: 5px;
}

.food-img-2 {
    top: 199px;
    left: 161px;
}
.food-img-2 img {
    top: 3px;
    left: 0;
}

.food-img-3 {
    top: 153px;
    left: 230px;
}
.food-img-3 img {
    top: -2px;
    left: 10px;
}

.food-img-4 {
    top: 205px;
    left: 230px;
}
.food-img-4 img {
    top: 5px;
    left: 5px;
}

.food-list {
    position: absolute;
    top: 151px;
    left: 340px;
    width: 80px;
    height: 75px;
    list-style: none;
}

.food-list li {
    font-size: 15px;
    font-family: 'Oswald', Arial, sans-serif;
    line-height: 160%;
    padding-left: 12px;
    position: relative;
}

.food-list li:before {
    content: "•";
    position: absolute;
    left: 0;
}

/* 步数 */
.steps-label {
    position: absolute;
    top: 141px;
    left: 436px;
    width: 30px;
    height: 100px;
    background-color: #FFE600;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transform-origin: left top;
}

.steps-number {
    position: absolute;
    top: 244px;
    left: 436px;
    width: 60px;
    height: 100px;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 42px;
    line-height: 105%;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transform-origin: left top;
}

.steps-desc {
    position: absolute;
    top: 238px;
    left: 529px;
    width: 80px;
    height: 228px;
    font-size: 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
    transform: rotate(90deg);
    transform-origin: left top;
    white-space: nowrap;
}

/* 热门地点 */
.hotspots-section {
    position: absolute;
    top: 267px;
    left: 28px;
    width: 214px;
    height: 149px;
}

.bar-chart {
    position: absolute;
    top: 19px;
    left: 0;
    width: 214px;
    height: 70px;
}

.bar-item {
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 70px;
}

.bar-item:nth-child(1) { left: 18px; }
.bar-item:nth-child(2) { left: 56px; }
.bar-item:nth-child(3) { left: 93px; }
.bar-item:nth-child(4) { left: 130px; }
.bar-item:nth-child(5) { left: 165px; }
.bar-item:nth-child(6) { left: 195px; }

.bar {
    width: 14px;
    background-color: #FFE600;
    position: absolute;
    bottom: 0;
}

.bar-label {
    position: absolute;
    bottom: -30px;
    left: -10px;
    font-size: 11px;
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: bold;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    white-space: nowrap;
}

.hotspots-title {
    position: absolute;
    top: 100px;
    left: 0;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 28px;
    line-height: 0.95;
    color: #222;
}

.hotspots-desc {
    position: absolute;
    top: 105px;
    left: 120px;
    font-size: 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
}

/* 播放列表 */
.playlist-section {
    position: absolute;
    top: 267px;
    left: 280px;
    width: 256px;
    height: 149px;
}

.playlist-title {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 28px;
    line-height: 0.95;
    color: #222;
}

.playlist-list {
    position: absolute;
    top: 70px;
    left: 10px;
    list-style: none;
}

.playlist-list li {
    font-size: 11px;
    font-family: 'Oswald', Arial, sans-serif;
    line-height: 140%;
}

.playlist-desc {
    position: absolute;
    top: 130px;
    left: 0;
    font-size: 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
}

.pie-img {
    position: absolute;
    top: 10px;
    right: 0;
    width: 120px;
    height: 120px;
}

/* 交通方式 */
.transport-section {
    position: absolute;
    top: 416px;
    left: 28px;
    width: 214px;
    height: 185px;
}

.transport-item {
    position: relative;
    height: 34px;
    margin-bottom: 0;
}

.transport-label {
    position: absolute;
    left: 0;
    top: 10px;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 20px;
    line-height: 1;
    color: #222;
}

.transport-bar {
    position: absolute;
    left: 60px;
    top: 14px;
    height: 14px;
    background-color: #FFE600;
}

.transport-desc {
    position: absolute;
    top: 150px;
    left: 0;
    font-size: 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
}

/* 餐厅 */
.restaurant-section {
    position: absolute;
    top: 476px;
    left: 269px;
    width: 266px;
    height: 125px;
    border: 1px solid #333;
}

.restaurant-title {
    position: absolute;
    top: 7px;
    left: 9px;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 20px;
    line-height: 0.95;
    color: #222;
}

.restaurant-desc {
    position: absolute;
    top: 12px;
    left: 141px;
    width: 122px;
    font-size: 10px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
}

.restaurant-list {
    position: absolute;
    top: 54px;
    left: 18px;
    width: 244px;
    height: 68px;
}

.r-item {
    position: absolute;
    top: 0;
    width: 25px;
    height: 68px;
}

.r-item:nth-child(1) { left: 0; }
.r-item:nth-child(2) { left: 31px; }
.r-item:nth-child(3) { left: 62px; }
.r-item:nth-child(4) { left: 93px; }
.r-item:nth-child(5) { left: 124px; }
.r-item:nth-child(6) { left: 155px; }
.r-item:nth-child(7) { left: 186px; }
.r-item:nth-child(8) { left: 217px; }

.r-stars {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 9px;
    color: #FFE600;
    transform: rotate(-90deg);
    transform-origin: left center;
    white-space: nowrap;
}

.r-name {
    position: absolute;
    bottom: 5px;
    left: 8px;
    font-size: 8px;
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: bold;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    white-space: nowrap;
}

/* 每周时间 */
.weekly-section {
    position: absolute;
    top: 601px;
    left: 28px;
    width: 508px;
    height: 118px;
}

.weekly-title {
    position: absolute;
    top: 0;
    left: 2px;
    font-family: 'Romestone', Arial Black, sans-serif;
    font-size: 26px;
    line-height: 0.95;
    color: #222;
}

.weekly-chart {
    position: absolute;
    top: 50px;
    left: 0;
    width: 508px;
    height: 60px;
    object-fit: cover;
}

/* 底部时间 */
.bottom-time {
    position: absolute;
    top: 741px;
    left: 27px;
    width: 534px;
    height: 101px;
}

.time-wake {
    position: absolute;
    top: 1px;
    left: 0;
    font-family: 'DELIRIUM NCV', Arial Black, sans-serif;
    font-size: 56px;
    line-height: 1;
    color: #222;
    white-space: nowrap;
    width: 179px;
}

.time-middle {
    position: absolute;
    top: 22px;
    left: 178px;
    width: 135px;
    text-align: center;
}

.time-note {
    font-size: 11px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 115%;
    color: #333;
}

.arrow {
    font-size: 16px;
    color: #666;
    margin-top: 3px;
}

.time-sleep {
    position: absolute;
    top: 0;
    left: 327px;
    font-family: 'DELIRIUM NCV', Arial Black, sans-serif;
    font-size: 56px;
    line-height: 1;
    color: #222;
    white-space: nowrap;
    width: 207px;
}

/* 以下按 564 × 846 原画布校准。所有坐标都相对 .poster。 */
body { background: #e3e4e6; padding: 30px 20px; }
.poster { background: #ebebed; color: #3a3436; }

/* 每块顶部的细线是画面分区的一部分。 */
.food-section::before,
.hotspots-section::before,
.playlist-section::before,
.transport-section::before,
.weekly-section::before,
.weekly-section::after {
    content: "";
    position: absolute;
    height: 1px;
    background: #b5b5b5;
}
.food-section::before { left: 28px; top: 133px; width: 384px; }
.hotspots-section::before,
.transport-section::before { left: 0; top: 0; width: 214px; }
.playlist-section::before { left: 0; top: 0; width: 272px; }
.weekly-section::before { left: 0; top: 0; width: 214px; }
.weekly-section::after { left: 0; top: 116px; width: 508px; }

.food-title { top: 163px; font-size: 46.19px; line-height: 0.89; }
/* 图片自身是透明抠图，保留原始宽高；黄色圆单独放在图片后面。 */
.food-img { width: auto; height: auto; border-radius: 0; background: none; }
.food-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eddf00;
}
.food-img img {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    object-fit: contain;
}
.food-img-1 { top: 153px; left: 189px; }
.food-img-2 { top: 199px; left: 189px; }
.food-img-2::before { top: 2px; }
.food-img-3 { top: 153px; left: 258px; }
.food-img-3::before { left: 31px; }
.food-img-4 { top: 205px; left: 258px; }
.food-img-4::before { top: -4px; left: 31px; }

/* 旋转前盒子宽 126px，向左旋转后正好占右侧 100px 宽。 */
.steps-label, .steps-number {
    left: 436px;
    width: 126px;
    height: 100px;
    padding: 0;
    background: none;
    display: block;
    font-family: 'DELIRIUM NCV', sans-serif;
    font-size: 98.285px;
    font-weight: normal;
    line-height: 103px;
    letter-spacing: 0;
    text-align: center;
    transform: rotate(-90deg);
    transform-origin: left top;
}
.steps-label { top: 141px; color: #eddf00; }
.steps-number { top: 244px; color: #3a3436; }
.steps-desc {
    top: 238px;
    left: 529px;
    width: 228px;
    height: 42px;
    font-size: 10.342px;
    line-height: 1.1;
    transform: rotate(-90deg);
    transform-origin: left top;
}

.bar-chart { top: 19px; }
.bar { width: 12px; background: #eddf00; }
.bar-label {
    left: -12px;
    bottom: -2px;
    font-size: 11px;
    font-weight: normal;
}
.hotspots-title { font-size: 32.563px; top: 100px; }
.hotspots-desc { top: 105px; left: 98px; font-size: 10.342px; }

.playlist-section { left: 268px; width: 272px; height: 187px; }
.playlist-title { top: 13px; font-size: 32.563px; line-height: 0.89; }
.playlist-list { top: 90px; left: 0; list-style-position: inside; }
.playlist-list li { font-size: 10.342px; line-height: 1.45; }
.playlist-desc { top: 169px; font-size: 10.342px; }
.pie-img { top: 12px; right: 5px; width: 171px; height: 175px; }

.transport-label { top: 17px; font-size: 32.563px; }
.transport-bar { top: 20px; height: 28px; background: #eddf00; }
.transport-item:nth-child(1) .transport-bar { left: 28px; width: 114px; }
.transport-item:nth-child(2) .transport-bar { left: 56px; width: 117px; }
.transport-item:nth-child(3) .transport-bar { left: 32px; width: 175px; }
.transport-item:nth-child(4) .transport-bar { left: 26px; width: 65px; }
.transport-desc { top: 157px; left: -1px; font-size: 10.342px; }

.restaurant-section { box-sizing: border-box; border-color: #999; }
.restaurant-title { font-size: 32.563px; }
.restaurant-desc { font-size: 10.342px; }
.r-stars {
    top: 5px;
    left: 5px;
    font-size: 12px;
    writing-mode: vertical-rl;
    transform: none;
    color: #eddf00;
}
.r-name { font-size: 11.711px; font-weight: normal; }

.weekly-title { top: 18px; font-size: 32.563px; line-height: 0.89; }
.weekly-chart {
    top: 28px;
    left: 2px;
    width: 507px;
    height: 90px;
    object-fit: fill;
}

.time-wake, .time-sleep {
    font-size: 98.285px;
    line-height: 1.05;
    color: #3a3436;
}
.time-note { font-size: 10.342px; text-align: left; }