.tan-page{padding:40px 0 80px}.tan-page h1{margin-bottom:8px}.tan-intro{color:#666;margin-bottom:36px;max-width:600px}.tan-card{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:48px;overflow:hidden}.tan-card__meta{align-items:flex-start;border-bottom:1px solid #eee;display:flex;gap:16px;justify-content:space-between;padding:16px 18px}.tan-card__meta-text h2{font-size:1.1rem;margin:0 0 3px}.tan-card__meta-text p{color:#666;font-size:.88rem;margin:0}.tan-card__controls{align-items:center;display:flex;flex-shrink:0;gap:4px;padding-top:2px}@media (max-width:768px){.tan-card__meta{align-items:stretch;flex-direction:column}.tan-card__controls{flex-wrap:wrap;width:100%}.tan-mode-btn{flex:1 1 auto;justify-content:center}}.tan-mode-btn{align-items:center;background:#fff;border:1px solid #ccc;border-radius:3px;color:#666;cursor:pointer;display:inline-flex;font-size:.78rem;font-weight:600;gap:5px;line-height:1;padding:5px 11px;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}.tan-mode-btn:hover{border-color:#65634c;color:#65634c}.tan-mode-btn.is-active{background:#65634c;border-color:#65634c;color:#fff}.tan-icon{align-items:center;display:inline-flex;gap:2px}.tan-icon--slider span{background:currentColor;border-radius:1px;display:inline-block;height:11px;opacity:.35;width:8px}.tan-icon--slider span:nth-child(2){opacity:1;width:2px}.tan-icon--slider span:nth-child(3){opacity:.7}.tan-icon--horiz span{background:currentColor;border-radius:1px;display:inline-block;height:11px;width:8px}.tan-icon--vert{flex-direction:column;gap:2px}.tan-icon--vert span{background:currentColor;border-radius:1px;display:inline-block;height:4px;width:16px}.tan-slider{background:#111;cursor:col-resize;overflow:hidden;position:relative;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;width:100%}.tan-slider img{display:block;height:auto;pointer-events:none;width:100%}.tan-slider__now{display:block}.tan-slider__then{-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0);-o-object-fit:cover;object-fit:cover}.tan-card--capped .tan-slider__now,.tan-slider__then{height:100%;left:0;position:absolute;top:0;width:100%}.tan-card--capped .tan-sbs__item img,.tan-card--capped .tan-slider__now,.tan-card--capped .tan-slider__then{-o-object-fit:contain;object-fit:contain}.tan-card--capped .tan-sbs__item{background:#111}.tan-slider__divider{bottom:0;box-shadow:0 0 6px rgba(0,0,0,.5);top:0;transform:translateX(-50%);width:3px}.tan-slider__divider,.tan-slider__handle{background:#fff;left:50%;pointer-events:none;position:absolute}.tan-slider__handle{align-items:center;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.4);display:flex;height:48px;justify-content:center;top:50%;transform:translate(-50%,-50%);width:48px}.tan-slider__handle:after,.tan-slider__handle:before{border-bottom:8px solid transparent;border-top:8px solid transparent;content:"";display:block;height:0;width:0}.tan-slider__handle:before{border-right:10px solid #65634c;margin-right:4px}.tan-slider__handle:after{border-left:10px solid #65634c}.tan-slider__label{background:rgba(0,0,0,.55);border-radius:2px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.06em;padding:4px 12px;pointer-events:none;position:absolute;text-transform:uppercase;top:14px;transition:opacity .2s}.tan-slider__label--then{left:14px}.tan-slider__label--now{right:14px}.tan-sbs{display:none}.tan-sbs__item{flex:1;overflow:hidden;position:relative}.tan-sbs__item img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.tan-sbs__label{background:rgba(0,0,0,.55);border-radius:2px;bottom:12px;color:#fff;font-size:.78rem;font-weight:700;left:12px;letter-spacing:.06em;padding:4px 12px;position:absolute;text-transform:uppercase}.tan-card .tan-slider{display:block}.tan-card .tan-sbs,.tan-card.tan-mode--horiz .tan-slider{display:none}.tan-card.tan-mode--horiz .tan-sbs{display:flex;flex-direction:row}.tan-card.tan-mode--horiz .tan-sbs__item+.tan-sbs__item{border-left:3px solid #fff}.tan-card.tan-mode--vert .tan-slider{display:none}.tan-card.tan-mode--vert .tan-sbs{display:flex;flex-direction:column}.tan-card.tan-mode--vert .tan-sbs__item+.tan-sbs__item{border-top:3px solid #fff}.tan-card__caption{background:#fafafa;border-top:1px solid #eee;color:#888;display:flex;font-size:.83rem;justify-content:space-between;padding:12px 18px}
